EasyUI中DataGrid取消选中后颜色恢复

项目中使用到了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 },
                    ]]
            });

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值