3
我有以下示例代碼（可以cut'n'paste，如果你想）：你如何設計一個dojox.grid.DataGrid行？
<!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()">
<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>
的onStyleRow當我點擊一排只有被炒魷魚。有什麼辦法可以根據他們的內容有一個按鈕格式的行嗎？可以通過在創建時將類分配給行，然後更改類值或在行中循環，並根據其內容直接更改每個元素的style元素。
編輯
我也曾嘗試以編程方式創建的網格。雖然這種方式創建時它會在創建時觸發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()">
<button dojoType="dijit.form.Button" onclick="resetFilter()">Clear</button><br><br>
<div id="gridDiv"></div>
</body>
</html>
方法1（在創建網格時沒有格式化，漂亮的高亮） 
方法2（網格格式創建時，沒有行突出顯示） 
以上所有建議使用'dojo.connect'（我在上面使用）。唯一的問題是它不會在第一次繪製網格時觸發函數。它僅在鼠標懸停在各行上時才運行，或者在單擊列標題時（即重繪時）更改排序順序。有什麼辦法可以在頁面第一次加載時觸發這個函數 – Sevenearths
您是否曾嘗試在onStyleRow中添加alert（）或console.log（）方法。上次我嘗試過，它甚至在初始渲染過程中被觸發。 – Sandeep
參考我的回答。原來，這是我在啓動腳本中放置'dojo.connect'的地方 – Sevenearths