我正在使用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>
答案 0 :(得分:2)
我已经想到了这一点,所以万一它对任何人都有用......
我应该在这里使用Handsontable的getData()
方法,但由于我的变量范围,它给了hot.getData()
一个未定义的错误。我将这些更改为全局,然后可以访问数据。
在创建表之后,需要使用afterChange
方法设置此updateSettings()
。这是为了允许定义容器,然后在分配之前在afterChange
函数中引用。
由于