Javascript 如何设置dojox.grid.DataGrid行的样式？_Javascript_Dojo

Javascript 如何设置dojox.grid.DataGrid行的样式？

javascript dojo

Javascript 如何设置dojox.grid.DataGrid行的样式？,javascript,dojo,Javascript,Dojo,我有以下示例代码（如果需要，可以剪切粘贴）：方法1（创建网格时不格式化，高亮显示效果很好）方法2（创建网格时的格式，无行高亮显示）您是否尝试过以下任何一种方法：您还可以使用Firebug查看行是否分配了ID，然后使用onStyleRow更改每行的背景。对init（）函数进行简单的重新排序，确保在将数据添加到网格之前绑定onStyleRow函数 function init() { var lData = { items: [ {

我有以下示例代码（如果需要，可以剪切粘贴）：

方法1（创建网格时不格式化，高亮显示效果很好）

方法2（创建网格时的格式，无行高亮显示）

您是否尝试过以下任何一种方法：

您还可以使用Firebug查看行是否分配了ID，然后使用onStyleRow更改每行的背景。

对

init（）

函数进行简单的重新排序，确保在将数据添加到网格之前绑定

onStyleRow

函数

function init() {
    var lData = {
        items: [
               {"position":"1","band":"Black Dyke","conductor":"Nick Childs"},
               {"position":"2","band":"Carlton Main","conductor":"Philip McCann"},
               {"position":"3","band":"Grimethorpe","conductor": "Allan Withington"},
               {"position":"4","band":"Brighouse and Rastrick","conductor": "David King"},
               {"position":"5","band":"Rothwell Temperance","conductor":"David Roberts"},
        ],
        identifier: "position"      
    };
    var dataStore = new dojo.data.ItemFileReadStore({data:lData});
    var grid = dijit.byId("theGrid");
    dojo.connect(grid, 'onStyleRow', this, function (row) {
        var item = grid.getItem(row.index);
        if(item){
            var type = dataStore.getValue(item, "band", null);
            if(type == "Rothwell Temperance"){
                row.customStyles += "color:red;";
                //row.customClasses += " dismissed";
            }
        }
        //theGrid.focus.styleRow(row);
        //theGrid.edit.styleRow(row);
    });
    grid.setStore(dataStore);
}

以上所有内容都建议使用

dojo.connect

（我在上面使用）。唯一的问题是它在第一次绘制网格时没有触发函数。仅当鼠标悬停在不同的行上时，或当单击列标题时更改排序顺序时，即当它重新绘制时，它才会运行。当页面第一次加载时，是否有任何方法可以启动此函数？如果您试图以这种方式在onStyleRow中添加一个alert（）或console.log（）。上次我尝试时，它甚至在初始渲染时被触发。请参阅我的答案。结果是我在启动脚本中放置了

dojo.connect

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" 
        djConfig="parseOnLoad:true"></script>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" />
<style>
#grid {
    height: 20em;
}
</style>
<script>dojoConfig = {async: true, parseOnLoad: false}</script>
<script>
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.form.Button");
    function init() {
        var lData = {
            items: [
                   {"position":"1","music":"Opera","band":"Black Dyke","conductor":"Nick Childs"},
                   {"position":"2","music":"Opera","band":"Carlton Main","conductor":"Philip McCann"},
                   {"position":"3","music":"Classical","band":"Grimethorpe","conductor": "Allan Withington"},
                   {"position":"4","music":"Classical","band":"Brighouse and Rastrick","conductor": "David King"},
                   {"position":"5","music":"Opera","band":"Rothwell Temperance","conductor":"David Roberts"},
            ],
            identifier: "position"      
        };
        var dataStore = new dojo.data.ItemFileReadStore({data:lData});
        var layout = [[
            {'name':'Position','field':'position','width':'50px'},
            {'name':'Music Type','field':'music','width':'150px'},
            {'name':'Band','field':'band','width':'200px'},
            {'name':'Conductor','field':'conductor','width':'200px'}
        ]];
        var grid = new dojox.grid.DataGrid({
            id: 'grid',
            store: dataStore,
            structure: layout,
            rowSelector: false,
            selectionMode: 'extended',
            onStyleRow: function(row) {
                var item = this.getItem(row.index);
                if(item){
                    var type = this.store.getValue(item, "band", null);
                    if(type == "Rothwell Temperance"){
                        row.customStyles += "color:red;";
                    }
                }
            }
        });
        grid.placeAt("gridDiv");
        grid.startup();
    }
    var plugins = {
        filter: {
            itemsName: 'songs',
            closeFilterbarButton: true,
            ruleCount: 8
        }
    };
    dojo.ready(init);
    function filterGrid() {
        dijit.byId("grid").filter({band: dijit.byId('filterText').get('value')+'*'});
        console.log(dijit.byId('filterText').get('value')+'*');
    }
    function resetFilter() {
        dijit.byId("grid").filter({band: '*'});
        dijit.byId('filterText').set('value','');
    }
</script>
</head>
<body class="claro">
<input dojoType="dijit.form.TextBox" id="filterText" type="text" onkeyup="filterGrid()">&nbsp;&nbsp;&nbsp;
<button dojoType="dijit.form.Button" onclick="resetFilter()">Clear</button><br><br>
<div id="gridDiv"></div>
</body>
</html>

function init() {
    var lData = {
        items: [
               {"position":"1","band":"Black Dyke","conductor":"Nick Childs"},
               {"position":"2","band":"Carlton Main","conductor":"Philip McCann"},
               {"position":"3","band":"Grimethorpe","conductor": "Allan Withington"},
               {"position":"4","band":"Brighouse and Rastrick","conductor": "David King"},
               {"position":"5","band":"Rothwell Temperance","conductor":"David Roberts"},
        ],
        identifier: "position"      
    };
    var dataStore = new dojo.data.ItemFileReadStore({data:lData});
    var grid = dijit.byId("theGrid");
    dojo.connect(grid, 'onStyleRow', this, function (row) {
        var item = grid.getItem(row.index);
        if(item){
            var type = dataStore.getValue(item, "band", null);
            if(type == "Rothwell Temperance"){
                row.customStyles += "color:red;";
                //row.customClasses += " dismissed";
            }
        }
        //theGrid.focus.styleRow(row);
        //theGrid.edit.styleRow(row);
    });
    grid.setStore(dataStore);
}