小部件里面dojo dgrid [英] Widgets inside dojo dgrid

问题描述

我们的公司稍后从 dojox / DataGrid 转移到 dgrid 。现在我们发现， dgrid 似乎不支持dijit / dojox小部件开箱即用。

dojox / DataGrid 有一个 formatter（）可以返回一个小部件。那么那么容易呢？ GitHub上的API比较说

$ b $ dgrid支持格式化函数，但不支持从它们返回
小部件.dgrid还具有renderCell，预计
返回一个DOM节点。这可能表示用于显示
小部件（并且编辑器列插件完全是这样）。请注意，对于单元格编辑目的，
，使用编辑器列插件高度
鼓励 / p>

究竟如何？

使用编辑器插件与 {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 b $ bdojo / store / Memory，
dijit / form / Button，
dojo / domReady！
]，
 
 function b $ b列表，
网格，
选择，
编辑器，
键盘，
树，
声明，
 JsonRest，
 ob可以，
缓存，
内存，
按钮
）{
 
 var columns = [
 {
 label：操作，
字段：id，
 width：200px，
 renderCell：actionRenderCell 
} 
]; 
 
 var actionRenderCell = function（object，data，cell）{
 
 var btnDelete = new Button（{
 rowId：object.id，
 label ：删除，
 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： 
 columns：columns 
}，grid）; 
 
} 
  

Our company moved from dojox/DataGrid to dgrid some time back. Now we are finding out, dgrid doesn't seem to support dijit/dojox widgets out of the box.

dojox/DataGrid has a formatter() that can return a widget. So easy to doo it there! The API comparison on GitHub says

"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."

How exactly?

I have tried using the editor plugin with {editor: ' ', editorArgs:' '}. This does render a widget but is too restrictive. Eg How do I render a dijit/Button with its label being the value of the cell? Or something more complex, how do I use a (lesser known) dojox/image/MagnifierLite with an <img> generated from a formatter function with the src being the value of the store?

解决方案

you can use this sample code

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

}

这篇关于小部件里面dojo dgrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！