欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-07 17:06:54
...

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

 

相关标签: EasyUi datagrid