我想使用dojo工具更改每个单元格的数据网格背景颜色,但我正在尝试一些事情,但找不到正确的解决方案。
以下代码用于创建数据网格
var myStore, dataStore, grid;
require([
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/store/Cache",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore",
"dojo/query",
"dijit/form/Button",
"dojo/domReady!"
], function (JsonRest, Memory, Cache, DataGrid, ObjectStore, query) {
myStore = Cache(JsonRest({ target: "/Blog/Action/", idProperty: "Id" }), Memory({ idProperty: "Id" }));
grid = new DataGrid({
store: dataStore = ObjectStore({ objectStore: myStore }),
// items:dataStore.items,
structure: [
{ name: "Blog Id", field: "Id", width: "50px", },
{ name: "Name", field: "Name", width: "200px",classes:"Name" },
{ name: "Phone Number", field: "Phone Number", width: "200px",classes:"test" }
]
}, "grid"); // make sure you have a target HTML element with this id
grid.startup();
dojo.query("body").addClass("claro");
grid.canSort = function () { return false };
});
下面的代码试图根据所选值的索引更改颜色,但什么都没有发生,我的意思是没有错误,但它根本没有进入脚本。
<script type="text/javascript" src="dojo/dojo.js" data-dojo-config="parseOnLoad: true">
dojo.connect(grid, 'onStyleRow', this, function (row) {
var item = grid.getItem(row.index);
if (row.index == 0) {
row.customClasses = "highlightRow";
row.customStyles += 'background-color:#FFB93F;';
}
});
</script>
<script>
标记中的代码(带有"src")永远不会运行。请参阅dojo/_base文档,了解如何通过AMD方式引入连接模块
这应该工作
<script type="text/javascript" src="dojo/dojo.js" data-dojo-config="async:true, parseOnLoad: true"></script>
与网格挂钩
<script type="text/javascript">
require(["dojo/_base/connect"], function(connect) {
connect.connect(grid, 'onStyleRow', this, function (row) {
var item = grid.getItem(row.index);
if (row.index == 0) {
row.customClasses = "highlightRow";
row.customStyles += 'background-color:#FFB93F;';
}
});
});
</script>
如果您通过标记声明网格,可以使用以下模式:
<div data-dojo-type="dojox.grid.DataGrid" data-dojo-props="???">
<script type="dojo/method" event="onStyleRow" args="row">
var item = grid.getItem(row.index);
if (row.index == 0) {
row.customClasses = "highlightRow";
row.customStyles += 'background-color:#FFB93F;';
} else {
this.inherited(arguments);
}
</script>
</div>