如何创建一个道场数据网格，其中一列是标题行中的按钮？

Posted 2023-02-16

【中文标题】如何创建一个道场数据网格，其中一列是标题行中的按钮？

【英文标题】：How to create a dojo data grid with one of column being a button in header row?

【发布时间】：2014-01-04 08:35:28

【问题描述】：

我有一个 dojo(v1.6) 数据网格，它有一个复选框来选择行作为最左边的列。我需要将这些复选框的标题列作为删除按钮而不是全选复选框。单击删除按钮后，所有选定的行都会被删除。

请查找Data grid Demo。

我不知道如何将复选框的标题列作为按钮。请帮我自定义小部件。 这是网格js代码

dojo.ready(function()
    /*set up data store*/
    var data = 
      identifier: 'id',
      items: []
    ;
    var data_list = [
       col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91,
       col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33,
       col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34
    ];
    var rows = 10;
    for(var i=0, l=data_list.length; i<rows; i++)
      data.items.push(dojo.mixin( id: i+1 , data_list[i%l]));
    
    var store = new dojo.data.ItemFileWriteStore(data: data);

    /*set up layout*/
    var layout = [
         type: "dojox.grid._CheckBoxSelector" ,
        [
          'name': 'Column 1', 'field': 'id', 'width': '20%',
          'name': 'Column 2', 'field': 'col2', 'width': '20%',
          'name': 'Column 3', 'field': 'col3', 'width': '25%',
          'name': 'Column 4', 'field': 'col4', 'width': '20%'
        ]
    ];
    /*create a new grid:*/
    var grid = new dojox.grid.DataGrid(
        id: 'grid',
        store: store,
        structure: layout,
        cellOverClass: 'cellover'
      ,
      document.createElement('div')
    );
    /*append the new grid to the div*/
    dojo.byId("gridDiv").appendChild(grid.domNode);
    /*Call startup() to render the grid*/
    grid.startup();
);

html

<div id="gridDiv"></div>

【问题讨论】：

可能不是你想要的，但你可以查看 grids headerMenu 属性。

@tik27 在这种情况下，您是否在菜单插件中提到dojox.grid.EnhancedGrid？我使用的是普通的dojox.grid.dataGrid。能否请您发布网格 headerMenu 属性的参考链接？

【参考方案1】：

您可以从现有的 CheckBoxSelector 中实现自己的 CheckBoxSelector。我通过查看_Selector.js 源发现了这些方法。有趣的重写方法是generateHtml 和doclick。

见updated fiddle。

    dojo.declare('my.grid._CheckBoxSelector', [dojox.grid._CheckBoxSelector], 
    _headerBuilderClass: dojo.extend(function (view) 
        dojox.grid._HeaderBuilder.call(this, view);
    , dojox.grid._HeaderBuilder.prototype, 
        generateHtml: function () 
            var w = this.view.contentWidth || 0;
            return '<table style="width:' + w + 'px;" ' +
                'border="0" cellspacing="0" cellpadding="0" ' +
                'role="presentation"><tr><th style="text-align: center;">' +
                '<button data-dojo-type="dijit.form.Button" type="button">x</button><div class="dojoxGridCheckSelector dijitReset dijitInline dijitCheckBox" style="display:none"></div></th></tr></table>';
        ,
        doclick: function (e) 
            this.view.grid.removeSelectedRows();
            return true;
        
    )
);

和

/*set up layout*/
    var layout = [
        type: "my.grid._CheckBoxSelector"
    ,

    ...

    ]];

删除行

    this.view.grid.removeSelectedRows();

您可以在启动后解析网格以创建 dijit 小部件。

grid.startup();
// Not the best practice here but it should give you a starting point
// on where to find the header node.
dojo.parser.parse(grid.views.views[0].headerContentNode);

【讨论】：

感谢您的帮助。你能简单解释一下这里做了什么吗？我的意思是generateHtml 和doclick 方法的工作。标题列如何触发doclick 方法？我也实现了delete，但第一次调用deselectAll 方法时出错。如果我们从网格中间删除两行，网格不会在调用deselectAll 方法时取消选择所有行。

我发现了removeSelectedRows 函数，它比手动操作更好。按钮的解析也已实现。查看更新的答案和小提琴。

点击复选框后，我在萤火虫控制台中收到错误TypeError: node is null。我可以知道这个错误的原因吗？

这是一个无害但令人讨厌的错误。您可以恢复 <div class="dojoxGridCheckSelector dijitReset dijitInline dijitCheckBox" style="display:none"> 元素以满足小部件的要求。小提琴已更新。

我只能通过单击复选框来选择行吗？截至目前，行点击也会在行被选中时触发。