隐藏列,然后使用数组数据源显示所有混乱的单元格值

时间:2015-05-08 12:31:36

标签: javascript handsontable

我的逻辑基于此处建议的代码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);

                }
            } 

这是加载时网格的样子 - 注意顶行的值

enter image description here

这是隐藏列

后顶行变为的内容

enter image description here

然后我选择show all context item

enter image description here

第一行更改为此

enter image description here

我只用了几天的手势,这是一个非常好的写作和组织的js api。但我对这种行为感到非常困惑。

0 个答案:

没有答案