dojo dgrid中的小部件

Question

dojo dgrid中的小部件

datagriddojodojox.grid.datagriddojox.griddgrid

9

我们公司在一段时间前从dojox/DataGrid迁移到了dgrid。但现在我们发现，dgrid似乎不支持dijit/dojox小部件。

dojox/DataGrid有一个formatter()，可以返回一个小部件。这很容易实现！在GitHub上的API比较中说：

"dgrid支持格式化程序函数，但不支持从它们返回小部件。dgrid还具有renderCell，预计返回一个DOM节点。这可能被用于显示小部件（编辑列插件正是这样做的）。请注意，为了单元格编辑目的，强烈推荐使用编辑器列插件。"

怎么做？

我已经尝试使用带有{editor: ' ', editorArgs:' '}的编辑插件。这确实渲染了一个小部件，但过于受限制。例如，如何呈现其标签为单元格值的？或者更复杂一些的情况，如何将一个（不太常见的）dojox/image/MagnifierLite与使用格式化程序函数生成的具有src为存储值的<img>一起使用？

- Gaurav Ramanan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ali Soleimani · Accepted Answer

你可以使用这段示例代码

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

}