javascript - DGrid 编辑器 - 尝试编辑文本单元格时更改显示值

Question

我正在使用 DGrid 编辑器列来编辑商店的内容。在我希望能够编辑的字段中，其中一个是对象。当我单击字段进行编辑时，我想要的是编辑器中显示的值与不编辑时网格显示的值相匹配。单元格格式仅显示对象的值，但是当我单击字段进行编辑时，字段中填充的是“[object Object]”，而不是对象的值。我仍然可以编辑它(尽管这样做的结果是该字段将显示“未定义”，直到我刷新页面，但我可以在更改后强制刷新)，但似乎无法让它显示什么我想要。
这是设置代码:

 // build the store
                this.postStore = Observable(Memory({
                    data: posts
                }));

                var formatCategory = function(object, data, cell) {
                    cell.innerHTML = object.category.value;
                };

                var formatAuthor = function(object, data, cell) {
                    cell.innerHTML = object.author.value;
                };

                var formatDate = function(object, data, cell) {
                    cell.innerHTML = new Date(object.dateCreated).toISOString();
                };

                // the columns displayed in the grid
                var columns = [
                    selector({
                        field: 'checkbox',
                        label: ' ',
                        selectorType: 'radio',
                        width:33
                    }),
                    {
                        label: "Author",
                        field: "author",
                        width: 120,
                        renderCell: formatAuthor
                    },
                    editor({
                        label: "Title",
                        field: "title",
                        editor: "text",
                        editOn: "click",
                        width: 200
                    }),
                    editor({
                        label: "Text",
                        field: "text",
                        editor: "text",
                        editOn: "click",
                        width:500
                    }, Textarea),
                    editor({
                        label: "Category",
                        field: "category",
                        editor: "text",
                        editOn: "click",
                        width: 150,
                        renderCell: formatCategory
                    }),
                    {
                        label: "Date",
                        field: "date",
                        renderCell: formatDate,
                        width: 120
                    }
                ];

                if (this.postGrid) {
                    this.postGrid.set("store", this.postStore);
                } else {
                    var SelectionGrid = new declare([OnDemandGrid, Selection, Keyboard, editor, selector, DijitRegistry, ColumnResizer]);
                    this.postGrid = new SelectionGrid({
                        store: this.postStore,
                        columns: columns,
                        selectionMode: 'none',
                        sort: [{attribute: "date", descending: false}]
                    }, this.postGridDiv);
                    this.postGrid.startup();

                    this.postGrid.on("dgrid-select, dgrid-deselect", lang.hitch(this, this._postSelected));

                    this.postGrid.on("dgrid-datachange", lang.hitch(this, function(evt){
                        var cell = this.postGrid.cell(evt);
                        var post = cell.row.data;

                        if (cell.column.field === "title") {
                            post.title = evt.value;
                        } else if (cell.column.field === "text") {
                            post.text = evt.value;
                        } else if (cell.column.field === "category") {
                            post.category.value = evt.value;
                        }

                        this._updatePost(post);
                    }));

Answer 1

不要定义 renderCell 函数，而是定义 get 函数(该函数用于在将值发送到 renderCell 之前对其进行转换) )和一个 set 函数(用于在保存编辑时将数据发送到存储之前将数据转换回来)。

类似于:

get: function (object) {
    return object.category.value;
},
set: function (object) {
    return { value: object.category };
}

另请参阅documentation .