easyui的datagrid的设置背景色以后,行默认的选中的背景色无效的修正

上次关于的这个问题的处理通常是没有问题,可是若是对于重复调用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){
},
相关文章
相关标签/搜索