上次关于的这个问题的处理通常是没有问题,可是若是对于重复调用datagrid的selectRow和clearSelections事件,会形成颜色的混乱,由于在每次调用onSelect函数的时候,都首先会调用 onUnselectAll函数,并且调用clearSelections方法的时候,也会调用onUnselectAll函数,后面花了些时间找到这个解决办法:css
定义全局变量,用来存储当前被选中行,上次被选中和颜色的一个对象,该对象的key为行的ID值,value值为颜色的值函数
var selectRowIndexColor = {};//用来保存行的背景色(由于表格中可能有多个背景色) var selectRowIndex = undefined;//保存当前正在选中的行的索引 var prevSelectRow = undefined;//用来保存上次被选中的行
datagrid的选中行事件:code
onSelect:function(rowData){ if(rowData){ var rowIndex = rowData.id;//这里使用的是treegrid,treegrid和datagrid的不一样只是用id值替换了datagrid的索引index selectRowIndex = rowIndex; //获取被选中行的背景色(等下取消选择的时候须要还原为这个背景色,因此这里先记录下来),在treegrid中使用rowData.id代替了rowIndex的做用 var color = $("#datagrid-row-r1-2-"+rowIndex).css("background-color"); //datagrid的行选中默认颜色rgb(255, 228, 141) if(color != 'rgb(255, 228, 141)'){ //若是设置了自定义背景色,才须要改变(若是没有设置自定义背景色,datagrid会使用默认的选中行的背景色) selectRowIndexColor[selectRowIndex] = color; // $("#datagrid-row-r1-1-"+rowIndex).css("background-color","#FFE48D").css("color","black");//背景改成选中 $("#datagrid-row-r1-2-"+rowIndex).css("background-color","#FFE48D").css("color","black");//背景改成选中 }; //若是上次被选中的行存在,并且上次被选中的行不是当前被选中的行(针对非鼠标单击,而调用的select选中行事件) if(prevSelectRow && prevSelectRow.id != selectRowIndex){ var color = selectRowIndexColor[prevSelectRow.id]; if(color){ //若是设置了自定义背景色,才须要恢复原来的自定义背景色 // $("#datagrid-row-r1-1-"+selectRowIndex).css("background-color",color).css("color","black");//背景恢复原来颜色 $("#datagrid-row-r1-2-"+prevSelectRow.id).css("background-color",color).css("color","black");//背景恢复原来颜色 }; }; prevSelectRow = rowData; }; },
而对于原来的onUnselectAll函数,则什么都不须要作:对象
onUnselectAll:function(rows){ },