项目中使用到了EasyUI的datagrid中,需要根据各种条件将datagrid中的行改变成不同的颜色。我们鼠标选中后颜色会变调,但是如果取消选中又会恢复到EasyUI默认的datagrid未选中的颜色,那怎么样才能让取消选中恢复到之前根据条件设置的颜色呢。那就需要在选中前把颜色记录下来,然后取消选中后再恢复颜色。
下面就是实现代码,当加载成功后就会执行onLoadSuccess中方法,将符合条件的行进行颜色变化,同时将每行的颜色都记录下来。当选中时则执行onSelect中方法,将颜色改为选中的颜色。取消选中后执行onUnselectAll中方法又将刚才记录下来的颜色恢复
var selectRowIndex = undefined;//保存被选中的行的索引
var selectRowIndexColor = {};//用来保存行的背景色(因为表格中可能有多个背景色)
$("#td").datagrid({
//url:'',
url: '@Url.Action("ListProjectJson")',
fitColumns: true,
fit: true,
rownumber: true,
pagination: true,
singleSelect: true,
pageSize: 30,
sortName: 'doc_id',
sortOrder:'desc',
toolbar: "#toolbar",
onLoadSuccess: function (data) {
var rows = $("#td").datagrid('getRows');
//记录下每行的颜色 用于之后取消选中后恢复
for (var i = 0; i < rows.length; i++) {
var color = $("#datagrid-row-r1-2-" + i).css("background-color");
selectRowIndexColor[i] = color;
}
},
onBeforeSelect: function (rowIndex, rowData) {
},
//当行被选中的时候主动改变背景色和字体颜色
onSelect: function (rowIndex, rowData) {
$("#datagrid-row-r1-2-" + rowIndex).css("background-color", "#0081c2").css("color", "black");
},
//当行被取消选择的时候主动的改变背景色和字体颜色
onUnselectAll: function (rows) {
for (var i = 0;i<rows.length;i++)
{
$("#datagrid-row-r1-2-" + i).css("background-color", selectRowIndexColor[i]).css("color", "black");
}
},
rowStyler: function (index, row) {
//Modify Sammy 修改未派工且软件和设计有未结案显示颜色
if ( row.jastatus != "Y") {
return 'background-color:#ffff00;color:#fff;font-weight:bold;';
}
},
columns:
[[
{ title: '合同编号', field: 'contractid', width: 50 },
{ title: '区', field: 'needarea', width: 50 },
{ title: '部门', field: 'needdep', width: 50 },
{ title: '需求人', field: 'needer', width: 25 },
{ title: '专案名称', field: 'pmname', width: 50 },
{ title: '专案内容', field: 'pmcontent', width: 100 },
{ title: '备注', field: 'pmremark', width: 50 },
//{ title: 'OPT名称', field: 'kindsid', width: 100 },
{ title: '预计开始', field: 'startdate',formatter:FormatDateTime, width: 50 },
{ title: '预计结束', field: 'enddate', formatter: FormatDateTime, width: 50 },
//{ title: '专案进度', field: 'kindsid', width: 25 },
{ title: '类型', field: 'pmkinds',formatter:Format, width: 25,hidden:true },
{ title: '会办', field: 'pmtype', width: 25,hidden:true },
//{ title: '状态', field: 'pmstatus', width: 50 },
{ title: '软体', field: 'sstatus',formatter:Formata, width: 25 },
{ title: '结案时间', field: 'sfdate', formatter: FormatDateTime, width: 50 },
{ title: '设计', field: 'dstatus', formatter: Formata, width: 25 },
{ title: '结案时间', field: 'dfdate', formatter: FormatDateTime, width: 50 },
{ title: '派工', field: 'pgname', width: 50 },
{ title: '专案编号', field: 'doc_id', width: 50 },
]]
});