【问题标题】:DGrid Editor - Changing the Displayed Value when Trying to Edit a Text CellDGrid 编辑器 - 尝试编辑文本单元格时更改显示值
【发布时间】:2015-08-14 18:24:25
【问题描述】:

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

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

【问题讨论】:

    标签: javascript text dojo editor dgrid


    【解决方案1】:

    不定义renderCell 函数,而是定义get 函数(用于在将值发送到renderCell 之前对其进行转换)和set 函数(用于将数据转换回在保存编辑时将其发送到商店之前)。

    类似:

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

    另请参阅documentation

    【讨论】:

    • 感谢您的示例。 'get' 工作正常,但由于某种原因,'set' 函数永远不会被调用。你知道那会是什么时候吗?
    • set 函数应该在您调用grid.save() 的任何时候调用(或者如果在列上将autosave 设置为true,则任何时候编辑器失去焦点)。届时修改后的商品将put 重新进入商店。
    • 所以忘了提这一点,但最后,将自动保存设置为 true 并设置 get 几乎解决了所有问题。我不需要 set 方法,即使使用 save 它也没有被调用。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-01-01
    • 2018-08-28
    相关资源
    最近更新 更多