动态隐藏dgrid中的列

时间:2012-05-18 10:07:55

标签: dojo dgrid

如何根据某些运行时参数隐藏dgrid(gridFromHtml)中的完整列? 让我们说如果参数的值为true我应该能够显示一些列,如果值为false,那么我应该能够隐藏同一列。

4 个答案:

答案 0 :(得分:15)

使用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;");

答案 1 :(得分:6)

有一个名为ColumnHider的dgrid扩展,它允许您传入一个带有“hidden”属性的列。

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列

答案 2 :(得分:1)

您需要使用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
});

答案 3 :(得分:-1)

应该认为这会起作用

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