dojo：为数据表格添加复选框

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

一、添加复选框

此时应该选用EnhancedGrid，而不是普通的DataGrid。添加复选框需要设置EnhancedGrid的plugins属性，如下：

gridLayout =[{
defaultCell: { type: cells._Widget, styles: 'text-align: center;' },
cells: [
{ name: "WBS", field: "wbsCode", width: "60px"},
{ name:"配置名称",field:"configName",width:"80px"},
{ name:"设备名称", field: "equipName", width: "80px" },
{ name:"维修项目号", field: "mopNo", width: "100px" },
{ name:"维修项目名称", field: "mopName", width: "120px" },
{ name:"周期", field: "mlpCode", width: "60px" },
{ name:"计划时间", field: "planDate", width: "80px" }
]
}]; store=new Memory();
dataStore=new ObjectStore({objectStore : store});
grid = new EnhancedGrid({
structure: gridLayout,
store:dataStore,
"class": "grid",
escapeHTMLInData: false,
noDataMessage: "没有配置数据" ,
plugins: {indirectSelection: {headerSelector:true,width:"40px", styles:"text-align: center;"}}
}, "gridDiv"
);
grid.startup();

二、从服务器端读取复选框的设置

现在表格的数据从服务器端读取，同时希望能根据服务器端的数据设置复选框选取状态。

读取的JSON数据类似这样：

[{"wbsCode":"cf001","configName":"cf001","equipName":"cf001","mlpCode":"F","mopName":"CF001-M1","mopNo":"CF001-M2","id":"4028cfb74d98d365014d98d420c80002","isChecked":true,"planDate":"2015\/06\/06"},

{"wbsCode":"cf001","configName":"cf001","equipName":"cf001","mlpCode":"F","mopName":"MOP001-2","mopNo":"MOP001-2","id":"4028cfb74da06f0f014da0b2a4200002","isChecked":true,"planDate":"2015\/06\/06"},

{"wbsCode":"cf002","configName":"cf002","equipName":"cf002","mlpCode":"F","mopName":"MOP2-1的名字","mopNo":"MOP2-1","id":"4028cfb74da54d61014da54e21fd0002","isChecked":false,"planDate":"2015\/06\/06"},

{"wbsCode":"cf003","configName":"cf003","equipName":"cf003","mlpCode":"F","mopName":"MOP003-1","mopNo":"MOP003-1","id":"4028cfb74da7a9a8014da7abbdeb0002","isChecked":false,"planDate":"2015\/06\/06"},

{"wbsCode":"cf003","configName":"cf003","equipName":"cf003","mlpCode":"F","mopName":"MOP003-2","mopNo":"MOP003-2","id":"4028cfb74da7a9a8014da7abdd710005","isChecked":false,"planDate":"2015\/06\/06"},

{"wbsCode":"cf004","configName":"cf004","equipName":"cf004","mlpCode":"F","mopName":"mop004","mopNo":"mop004","id":"4028cfb74dae3f24014dae3f77cc0002","isChecked":false,"planDate":"2015\/06\/06"}]

希望可以通过isChecked来设置复选框状态。

网上有说直接设置EnhancedGrid的plugins的indirectSelection中的field属性，类似这样

grid = new EnhancedGrid({
structure: gridLayout,
store:dataStore,
"class": "grid",
escapeHTMLInData: false,
noDataMessage: "没有配置数据" ,
plugins: {indirectSelection: {headerSelector:true, field: "isChecked",width:"40px", styles:"text-align: center;"}}
}, "gridDiv"
);
grid.startup();

但并没有成功，不知道是哪里映射的不对。

最后采取的方法是采用grid.rowSelectCell.toggleRow方法。

request.get("yearPlanInputGetJsonAction.action?mode=query&yearPlanInput.isSaveView=no&yearPlanInput.yearPlanId="+yearPlanId,{handleAs : "json"})
.then(function(data)
{
store = new Memory({data : data });//id=miId
dataStore = new ObjectStore({objectStore : store});
grid.store = dataStore;
grid._refresh();
for(var rowIndex=0;rowIndex<store.data.length;rowIndex++){
grid.rowSelectCell.toggleRow(rowIndex, data[rowIndex].isChecked);
}
});