dojo 动态隐藏dgrid中的列

pbwdgjma  于 2022-12-16  发布在  Dojo
关注(0)|答案(4)|浏览(259)

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

dzjeubhm

dzjeubhm1#

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

smdncfj32#

有一个名为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

cxfofazt

cxfofazt3#

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

zzwlnbp84#

应该认为这会起作用

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

相关问题