我有以下示例代码(如果你愿意,你可以切断它’)
<!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.有没有办法让按钮格式化行根据其内容?通过在创建时将类分配给行,然后更改类值或循环遍历行,并根据其内容直接更改每个行的样式元素.
编辑
我也试过以编程方式创建网格.虽然以这种方式创建时它会在创建时触发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(创建网格时的格式,没有行突出显示)
解决方法:
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);
}
原文地址:https://codeday.me/bug/20190826/1726198.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。