我的逻辑基于此处建议的代码http://jsfiddle.net/LkLkd405/4/
我在默认上下文菜单中添加了2个新项目(来自我的帮助程序模块的代码)
addColHideItemsToContextMenu: function(hot, colsToHide, globalColumns, globalHeaders){
var items = hot.contextMenu.defaultOptions.items;
//console.log("items: "+JSON.stringify(items));
//hide_col based on existing remove_col
var hideColItem = {
key: 'hide_col',
name: 'Hide column',
callback: function(key, selection) {
//remove_col code
//var amount = selection.end.col - selection.start.col + 1;
//this.alter("remove_col", selection.start.col, amount);
//hide_col custom code
colsToHide.push(selection.start.col);
var newCols = [];
var newHeaders = [];
for (var i = 0; i < globalHeaders.length; i++) {
if (colsToHide.indexOf(i) === -1) {
newCols.push(globalColumns[i]);
newHeaders.push(globalHeaders[i]);
}
}
hot.updateSettings({
columns: newCols,
colHeaders: newHeaders
});
},
disabled: function() {
var selected = this.getSelected(),
entireRowSelection = [selected[0], 0, selected[0], this.countCols() - 1],
rowSelected = entireRowSelection.join(',') == selected.join(',');
return (selected[1] < 0 || rowSelected);
}
};
items.push(hideColItem);
var showAllColItem = {
key: 'showall_cols',
name: 'Show all columns',
callback: function(key, selection) {
//var amount = selection.end.col - selection.start.col + 1;
//this.alter("remove_col", selection.start.col, amount);
colsToHide = [];
hot.updateSettings({
columns: globalColumns,
colHeaders: globalHeaders
});
},
disabled: function() {
return false;
}
};
items.push(showAllColItem);
},
然后我有一个服务器端分页模块可以从服务器接收json对象并将它们转换为数组数组,否则无法添加新列。
EnhancementPager: function(paramObj) {
var handsontableIntegration = function(rows){// called line 283
paramObj.handsonDataObjects = rows;//received from the server and not used again
paramObj.handsonDataArrays = help.buildArrayFromObjs(rows);
paramObj.globalHeaders = help.extractColHeaders(rows[0]);
paramObj.globalColumns = help.buildArrayDataSourceColumnConfig(paramObj.handsonDataArrays[0]);
paramObj.colsToHide = [];
if(paramObj.table){
var hot = paramObj.table;
hot.updateSettings({
colHeaders: paramObj.globalHeaders,
columns: paramObj.globalColumns
});
help.addColHideItemsToContextMenu(hot, paramObj.colsToHide, paramObj.globalColumns, paramObj.globalHeaders);
hot.loadData(paramObj.handsonDataArrays);
}
}
这是加载时网格的样子 - 注意顶行的值
这是隐藏列
后顶行变为的内容
然后我选择show all context item
第一行更改为此
我只用了几天的手势,这是一个非常好的写作和组织的js api。但我对这种行为感到非常困惑。