如何通过Javascript函数正确传递表格数据答案

【问题标题】：How to properly pass table data through Javascript function如何通过Javascript函数正确传递表格数据
【发布时间】：2015-06-23 15:59:56
【问题描述】：

我正在使用 django 来设置一个基本的网络应用程序。我有一个 Handsontable，它使用表格，允许用户更新表格，按下 SAVE 按钮并将更改保存到 csv 文件。我的问题是我无法弄清楚如何正确传递数据。

我的方法是 afterChange 函数应该在更新表时将数据传递到 table_data_dump div 以便在按下 SAVE 按钮执行的 python 代码中使用它。

但是它似乎没有这样做，我无法弄清楚数据变量的正确用法。我是 JS 新手，所以很容易混淆。

完整的JS如下：

    <script type="text/javascript">

        $.ajaxSetup ({
            // Disable caching of AJAX responses
            cache: false
        });

        var data = [['', '', '', ''], ['', '', '', ''], ['', '', '', ''],
                    ['', '', '', ''], ['', '', '', ''], ['', '', '', ''],
                    ['', '', '', ''], ['', '', '', ''], ['', '', '', '']];

        var dataArray = {};

            dataArray['bnb'] = '/static/data/oim-oimom/lookup_bnb.csv'

            dataArray['testsplit'] = '/static/data/oim-oimom/lookup_testsplit.csv'

            dataArray['test two'] = '/static/data/oim-oimom/lookup_test-two.csv'


        var afterChange = function() {
            console.log(JSON.stringify(data));
            document.getElementById('table_data_dump').innerHTML = JSON.stringify(data)
        };

        var createTable = function(data) {

            var container = document.getElementById('lookup');
            var hot = new Handsontable(container, {
                data: data,
                afterChange: afterChange,
                minSpareRows: 1,
                rowHeaders: true,
                colHeaders: ['col1','col2','col3', 'Assignment'],
                columns: [
                    {readOnly: true},
                    {readOnly: true},
                    {readOnly: true},
                    {}
                ],
                colWidths: [335, 335, 335, 335]
                })};

        createTable(data);

        var SelectBoxChange = function() {
            var e = document.getElementById("split_name_select");
            var split_select = e.options[e.selectedIndex].text;
            $.get(dataArray[split_select], function(data) {
                document.getElementById('lookup').innerHTML='';
                data = $.csv.toArrays(data);
                createTable(data);

            });

        };

    </script>

【问题讨论】：

标签： javascript csv handsontable

【解决方案1】：

我已经弄清楚了，所以以防万一它对其他人有用......

我应该在这里使用 Handsontable 的 getData() 方法，但是由于我的变量范围，它给了我一个未定义的 hot.getData() 错误。我将这些更改为全局，然后可以访问数据。

除此之外afterChange 需要在创建表后使用updateSettings() 方法设置。这是为了允许定义容器，然后在分配之前在 afterChange 函数中引用。

谢谢

【讨论】：