将列动态添加到handsontable
Posted
技术标签:
【中文标题】将列动态添加到handsontable【英文标题】:add column dynamically to handsontable 【发布时间】:2013-03-10 10:30:00 【问题描述】:我正在尝试将一列动态添加到handsontable。我在任何地方都没有看到示例,也没有在 API 中看到这样做的方法。有没有人想出一种方法来克服这个问题,或者有一些我可以查看的示例代码会有所帮助。
谢谢。
【问题讨论】:
【参考方案1】:你试过使用handsontable('alter', 'insert_col', index, amount)
方法吗?您可以使用alter
方法添加和删除列和行。请参阅handsontable 项目的documentation page。
【讨论】:
以上建议的方法仅适用于handsontable的专业版【参考方案2】:临时解决方案是动态维护数据表。 当需要新列时,更新数据结构并重新启动整个表。也许下面的sn-ps可能对你有帮助。
(function($)
$(function()
var data = [['a', 'b', 'c', 'd'], [1, 1, 1, 1], [2, 2, 2, 2]];
$('#a-div').handsontable(data: data);
/* add a new column */
data[0].push('e');
var len = data.length;
for (var i = 1; i < len; i++)
data[i].push(i);
$('#a-div').handsontable(data: data);
/* if new column isn't at the tail */
data[0].splice(idx, 0, "f");
);)(jQuery);
【讨论】:
【参考方案3】:如果您定义列设置,则它不会在运行时添加列 要解决此问题,请参阅链接How to create dynamic columns for Handsontable?
【讨论】:
【参考方案4】:你应该使用alter
函数
假设您有一个 2x3 的表格,并且您希望它是 5x5。
curRows = myTable.countRows() //curRows = 2
curCols = myTable.countCols() //curCols = 3
var newRows = 5
var newCols = 5
if(newRows > curRows)
myTable.alter('insert_row',curRows ,newRows - curRows);
else if (newRows < curRows)
myTable.alter('remove_row', curRows,curRows - newRows );
if(newCols > curCols)
myTable.alter('insert_col',curCols, newCols - curCols);
else if (newCols < curCols)
myTable.alter('remove_col',curCols, curCols - newCols);
【讨论】:
以上建议的方法仅适用于handsontable的专业版【参考方案5】:<div id="handsontable"></div>
JS
var Data = [
"header": scope1: Name, scope2: Address, scope3: Address, scope4: Country,
"tableData":[...., ....]
]
var $container = $('#handsontable');
var headerData = [];
var tableData = Data.tableData;
$.each(Data.header, function(k,v)
headerData.push(v);
);
$container.handsontable(
colHeaders: function (col)
var j=0;
var colCount = headerData.length;
do
if(col == j)
return headerData[j];
j++;
while (j<colCount)
);
var hot = $container.data('handsontable');
hot.loadData(tableData);
【讨论】:
纯代码答案没有多大用处。以上是关于将列动态添加到handsontable的主要内容,如果未能解决你的问题,请参考以下文章