首页 › 求助中心 › 列的隐藏问题

mtkj 发表于 2020-5-9 11:21:35

列的隐藏问题

KevinChen 发表于 2020-5-9 11:21:36

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

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

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

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

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import { showPopup, hidePopup, hasClass } from '@grapecity/wijmo';
import { ListBox } from '@grapecity/wijmo.input';
import { FlexGrid } from '@grapecity/wijmo.grid';
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
    // generate some random data
    var data = [], countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], products = ['Widget', 'Sprocket', 'Gadget', 'Doohickey'], colors = ['Black', 'White', 'Red', 'Green', 'Blue'], dt = new Date();
    for (var i = 0; i < 100; i++) {
      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);
      var item = {
            id: i,
            start: date,
            end: date,
            country: countries,
            product: products,
            color: colors,
            countryId: countryId,
            productId: productId,
            colorId: colorId,
            amount1: Math.random() * 10000 - 5000,
            amount2: Math.random() * 10000 - 5000,
            amount3: Math.random() * 10000 - 5000,
            amount4: Math.random() * 10000 - 5000,
            amount5: Math.random() * 10000 - 5000,
            discount: Math.random() / 4,
            active: i % 4 == 0
      };
      data.push(item);
    }
    // create the grid
    var theGrid = new FlexGrid('#theGrid', {
      itemsSource: data,
      formatItem: function (s, e) {
            if (e.panel == s.topLeftCells) {
                e.cell.innerHTML = '<span class="column-picker-icon glyphicon glyphicon-cog"></span>';
            }
      }
    });
    // 隐藏ID
    theGrid.columns.visible = false;

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

    // create the column picker
    var theColumnPicker = new ListBox('#theColumnPicker', {
      itemsSource: listBoxSource,
      checkedMemberPath: 'visible',
      displayMemberPath: 'header',
      lostFocus: function () {
            hidePopup(theColumnPicker.hostElement);
      }
    });
    // show the column picker when the user clicks the top-left cell
    var ref = theGrid.hostElement.querySelector('.wj-topleft');
    ref.addEventListener('mousedown', function (e) {
      if (hasClass(e.target, 'column-picker-icon')) {
            showPopup(theColumnPicker.hostElement, ref, false, true, false);
            theColumnPicker.focus();
            e.preventDefault();
      }
    });
    // save/restore layout buttons
    document.getElementById('btnSave').addEventListener('click', function () {
      localStorage.setItem('myLayout', theGrid.columnLayout);
    });
    document.getElementById('btnRestore').addEventListener('click', function () {
      var layout = localStorage.getItem('myLayout');
      if (layout) {
            theGrid.columnLayout = layout;
      }
    });
}

KevinChen 发表于 2020-5-9 13:07:42

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



参考API：

https://demo.grapecity.com.cn/wijmo/api/classes/wijmo_grid.column.html#visible

mtkj 发表于 2020-5-9 14:25:18

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




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

查看完整版本: 列的隐藏问题