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

时间:2015-06-22 11:12:33

标签: javascript csv handsontable

我正在使用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>

1 个答案:

答案 0 :(得分:2)

我已经想到了这一点,所以万一它对任何人都有用......

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

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

由于