如何通过 Javascript 函数正确传递 table 数据

Question

我正在使用 Django 设置一个基本的 Web 应用程序。我有一个 Handsontable，它使用一个表单，允许用户更新 table，按“保存”按钮并将更改保存到 csv 文件。我的问题是我不知道如何正确传递数据。

我的方法是 afterChange 函数应该在更新 table 时将数据传递到 table_data_dump div 以便在 [=22] 中使用=] 代码按下保存按钮执行。

但是它似乎并没有这样做，而且我无法弄清楚数据变量的正确用法。我是 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>

Answer 1

我已经弄明白了，以防万一它对其他人有用...

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

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

谢谢

如何通过 Javascript 函数正确传递 table 数据

How to properly pass table data through Javascript function

javascript

csv

handsontable