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

Question

I have the following example code (you can cut'n'paste it if you want): 我有以下示例代码（如果你愿意，你可以切断它'）

<!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" />

<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","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");
        grid.setStore(dataStore);

        dojo.connect(dijit.byId("theGrid"), 'onStyleRow', this, function (row) {
            var theGrid = dijit.byId("theGrid")
            var item = theGrid.getItem(row.index);
            if(item){
                var type = dataStore.getValue(item, "band", null);
                if(type == "Rothwell Temperance"){
                    row.customStyles += "color:red;";
                }
            }
            theGrid.focus.styleRow(row);
            theGrid.edit.styleRow(row);
        });
    }
var plugins = {
    filter: {
        itemsName: 'songs',
    closeFilterbarButton: true,
    ruleCount: 8
        }
};
    dojo.ready(init);
    function filterGrid() {
        dijit.byId("theGrid").filter({band: dijit.byId('filterText').get('value')+'*'});
        console.log(dijit.byId('filterText').get('value')+'*');
    }
    function resetFilter() {
        dijit.byId("theGrid").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>
<table dojoType="dojox.grid.DataGrid" id="theGrid" autoHeight="auto" autoWidth="auto" plugins="plugins">
    <thead>
        <tr>
            <th field="position" width="200px">Position</th>
            <th field="band" width="200px">Band</th>
            <th field="conductor" width="200px">Conductor</th>
        </tr>
    </thead>
</table>
</body>
</html>

The onStyleRow only gets fired when I click a row. 单击一行时，只会触发onStyleRow 。 Is there any way to have a button format rows based on their content? 有没有办法让按钮格式化行根据其内容？ Either by having classes assigned to rows at creation time and then change the class values or loop through the rows and directly changing the style element of each based on it's contents. 通过在创建时将类分配给行，然后更改类值或循环遍历行，并根据其内容直接更改每个行的style元素。

EDIT 编辑

I have also tried creating the grid programmatically. 我也试过以编程方式创建网格。 While when created this way it does fire the onStyleRow at creation time it does not provide the same level of hightlighting the other method does. 虽然以这种方式创建时它会在创建时触发onStyleRow ，但它不会提供与其他方法相同的高亮度级别。

<!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>

Method 1 (doesn't format when grid is created, nice highlighting) 方法1 （创建网格时不格式化，突出显示）在此输入图像描述

Method 2 (formats when grid created, no row highlighting) 方法2 （创建网格时的格式，没有行突出显示）在此输入图像描述

Answer 1

A simple re-ordering of the init() function makes sure the onStyleRow function is bound before the data is added to the grid works. 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);
}

Answer 2

Have you tried any of the following: 您是否尝试过以下任何一种方法：

Style Dojox Grid Row depending on data 样式Dojox网格行取决于数据

dojox DataGrid onStyleRow works first time, then not again dojox DataGrid onStyleRow第一次工作，然后不再工作

dojox.grid.DataGrid - onStyleRow needs update? dojox.grid.DataGrid - onStyleRow需要更新吗？ (dojo 1.2.0) （道场1.2.0）

You can also use Firebug to see if rows are getting assigned an ID and then change background of each row using onStyleRow. 您还可以使用Firebug查看是否为行分配了ID，然后使用onStyleRow更改每行的背景。

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

问题描述

2 个解决方案

解决方案1
4 已采纳 2012-10-15 14:31:07

解决方案2
2 2012-10-13 09:26:59

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

问题描述

2 个解决方案

解决方案1 4 已采纳 2012-10-15 14:31:07

解决方案2 2 2012-10-13 09:26:59

解决方案1
4 已采纳 2012-10-15 14:31:07

解决方案2
2 2012-10-13 09:26:59