datagrid - dojo dgrid 内的小部件

Question

我们公司搬迁自dojox/DataGrid至dgrid前段时间。现在我们发现，dgrid似乎不支持开箱即用的 dijit/dojox 小部件。

dojox/DataGrid有一个formatter()可以返回一个小部件。在那里很容易做到! 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 的格式化函数生成是商店的值(value)吗？

Answer 1

您可以使用此示例代码

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

}