Question

我有一个以编程方式填充的Dojo-DataGrid，如下所示：

var jsonStore = new dojo.data.ItemFileWriteStore({ url: "json/gaskets.json" });
var layout= [
                { field: "description", width: "auto", name: "Tier/Description", editable:true },
                { field: "billingMethod", width: "auto", name: "Billing Method", editable: true,
                    type: dojox.grid.cells.Select, options: [ '0', '1' ]  },
                { field: "offeringComponents", width: "auto", name: "Offering Component", editable: true,
                    type: dojox.grid.cells.Select, options: [ '0', '1' ] },
                { field: "serviceActivity", width: "auto", name: "Service Activity", editable: true,
                    type: dojox.grid.cells.Select, options: [ '0', '1' ] },
                { field: "hours", width: "auto", name: "Hours" },
                { field: "rate", width: "auto", name: "Rate <br/> (EUR)" },
                { field: "cost", width: "auto", name: "Cost <br/> (EUR)" },
                { field: "price", width: "auto", name: "Price <br/> (EUR)" },
                { field: "gvn", width: "auto", name: "Gvn" }
            ];

            grid = new dojox.grid.DataGrid({
                query: { description: '*' },
                store: jsonStore,
                structure: layout,
                rowsPerPage: 20
            }, 'gridNode');

字段billingMethod（目前定义为dojox.grid.cells.Select）的选项现在是硬编码的，但我想从后端动态获取这些值作为JSON。但是dojox.grid.cells.Select当前（我正在使用Dojo 1.5）没有选项来定义＆＃34; store＆＃34;。

我正在尝试使用dijit.form.FilteringSelect，但这需要一个id（一个Div）的构造函数，我不能指定一个，因为这个选择框必须在网格中，而不是单独的DIV。

由于和Sandeep

Answer 1

你的答案很好，问题是在组合中用户可以选择A，但是一旦组合失去焦点，将显示值1。几个月前我遇到了同样的问题，我在#dojo上得到了KGF的解决方案。我们的想法是在单元格上创建一个只创建SPAN元素的格式化程序，然后在存储上调用查询以获取所选元素的标签并将其放在SPAN上。我修改了你的例子以使其正常工作。

dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.cells.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dijit.form.Select");

dojo.require('dojox.grid.cells.dijit');
dojo.require('dijit.form.FilteringSelect');

var grid;
var jsonStore;

dojo.addOnLoad(function() {

    jsonStore = new dojo.data.ItemFileWriteStore({
        data: {
            "identifier": "identify",
            "label": "description",
            "items": [
                {
                "identify": 123,
                "description": "Project Manager"},
            {
                "identify": 234,
                "description": "Developer"},
            {
                "identify": 536,
                "description": "Developer",
                "billingMethod":2}
            ]
        }
    });

    var myStore = new dojo.data.ItemFileReadStore({
        data: {
            identifier: 'value',
            label: 'name',
            items: [{
                value: 1,
                name: 'A',
                label: 'A'},
            {
                value: 2,
                name: 'B',
                label: 'B'},
            {
                value: 3,
                name: 'C',
                label: 'C'}]
        }
    });

      //[kgf] callback referenced by formatter for FilteringSelect cell
      function displayValue(nodeId, store, attr, item) {
        if (item != null) { //if it's null, it wasn't found!
          dojo.byId(nodeId).innerHTML = store.getValue(item, attr);
        }
      }

    var layout = [
        {
        field: "identify",
        width: "auto",
        name: "Id 2 Hide",
        hidden: true},
    {
        field: "description",
        width: "auto",
        name: "Tier/Description",
        editable: true},
    {
        field: 'billingMethod',
        name: 'Billing Method',
        editable: true,
        required: true,
        width: '150px',
        type: dojox.grid.cells._Widget,
        widgetClass: dijit.form.FilteringSelect,
        widgetProps: {
            store: myStore
        },
        formatter: function(data, rowIndex) { //[kgf]
            //alert("data "+data)
                var genId = 'title' + rowIndex;
            var store = this.widgetProps.store;
            var attr = "label";

            setTimeout(function() {
                store.fetchItemByIdentity({
                    identity: data,
                    onItem: dojo.partial(displayValue, genId, store, attr)
                });
                }, 50);
            //for now return a span with a predetermined id for us to populate.
            return '<span id="' + genId + '"></span>';
        }    
    }
    ];

    grid = new dojox.grid.DataGrid({
        query: {
            description: '*'
        },
        store: jsonStore,
        singleClickEdit: true,
        structure: layout,
        rowsPerPage: 20
    }, 'gridNode');

    grid.startup();

});

Answer 2

我终于能够解决这个问题。想要使用DOJO Datagrid + FilteringSelect来实现相同类型的东西。

Sample Code

dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.cells.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dijit.form.Select");

dojo.require('dojox.grid.cells.dijit');
dojo.require('dijit.form.FilteringSelect');

var grid;
var jsonStore;

dojo.addOnLoad(function() {

    jsonStore = new dojo.data.ItemFileWriteStore({
        data: {
            "identifier": "identify",
            "label": "description",
            "items": [
                {
                "identify": 123,
                "description": "Project Manager"},
            {
                "identify": 234,
                "description": "Developer"},
            {
                "identify": 536,
                "description": "Developer"}
            ]
        }
    });

    var myStore = new dojo.data.ItemFileReadStore({
        data: {
            identifier: 'value',
            label: 'name',
            items: [{
                value: 1,
                name: 'A',
                label: 'A'},
            {
                value: 2,
                name: 'B',
                label: 'Y'},
            {
                value: 3,
                name: 'C',
                label: 'C'}]
        }
    });


    var layout = [
        {
        field: "identify",
        width: "auto",
        name: "Id 2 Hide",
        hidden: true},
    {
        field: "description",
        width: "auto",
        name: "Tier/Description",
        editable: true},
    {
        field: 'billingMethod',
        name: 'Billing Method',
        editable: true,
        required: true,
        width: '150px',
        type: dojox.grid.cells._Widget,
        widgetClass: dijit.form.FilteringSelect,
        widgetProps: {
            store: myStore
        }}
    ];

    grid = new dojox.grid.DataGrid({
        query: {
            description: '*'
        },
        store: jsonStore,
        singleClickEdit: true,
        structure: layout,
        rowsPerPage: 20
    }, 'gridNode');

    grid.startup();

});

Dojo-DataGrid ::如何动态获取值作为Dojo DataGrid中选择框的选项

2 个答案: