Question

我不确定尝试在dojo.grid.DataGrid的列中创建不同类型的单元格是个好主意，如果我错了，请纠正我。

这是我的问题：我需要显示并让用户编辑一组键值对，因此我选择DataGrid来执行此操作。关键很简单，它们都是字符串，但根据某个键，值是不同的。其中一些有一个像“1-100”的范围，其中一些只是一个具有“真/假”值的开关，其中一些有几个值可供选择，如“easy / middle / hard”。

所以我认为对于不同类型的值，我应该使用不同的小部件来表示用户可以执行的某些操作。对于第一个，当值改变时，我使用文本aera并进行一些值检查。第二个我应该使用一个复选框，第三个我应该使用一个组合框。

在阅读了一些官方的dojo 1.7文档后，我发现dojo.grid.DataGrid没有提供直接的方法来做我想要的，DataGrid假设一列中的单元格应该具有相同的类型。任何人都可以帮我解决这个问题吗？给我一些示例代码给我一个方向。谢谢！我也在考虑另一个解决方案，“值”列中的单元格都是文本aera，单击它时，弹出窗口会显示正确的小部件，在那里更改值。任何人都能告诉我这种方式是否更容易实现？

谢谢！
克里斯

使用格式化代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test different widgets in one column</title>
    <link rel="stylesheet" href="lib/1.7.2/dojo/resources/dojo.css">
    <link rel="stylesheet" href="lib/1.7.2/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="lib/1.7.2/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="lib/1.7.2/dojox/grid/resources/claroGrid.css">

    <!-- <link rel="stylesheet" href="style.css" media="screen">
    <link rel="stylesheet" href="../../../resources/style/demo.css" media="screen"> -->
    <!-- load dojo and provide config via data attribute -->
    <script src="lib/1.7.2/dojo/dojo.js"
        data-dojo-config="isDebug: true, async: true">
    </script>
    <script>

        var grid, dataStore;
        require(["dojox/grid/DataGrid", 
                 "dojo/store/Memory",
                 "dojo/data/ObjectStore", 
                 "dojo/_base/xhr",
                 "dojo/domReady!",
                 "dijit/form/Button",
                 "dijit/form/ComboButton",
                 "dijit/Menu",
                 "dijit/MenuItem",
                 "dojox/grid/cells/dijit",
                 "dijit/form/ComboBox",
                 "dijit/form/ValidationTextBox"
                 ], function(DataGrid, Memory, ObjectStore, xhr, Button, ComboButton, Menu, MenuItem, ComboBox, ValidationTextBox) {
                 var gridCellsDijit = dojox.grid.cells;

            xhr.get({
                url: "jsondata",
                handleAs: "json"
            }).then(function(data){
                    dataStore =  new ObjectStore({ objectStore:new Memory({ data: data.items }) });

                    grid = new DataGrid({
                    store: dataStore,
                    query: { id: "*" }, 
                    escapeHTMLInData : false,
                    structure: [

                        {
                            name: "Setting Name", field: "setting_name", width: "50%", editable : false
                        },

                        {
                            name: "value", field: "_item", width: "50%", type: dojox.grid.cells._Widget, editable: false,
                            formatter: function(item, rowIndex, cell){
                                var store = cell.grid.store;
                                if (store.getValue(item, 'type') == 'enum') {
                                    var stateStore = new Memory({
                                            data: [
                                                {name:"setting1", id:"1"},
                                                {name:"setting2", id:"2"},
                                                {name:"setting3", id:"3"},
                                            ]
                                        });

                                    var comboBox = new dijit.form.ComboBox({
                                                name: "state",
                                                value: "setting1",
                                                store: stateStore,
                                                searchAttr: "name"
                                            });
                                    return comboBox;

                                }
                                else {
                                    var tb = new dijit.form.ValidationTextBox({promptMessage:'testtest'});
                                    return tb;
                                }

                            }
                            }
                         ]
                }, "grid");

                grid.startup();
            });
        });
    </script>
</head>
<body class="claro">
    <h1>test different widgets in one column</h1>

    <br/>
    <div id="grid"></div>
</body>

json数据样本是这样的：

{
"items": [
    {
        "setting_name": "setting1", 
        "value": "YES",
        "type":"enum",
        "candidates" : ["YES", "NO"]

    }, 
    {
        "setting_name": "setting2", 
        "value": "Disable",
        "type":"enum",
        "candidates" : ["Disable", "Enable"]

    } ,
    {
        "setting_name": "setting3", 
        "value": "19200",
        "type":"enum",
        "candidates" : ["9600", "19200", "38400", "57600"]
    }, 
    {
        "setting_name": "setting4", 
        "value": "25",
        "type":"decimal",
        "min" : "1",
        "max" : "99"
    }, 
    {
        "setting_name": "setting5", 
        "value": "1A",
        "type":"hex",
        "min" :"0" ,
        "max" :"FF"
    }
   ]

}

Answer 1

您可以使用formatter或get函数来执行此操作。根据您的值，然后显示一种dijit。我不确定它是否会起作用，但我认为在格式化器或触发器时，cellType可能仍会被更改。

如何在dojo.grid.DataGrid中创建具有不同小部件的列？

1 个答案: