列的隐藏问题

这里实际上用到了Wijmo的Input组件中ListBox组件，结合这个组件的一些特性就可以解决这个问题，就拿这个示例举例：
https://demo.grapecity.com.cn/wi ... ColumnPicker/purejs

原示例直接用grid的columns当listbox的数据源，直接展示和修改了columns的属性，所以这里只要把直接引用columns改为间接引用即可，关键代码如下：

1. // 只要在这里把直接引用改为间接引用即可
   
2.     var listBoxSource = [];
   
3.     theGrid.columns.forEach(function(col){
   
4.         // 这里把要隐藏的项目排除出去
   
5.         if(col.binding == "id"){return;}
   
6.         listBoxSource.push(col);
   
7.     });

复制代码

将以下完整代码替换掉示例的app.js即可：

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import './styles.css';
   
4. import { showPopup, hidePopup, hasClass } from '@grapecity/wijmo';
   
5. import { ListBox } from '@grapecity/wijmo.input';
   
6. import { FlexGrid } from '@grapecity/wijmo.grid';
   
7. document.readyState === 'complete' ? init() : window.onload = init;
   
8. function init() {
   
9.     // generate some random data
   
10.     var data = [], countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], products = ['Widget', 'Sprocket', 'Gadget', 'Doohickey'], colors = ['Black', 'White', 'Red', 'Green', 'Blue'], dt = new Date();
    
11.     for (var i = 0; i < 100; i++) {
    
12.         var date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60), countryId = Math.floor(Math.random() * countries.length), productId = Math.floor(Math.random() * products.length), colorId = Math.floor(Math.random() * colors.length);
    
13.         var item = {
    
14.             id: i,
    
15.             start: date,
    
16.             end: date,
    
17.             country: countries[countryId],
    
18.             product: products[productId],
    
19.             color: colors[colorId],
    
20.             countryId: countryId,
    
21.             productId: productId,
    
22.             colorId: colorId,
    
23.             amount1: Math.random() * 10000 - 5000,
    
24.             amount2: Math.random() * 10000 - 5000,
    
25.             amount3: Math.random() * 10000 - 5000,
    
26.             amount4: Math.random() * 10000 - 5000,
    
27.             amount5: Math.random() * 10000 - 5000,
    
28.             discount: Math.random() / 4,
    
29.             active: i % 4 == 0
    
30.         };
    
31.         data.push(item);
    
32.     }
    
33.     // create the grid
    
34.     var theGrid = new FlexGrid('#theGrid', {
    
35.         itemsSource: data,
    
36.         formatItem: function (s, e) {
    
37.             if (e.panel == s.topLeftCells) {
    
38.                 e.cell.innerHTML = '<span class="column-picker-icon glyphicon glyphicon-cog"></span>';
    
39.             }
    
40.         }
    
41.     });
    
42.     // 隐藏ID
    
43.     theGrid.columns[0].visible = false;
    
44. 
    
45.     // 只要在这里把直接引用改为间接引用即可
    
46.     var listBoxSource = [];
    
47.     theGrid.columns.forEach(function(col){
    
48.         // 这里把要隐藏的项目排除出去
    
49.         if(col.binding == "id"){return;}
    
50.         listBoxSource.push(col);
    
51.     });
    
52. 
    
53.     // create the column picker
    
54.     var theColumnPicker = new ListBox('#theColumnPicker', {
    
55.         itemsSource: listBoxSource,
    
56.         checkedMemberPath: 'visible',
    
57.         displayMemberPath: 'header',
    
58.         lostFocus: function () {
    
59.             hidePopup(theColumnPicker.hostElement);
    
60.         }
    
61.     });
    
62.     // show the column picker when the user clicks the top-left cell
    
63.     var ref = theGrid.hostElement.querySelector('.wj-topleft');
    
64.     ref.addEventListener('mousedown', function (e) {
    
65.         if (hasClass(e.target, 'column-picker-icon')) {
    
66.             showPopup(theColumnPicker.hostElement, ref, false, true, false);
    
67.             theColumnPicker.focus();
    
68.             e.preventDefault();
    
69.         }
    
70.     });
    
71.     // save/restore layout buttons
    
72.     document.getElementById('btnSave').addEventListener('click', function () {
    
73.         localStorage.setItem('myLayout', theGrid.columnLayout);
    
74.     });
    
75.     document.getElementById('btnRestore').addEventListener('click', function () {
    
76.         var layout = localStorage.getItem('myLayout');
    
77.         if (layout) {
    
78.             theGrid.columnLayout = layout;
    
79.         }
    
80.     });
    
81. }
    

复制代码

在配置columns时，加一个visible属性即可，如图：



参考API：

https://demo.grapecity.com.cn/wi ... column.html#visible

KevinChen 发表于 2020-5-9 13:07
在配置columns时，加一个visible属性即可，如图：

初始是不显示的，但是他可以勾选的显示，我现在需要这4个列，不让他勾选显示，固定在这儿