项目中遇到跨页选择(项目使用easyui):有多页数据,在当前页面选择后,下一页继续选择,返回之前页面时,仍然能记住之前选中的行。最后对多页选中的数据统一提交。
翻看easyui文档,官方并没有提供相应方法,easyui当前最新版本1.3.2也没有找到,最后使用了一个比较传统的方式,各位看官如果有更好的方式,劳烦告知,感激不尽。
声明全局数组变量
1 var ids = new Array();
使用easyui datagrid的四个方法处理
1 onSelect:function(index,row){ 2 addItem(row.assetsId); 3 }, 4 onUnselect:function(index,row){ 5 removeItem(row.assetsId) 6 }, 7 onSelectAll:function(rows){ 8 addAll(rows); 9 }, 10 onUnselectAll:function(rows){ 11 removeAll(rows); 12 },
对应处理函数
1 //add onSelect 2 function addItem(assetsId){ 3 var arrs = ids.join(); 4 console.info("arrs="+arrs); 5 if(arrs.indexOf(assetsId) == -1){ 6 ids.push(assetsId); 7 } 8 console.info("ids="+ids); 9 } 10 11 //add current page 12 function addAll(rows){ 13 for(var i=0; i<rows.length; i++){ 14 var arrs = ids.join(); 15 if(arrs.indexOf(rows[i].assetsId) == -1){ 16 ids.push(rows[i].assetsId); 17 } 18 } 19 console.info("addAll-ids="+ids); 20 } 21 22 //remove unSelect 23 function removeItem(assetsId){ 24 var arrs = ids.join(); 25 console.info("arrs="+arrs); 26 var indexTmp = arrs.indexOf(assetsId); 27 console.info("index="+indexTmp); 28 if(indexTmp != -1){ 29 for(var i=0; i<ids.length; i++){ 30 if(ids[i] == assetsId){ 31 ids.splice(i,1); 32 } 33 } 34 } 35 console.info("ids="+ids); 36 } 37 38 39 //remove current page 40 function removeAll(rows){ 41 for(var i=0; i<rows.length; i++){ 42 var arrs = ids.join(); 43 var indexTmp = arrs.indexOf(rows[i].assetsId); 44 if(indexTmp != -1){ 45 for(var j=0; j<ids.length; j++){ 46 if(ids[j] == rows[i].assetsId){ 47 ids.splice(j,1); 48 } 49 } 50 } 51 } 52 console.info("removeAll-ids="+ids); 53 }
返回之前页面后,显示已经选中的数据
1 onLoadSuccess: function(){ 2 if(!ids){ 3 return; 4 } 5 var myrows = $('#assetsTable').datagrid('getRows'); 6 for(var i=0; i<myrows.length; i++){ 7 for(var j=0; j<ids.length; j++){ 8 if(myrows[i].assetsId == ids[j]){ 9 var index = $('#assetsTable').datagrid('getRowIndex',myrows[i]); 10 $('#assetsTable').datagrid('selectRow',index); 11 } 12 } 13 } 14 },
数据提交时,直接提交ids即可,无需调用 datagrid 的 getSelections 方法,就算调用获取的数据也不完整。