datagrid – dojo dgrid中的小部件

我们的公司已经从dojox / DataGrid搬到了dgrid一段时间了.现在我们发现, dgrid似乎并不支持开箱即用的dijit / dojox小部件.

dojox / DataGrid有一个可以返回窗口小部件的格式化程序().那么那么容易呢！ API comparison on GitHub说

“dgrid supports formatter functions, but doesn’t support returning a
widget from them .dgrid also has renderCell, which is expected to
return a DOM node. This could ostensibly be used for displaying
widgets (and the editor column plugin does exactly this). Note that
for cell editing purposes, use of the editor column plugin is highly
encouraged.”

怎么样？

我已经尝试使用编辑器插件与{editor：”,editorArgs：”}.这样做会导致一个小部件,但是太限制了.例如,如何渲染一个dijit / Button,其标签是单元格的值？或更复杂的东西,我如何使用(不太已知)的dojox / image / MagnifierLite与< img>从格式化函数生成,src是商店的值？

您可以使用此示例代码

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");

}