Dojo dgrid内部的小部件

iecba09b  于 2022-12-16  发布在  Dojo
关注(0)|答案(1)|浏览(145)

我们公司不久前从dojox/DataGrid迁移到dgrid,现在我们发现dgrid似乎不支持dijit/dojox小部件。
dojox/DataGrid有一个formatter()可以返回一个小部件。在那里很容易就可以完成!API comparison on GitHub
dgrid支持格式化程序函数,但不支持从这些函数返回小部件。dgrid还具有renderCell,该函数应返回DOM节点。这可能表面上用于显示小部件(而编辑器列插件正是这样做的)。请注意,对于单元格编辑目的,强烈建议使用编辑器列插件。
"怎么会“
我试过使用{editor: ' ', editorArgs:' '}的编辑器插件。这确实可以渲染一个小部件,但是限制太多了。例如,我如何渲染一个标签为单元格值的dijit/Button?或者更复杂的是,我如何使用一个(鲜为人知的)dojox/image/MagnifierLite和一个从格式化程序函数生成的<img>src是存储的值?

aemubtdh

aemubtdh1#

可以使用以下示例代码

require(
    [
        "dgrid/List",
        "dgrid/OnDemandGrid",
        "dgrid/Selection",
        "dgrid/editor",
        "dgrid/Keyboard",
        "dgrid/tree",
        "dojo/_base/declare",
        "dojo/store/JsonRest",
        "dojo/store/Observable",
        "dojo/store/Cache",
        "dojo/store/Memory",
        "dijit/form/Button",
        "dojo/domReady!"
    ],

    function(
        List, 
        Grid, 
        Selection, 
        editor, 
        Keyboard, 
        tree, 
        declare, 
        JsonRest, 
        Observable, 
        Cache, 
        Memory, 
        Button
    ) {

        var columns = [
            {
                label:"Actions", 
                field:"id", 
                width: "200px", 
                renderCell: actionRenderCell
            }
        ];

        var actionRenderCell = function (object, data, cell) {

            var btnDelete = new Button({
                rowId : object.id,
                label: "Delete",
                onClick: function () {
                    myStore.remove(this.rowId);
                }
            }, cell.appendChild(document.createElement("div")));

            btnDelete._destroyOnRemove = true;

            return btnDelete;

        }

        grid = new (declare([Grid, Selection, Keyboard]))({
            store: myStore,
            getBeforePut: false,
            columns: columns
        }, "grid");

}

相关问题