Gridx显示控件代码
HTML
<!DOCTYPE html>
<html>
<head>
<title>Widget in Grid Cell Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<style type="text/css">
.gridx {
width: 1000px;
height: 420px;
}
</style>
<link rel='stylesheet' href="dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="gridx/resources/claro/Gridx.css" />
<script type="text/javascript" src="dojo/dojo.js" data-dojo-config="async: true"></script>
</head>
<body class='claro'>
<div id="gridContainerPost"></div>
</body>
</html>
Script脚本
<script type="text/javascript">
require(['dojo/store/Memory',
'gridx/Grid',
'gridx/core/model/cache/Sync',
'dijit/form/CheckBox',
'gridx/modules/CellWidget'], function(Store,Grid,Cache,CheckBox,CellWidget) {
var store,gridPost;
store = new Store({data: [{ SelPost: true, ID: "admin", Name: "ssss"}] });
console.log('new Store');
gridPost = new Grid({
cacheClass: Cache,
store: store,
structure:
[
{ field: "SelPost", name: "选中", width: "56px", widgetsInCell: true,decorator: function () {
return '<span data-dojo-type="dijit.form.CheckBox" data-dojo-attach-point="cb"></span>';
},setCellValue: function (data) {
this.cb.set('value', data);
}
},
{ field: "ID", name: "岗位编号" },
{ field: "Name", name: "岗位名称" }
],
modules:
[
CellWidget
],
autoHeight: true,
pageSize: 110
});
console.log('new Grid');
gridPost.placeAt("gridContainerPost");
gridPost.startup();
});
</script>
显示问题
不能显示CheckBox,代码调试发现row.id 是null所以不能正常显示。在CellWidget.js文件中的_showDijits函数
经过多种方法实验发现使用Cache好用。但是tests文件夹下的test_grid_cellwidget也是Memory好用。
最后调试发现：dojo/store/Memory唯一关键字的字段名没有指定，因此造成row.id为null
store = new Store({data: [{ SelPost: true, ID: "admin", Name: "ssss"}] });
修改如下
store = new Store({ idProperty:"ID", data: [{ SelPost: true, ID: "admin", Name: "ssss"}] }); //测试ok！
使用Dojo或者Gridx的最大考验就是耐心、仔细。往往他的例子都不能正常运行，必须更改！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
