Dojo 1.7 datagrid 根据隐藏列中的文本更改行颜色

Question

我正在使用增强的 Grid 来显示消息。我定义的网格如下，

function loadgrid(str)
{
        require(['dojo/_base/lang', 'dojox/grid/EnhancedGrid', 'dojo/data/ItemFileWriteStore','dojox/grid/enhanced/plugins/Pagination', 'dojo/dom', 'dojo/domReady!'],
        function(lang, EnhancedGrid, ItemFileWriteStore, dom,Pagination)
        {
          var data = 
            {
                identifier: "id",
                items: []
            };
            var data_list =  JSON.parse(str);
             for(var i = 0, l = data_list.length; i < l; i++)
            {
                data.items.push(lang.mixin({ id: i+1 }, data_list[i]));
            }
        var store = new ItemFileWriteStore({data: data});
        if(!document.getElementById("grid"))
        {
             var layout = [[
                          {'name': 'S.No', 'field': 'id', 'width': '5%'},
                          {'name': 'MsgId', 'field': 'msgId', 'width': '1%'},
                          {'name': 'Status', 'field': 'status', 'width': '1%'},
                          {'name': 'Sender', 'field': 'sender', 'width': '15%'},
                          {'name': 'Receiver', 'field': 'rec', 'width': '15%'},
                          {'name': 'Message', 'field': 'msg', 'width': '35%'},
                          {'name': 'Time', 'field': 'time', 'width': '20%'},

                        ]];
            var grid = new dojox.grid.EnhancedGrid(
            {
                id: 'grid',
                store: store,
                structure: layout,
                rowSelector: '20px',
                plugins: {
                    pagination: {
                        pageSizes: ["5","10","25", "50", "100", "All"],
                        description: true,
                        sizeSwitch: true,
                        pageStepper: true,
                        gotoButton: true,
                                /*page step to be displayed*/
                        maxPageStep: 4,
                                /*position of the pagination bar*/
                        position: "bottom"
                    }
                  }         
            },document.createElement('div'));
            grid.layout.setColumnVisibility(1,false);
            grid.layout.setColumnVisibility(2,false);
            grid.placeAt("gridDiv");
            grid.startup();
        }
        else
        {
            var grid = dijit.registry.byId("grid");
            grid.setStore(store);
        }
     });

}

其中 str 是包含 JSON 对象的字符串。在此我想更改行的颜色以区分已读和未读消息。我怎样才能做到这一点？

Answer 1

终于解决了

function loadgrid(str)
{
        require(['dojo/_base/lang', 'dojox/grid/EnhancedGrid', 'dojo/data/ItemFileWriteStore','dojox/grid/enhanced/plugins/Pagination', 'dojo/dom', 'dojo/domReady!'],
        function(lang, EnhancedGrid, ItemFileWriteStore, dom,Pagination)
        {
          var data = 
            {
                identifier: "id",
                items: []
            };
            var data_list =  JSON.parse(str);
             for(var i = 0, l = data_list.length; i < l; i++)
            {
                data.items.push(lang.mixin({ id: i+1 }, data_list[i]));
            }
        var store = new ItemFileWriteStore({data: data});
        if(!document.getElementById("grid"))
        {
             var layout = [[
                          {'name': 'S.No', 'field': 'id', 'width': '5%'},
                          {'name': 'MsgId', 'field': 'msgId', 'width': '1%'},
                          {'name': 'Status', 'field': 'status', 'width': '1%'},
                          {'name': 'Sender', 'field': 'sender', 'width': '15%'},
                          {'name': 'Receiver', 'field': 'rec', 'width': '15%'},
                          {'name': 'Message', 'field': 'msg', 'width': '35%'},
                          {'name': 'Time', 'field': 'time', 'width': '20%'},

                        ]];
            var grid = new dojox.grid.EnhancedGrid(
            {
                id: 'grid',
                store: store,
                structure: layout,
                rowSelector: '20px',
                plugins: {
                    pagination: {
                        pageSizes: ["5","10","25", "50", "100", "All"],
                        description: true,
                        sizeSwitch: true,
                        pageStepper: true,
                        gotoButton: true,
                                /*page step to be displayed*/
                        maxPageStep: 4,
                                /*position of the pagination bar*/
                        position: "bottom"
                    }
                  }         
            },document.createElement('div'));
            grid.layout.setColumnVisibility(1,false);
            grid.layout.setColumnVisibility(2,false);
            grid.placeAt("gridDiv");
            grid.startup();
        }
        else
        {
            var grid = dijit.registry.byId("grid");
            grid.setStore(store);
        }
     });
        **dojo.connect(dijit.byId("grid"), 'onStyleRow', this, function (row) 
        {
            var grid = dijit.byId("grid");
            var item = grid.getItem(row.index);
            if(item)
            {
            var type = grid.store.getValue(item, "status", null);
            if(type == "UNREAD")
            {
                row.customStyles += "background-color:blue;";
            }
            }
                grid.focus.styleRow(row);
                grid.edit.styleRow(row);
        });**
}