将列添加到 dstore 支持的 dgrid

Posted 2023-02-16

【中文标题】将列添加到 dstore 支持的 dgrid

【英文标题】：Adding a column to a dstore backed dgrid

【发布时间】：2016-02-22 03:00:06

【问题描述】：

我有一个包含五列的网格 - 用户名、电子邮件、启用、锁定和删除。

用户名、电子邮件、启用和锁定均来自服务器。 Remove 是一个客户端元素，用于指示应该删除一行。

我想在加载网格内容时在客户端的 store 中注入默认值 remove，或者在用户与 CheckBox 小部件交互时设置它。

如何捕获从服务器请求对象的代码并添加另一列？

或者，有没有更好的方法来做到这一点。

var TrackableRest = declare([Rest, SimpleQuery, Trackable]);
var store = new TrackableRest(target: '/api/users', useRangeHeaders: true, idProperty: 'username');
aspect.after(store, "fetch", function (deferred) 
    return deferred.then(function (response) 
        response.remove = false;
        return json(response);
    )
);
var grid = new (declare([OnDemandGrid, Selection, Editor]))(
    collection: store,
    className: "dgrid-autoheight",
    columns: 
        username: 
            label: core.username
        ,
        email: 
            label: core.email
        ,
        enabled: 
            label: core.enabled,
            editor: CheckBox,
            editOn: "click",
            sortable: false,
            renderCell: libGrid.renderGridCheckbox
        ,
        locked: 
            label: core.locked,
            editor: CheckBox,
            editOn: "click",
            sortable: false,
            renderCell: libGrid.renderGridCheckbox
        ,
        remove: 
            editor: CheckBox,
            editorArgs: "checked": false,
            editOn: "click",
            label: core.remove,
            sortable: false,
            className: "remove-cb",
            renderHeaderCell: function (node) 
                var inp = domConstruct.create("input", id: "cb-all", type: "checkbox");
                return inp;
            ,
            renderCell: libGrid.renderGridCheckbox
        
    ,
    selectionMode: "none"
, 'grid');

另外，我不想将删除列发送到服务器。

【参考方案1】：

我的最终实现是像这样对删除列进行编码：

            remove: 
                editor: CheckBox,
                label: core.remove,
                sortable: false,
                className: "remove-cb",
                renderHeaderCell: function (node) 
                    var inp = domConstruct.create("input", id: "cb-all", type: "checkbox");
                    return inp;
                
            

执行删除的代码如下：

    var removeBtn = new Button(
        label: core.remove
    , 'user-remove-btn');
    removeBtn.startup();
    removeBtn.on("click", function (event) 
        var markedForDeletion = query(".dgrid-row .remove-cb input:checked", "user-grid");
        if( markedForDeletion.length > 0 ) 
            lib.confirmAction(core.areyousure, function () 
                markedForDeletion.forEach(function (node) 
                    var row = grid.row(node);
                    store.remove(row.data.username);
                );
            );
        
    );

因此，删除列成为由网格和事件处理程序处理的仅限客户端的控件。