动态隐藏 dgrid 中的列答案

【问题标题】：Hide column in dgrid dynamically动态隐藏 dgrid 中的列
【发布时间】：2012-05-25 21:51:12
【问题描述】：

如何根据一些运行时参数隐藏 dgrid (gridFromHtml) 中的完整列？假设参数的值为 true，我应该能够显示某个列，如果值为 false，那么我应该能够隐藏同一列。

【问题讨论】：

【解决方案1】：

使用grid.styleColumn(columnId, css):

var grid = new Grid({
    store: store,
    columns: [
        { id: "artist", label: "Artist", field: "Artist"},
        { id: "name", label: "Song", field: "Name"},
        { id: "gerne", label: "Genre", field: "Genre"}
    ]
}, "grid-placeholder");

// to hide column with id="name"
grid.styleColumn("name", "display: none;");

// to show it
grid.styleColumn("name", "display: table-cell;");

【讨论】：

如果有一个参数可以传递给列本身，使它们隐藏起来，那就太好了。有没有关于你可以传递的参数的文档？
另外，我收到错误“指定了无效或非法的字符串”。传递东西时——你以前见过吗？

【解决方案2】：

有一个名为 ColumnHider 的 dgrid 扩展，它允许您传入具有“隐藏”属性的列。

require([
  "dojo/_base/declare", "dgrid/OnDemandGrid", "dgrid/extensions/ColumnHider"
], function(declare, OnDemandGrid, ColumnHider) {
  var grid = new(declare([OnDemandGrid, ColumnHider]))({
    columns: {
      col1: {
        label: "Column 1",
        hidden: true
      },
      col2: {
        label: "Column 2",
        unhidable: true
      },
      col3: "Column 3"
    }
  }, "grid");
  // ...
});

这也将使用户能够隐藏自己的列。您可以将某些列设置为不可隐藏，例如上面的第 2 列

【讨论】：

是否有另一种方法，我们不使用 ColumnHider 功能，而只是隐藏可重用网格的特定列并将其提供给用户，而没有任何选项供用户查看/隐藏列

【解决方案3】：

你需要使用toggleColumnHiddenState:

require([
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dgrid/extensions/ColumnHider'
], function (declare, OnDemandGrid, ColumnHider) {
    var grid = new (declare([ OnDemandGrid, ColumnHider ]))({
        columns: {
            'id': {label: '#'},
            'name': {label: 'Название'}
        }
    }, 'grid');

    grid.toggleColumnHiddenState('name', true);  // hiding 
    grid.toggleColumnHiddenState('name', false); // showing 
    grid.toggleColumnHiddenState('name');        // toggling column
});

【讨论】：

toggleColumnHiddenState：函数（id，隐藏）。看起来它需要一个 id，而不是一个名字。

【解决方案4】：

应该认为这会起作用

var grid = new dojox.grid.DataGrid({

    store: dataStore,
    structure: [{
        name: "ID",
        field: "id",
        width: "100px"
    }, {
        name: "Values",
        field: "values",
        width: "100px"
    }]
}, "myGrid");

grid.startup();

function showOrHideColumn(show, widget, index) {
  var d = show ? "" : "none"
  dojo.query('td[idx="'+index+'"]', widget.viewsNode).style("display", d);
  dojo.query('th[idx="'+index+'"]', widget.viewsHeaderNode).style("display", d);
}

showOrHideColumn(false,grid,0);

【讨论】：

问题是关于 dGrid，而不是 dojox 网格。 github.com/SitePen/dgrid
styleColumn 做 98% 的事情是一样的，可以设置脑细胞使用 :p