在 dojo 数据网格单元格中设置组合框取决于值类型

Question

谁能帮助我如何以编程方式分别为列中的每个单元格设置 DataGrid（dojox/grid）单元格中的组合框？

结构参数：cellType 完成其工作，但列中的所有单元格都继承定义的类型。

使用格式化函数，我们可以返回 Combobox 对象，但它的行为与插入 cellType 的 Combobox 不同。

我也在考虑 onStartEdit 函数，但我不知道如何实现它。

我想要实现的是，如果单元格中的值是文本，那么我想显示具有所有可能性的组合框。如果值是一个数字，我根本不想显示组合框。

示例代码：（Dojo 版本 1.9.11）

 require([
                        "dojo/data/ItemFileReadStore",
                        "dojo/store/Memory",
                        "dojox/grid/DataGrid",
                        "dojo/data/ObjectStore",
                        "dojo/dom",
                        "dojo/dom-construct",
                        "dijit/form/ComboBox", 
                        "dojox/grid/cells/dijit",
                        "dojo/dom-style",
                        "dojo/domReady!"],
                function(ItemFileReadStore, Memory, DataGrid, ObjectStore, dom, domConstruct, ComboBox, dijit, domStyle){

                    var dataArray = [];
                    var dataMemory = new Memory({data:dataArray});

                    var gridStruc = [];                             
                    gridStruc.push({name: 'Name', field: 'col1', width: '100px', editable: false});
                    gridStruc.push({name: 'Type', field: 'col2', width: '100px', editable: false});
                    gridStruc.push({name: 'Value (cellType)', field: 'col3', width: '100px', editable: true, cellType: 'dojox.grid.cells.ComboBox', options: ["Test1","Test2"]});
                    gridStruc.push({name: 'Value (formatter)', field: 'col4', width: '100px', editable: true, formatter: formatterCb});                 

                    var columnObj0 = {};
                    columnObj0["col1"] = "Voltage";
                    columnObj0["col2"] = "Number";
                    columnObj0["col3"] = "5";   
                    columnObj0["col4"] = "5";                       
                    dataMemory.put(columnObj0);
                    var columnObj1 = {};
                    columnObj1["col1"] = "Type";
                    columnObj1["col2"] = "Text";
                    columnObj1["col3"] = "THT"; 
                    columnObj1["col4"] = "THT";                     
                    dataMemory.put(columnObj1);
                    var columnObj2 = {};
                    columnObj2["col1"] = "Num. Reflow";
                    columnObj2["col2"] = "Number";
                    columnObj2["col3"] = "3";   
                    columnObj2["col4"] = "3";                       
                    dataMemory.put(columnObj2);
                    var columnObj3 = {};
                    columnObj3["col1"] = "Series";
                    columnObj3["col2"] = "Text";
                    columnObj3["col3"] = "CBK34";   
                    columnObj3["col4"] = "CBK34";                       
                    dataMemory.put(columnObj3);

                    var dataStore = new ObjectStore({ objectStore: dataMemory});

                    grid = new DataGrid({
                        store: dataStore,
                        structure: gridStruc
                    },"gridDiv");

                    grid.startup();                                 

                    function formatterCb(value, rowIndex, rowItem)
                    {                               
                        var storeItems=[];
                        storeItems.push({name: "Test1", value: "test1"});
                        storeItems.push({name: "Test2", value: "test2"});

                        var store = new ItemFileReadStore({data: {identifier:"name", items: storeItems}});

                        var w = new ComboBox({
                            label: "Use Input",
                            store: store,
                            value: value
                        });
                        w._destroyOnRemove = true;
                        return w;
                    }
                });

Answer 1

我认为定义格式化程序函数可能会有所帮助。 看看文档中的this example

function formatCell(value){
    //perform your logic here
}

var layout = [
    {
        name: 'Cell1', 
        field: 'id'
    },
    {
        name: 'Cell2', 
        field: 'date',
        formatter: formatCell
    }
];

在你的情况下，它会在这里：

gridStruc.push({name: 'Name', formatter: formatCell, field: 'col1', width: '100px', editable: false});

我不知道你为什么使用array.push，但在这种情况下没关系。

还检查this tutorial，有一个如何将小部件放入单元格的示例。这可能会有所帮助。