dojo - 动态隐藏 dgrid 中的列

Question

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

Answer 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;");

Answer 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 列

Answer 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
});

Answer 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);