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(); 

View Code

 

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

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

读取的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(); 

View Code

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

最后采取的方法是采用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);

                                        }

                                 });

View Code