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列进行编码，如下所示：

            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

1 个答案: