dojo dgrid 中的小部件

Posted 2023-02-22

【中文标题】dojo dgrid 中的小部件

【英文标题】：Widgets inside dojo dgrid

【发布时间】：2012-11-06 19:20:34

【问题描述】：

不久前，我们公司从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 是商店的值？

【参考方案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");

【讨论】：

是的！这样可行！谢谢！在您的示例中，您在 dojox/DataGrid 中有效地使用了类似格式化程序的 renderCell。 dgrid 的文档指出，如果同时应用了 formatter 和 renderCell，则忽略 formatter。知道为什么会这样设计吗？

这段代码确实有效，但我相当肯定它存在内存泄漏。 To avoid this use removeRow