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

2019独角兽企业重金招聘Python工程师标准>>>

上次关于的这个问题的处理一般是没有问题,但是如果对于重复调用datagrid的selectRow和clearSelections事件,会造成颜色的混乱,因为在每次调用onSelect函数的时候,都首先会调用 onUnselectAll函数,而且调用clearSelections方法的时候,也会调用onUnselectAll函数,后面花了些时间找到这个解决办法:

定义全局变量,用来存储当前被选中行,上次被选中和颜色的一个对象,该对象的key为行的ID值,value值为颜色的值

var selectRowIndexColor = {};//用来保存行的背景色(因为表格中可能有多个背景色)
var selectRowIndex = undefined;//保存当前正在选中的行的索引
var prevSelectRow = undefined;//用来保存上次被选中的行

datagrid的选中行事件:

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){
},

 

转载于:https://my.oschina.net/u/2331760/blog/811504