将列添加到 dstore 支持的 dgrid

Question

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

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

我想在加载网格内容时在客户端的商店中注入默认值 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');

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

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

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

将列添加到 dstore 支持的 dgrid

Adding a column to a dstore backed dgrid

dgrid

dstore