获取输入和组合框值并将值映射到新数组，写入 Excel

Question

我已经尽我所能了。我正在使用 Excel JS API 玩一些 JavaScript 代码。我有两个控件：一个文本框和一个组合框。文本框接受用户 [number] 输入，下拉列表列出要执行的操作（乘、除、加、减）。要点是我采用当前选择并按指定值执行指定操作，然后将其写回选择。在 Excel 中，这与 PasteSpecial/Operator.

相同

这是我的 JavaScript:

$('#mathButton').click(function() {
    callMathify()
        .catch(OfficeHelpers.logError);
});

function callMathify() {
    return Excel.run(function(context) {
        var inputValue = $('#input').val();
        if (inputValue == '') {
            console.log('Please enter a value first!');
        } else {
            var mathType = $('#mathAction').val();
            var selection = context.workbook.getSelectedRange();
            selection.load('values');
            console.log('Input: ' + inputValue + ', Operator: ' + mathType);
            return context.sync()
                .then(function() {
                    var newValues = selection.values.map(row => {
                        if (mathType = 'Multiply') {
                            return row.map(val => {return val * Number($('#input').val())});
                        } else if (mathType = 'Divide') {
                            return row.map(val => {return val / Number(inputValue)});
                        } else if (mathType = 'Add') {
                            return row.map(val => {return val + Number(inputValue)});
                        } else if (mathType = 'Subtract') {
                            return row.map(val => {return val - Number(inputValue)});
                        }
                    });
                    selection.values = newValues;
                    //return context.sync();
            });
        }
        return context.sync();
    });
}

我有一个简单的 HTML 结尾：

<p class="ms-font-m">
    Do some math on all cells in the selection.
    <br>
    Enter a value, choose the action, then click the button.
    <br>
</p>

<table>
    <tr>
        <td><p class="ms-font-m">Value: </p><input type="text" id="input" /></td>
        <td><p class="ms-font-m">Action: </p><select id="mathAction">
            <option value="multiply">Multiply</option>
            <option value="divide">Divide</option>
            <option value="add">Add</option>
            <option value="subtract">Subtract</option>
        </td>
    </tr>
</table>

<br>

<button id="mathButton" class="ms-Button">
    <span class="ms-Button-label">Mathify</span>
</button>

我在使用 'map' 时遇到错误，但现在我没有收到任何错误。有人看到我在这里做错了吗？

编辑：用变量替换了文本框引用，我在发帖前忘记添加了。

编辑：我根据Jakob的建议调整了代码，代码运行良好。我编辑了选项控件的 HTML id 以匹配下拉值的大小写敏感性（正确的大小写）。下面的代码运行良好。

$('#mathButton').click(function() {
    callMathify()
        .catch(OfficeHelpers.logError);
});

function callMathify() {
        return Excel.run(function(context) {
            var inputValue = $('#input').val();
            if (inputValue === '') {
                console.log('Please enter a value first!');
                return context.sync();
            } else {
                var selection = context.workbook.getSelectedRange();
                selection.load('values');
                return context.sync()
                    .then(function() {
                        var mathType = $('#mathAction').val();
                        switch (mathType) {
                            case "Multiply":
                                var newValues = selection.values.map(row => {
                                    return row.map(val => {return Number(val) * Number(inputValue)});
                                });
                                break;
                            case "Divide":
                                var newValues = selection.values.map(row => {
                                    return row.map(val => {return Number(val) / Number(inputValue)});
                                });
                                break;
                            case "Add":
                                var newValues = selection.values.map(row => {
                                    return row.map(val => {return Number(val) + Number(inputValue)});
                                });
                                break;
                            case "Subtract":
                                var newValues = selection.values.map(row => {
                                    return row.map(val => {return Number(val) - Number(inputValue)});
                                });
                                break;
                        }
                        selection.values = newValues;
                        console.log('Mathify operation complete! (' + mathType + ')');
                        return context.sync();
                });
            }
        });
    }

Answer 1

很高兴你问扎克！

您需要进行 3 处更改才能使您的代码片段正常工作：

您需要取消对最里面的 .then() 块中的 context.sync() 的注释。这可确保选择（范围）对象与 Excel 同步，并将新值应用于所选单元格。
当您将下拉列表的值与字符串进行比较时，您需要使用“===”运算符。
下拉列表控件中的值应与您在比较中使用的值匹配，因为它区分大小写。

我还注意到您对其中 3 个案例使用了 inputValue 变量，对第一个案例使用了 $('#input').val()。我修改了您的代码片段以在所有情况下都使用 inputValue。



    function callMathify() {
        return Excel.run(function(context) {
            var inputValue = $('#input').val();
            if (inputValue == '') {
                console.log('Please enter a value first!');
            } else {
                var mathType = $('#mathAction').val();
                var selection = context.workbook.getSelectedRange();
                selection.load('values');
                console.log('Input: ' + inputValue + ', Operator: ' + mathType);
                return context.sync()
                    .then(function() {
                        var newValues = selection.values.map(row => {
                            if (mathType === 'multiply') {
                                return row.map(val => {return val * Number(inputValue)});
                            } else if (mathType === 'divide') {
                                return row.map(val => {return val / Number(inputValue)});
                            } else if (mathType === 'add') {
                                return row.map(val => {return val + Number(inputValue)});
                            } else if (mathType === 'subtract') {
                                return row.map(val => {return val - Number(inputValue)});
                            }
                        });
                        selection.values = newValues;
                        return context.sync();
                });
            }        
        });
    }

您还可以进行一些更改以使代码更优化、更简洁。这里有一些建议：

通过声明一个函数然后在循环内部使用它来与 .map 循环外部的操作进行比较。
使用 switch 语句而不是链式 if 语句。

我会把它留给你去尝试这些改变，因为它超出了你最初的问题。

雅各布

获取输入和组合框值并将值映射到新数组，写入 Excel

Get input and combo box values and map values to new array, write to Excel

office-js