小部件里面dojo dgrid

问题描述

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

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

$ 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

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！