[经典] easyui的datagrid的设置背景色之后,行默认的选中的背景色改变事件无效

2 篇文章 0 订阅
2 篇文章 0 订阅
本文介绍了后端开发者在项目中遇到的一个挑战,即如何实现数据表格行的高亮显示。通过创建特定CSS类并结合Datagrid的rowStyler与onSelect事件,实现了当某行被选中时,其他非选中行变色的效果。通过改变思路,原本复杂的问题变得简单易解,代码示例可供参考。
摘要由CSDN通过智能技术生成

在这次做项目中,就此问题,花费了我大半天时间,一度差点放弃,但作为后端开发人员,遇到难题怎能不攻克?贴出代码以供大家参考

先来一个style

<style>
    .redClass {
        background-color: pink;
        color: blue;
        font-weight: bold;
    }
</style>

然后我们来一个全局数据

 var rowIndexArr = [];

然后我们在datagrid 的rowStyler中这么写

rowStyler: function (index, row) {
                if (row.xxx != "是") {
                    //return 'background-color:pink;color:blue;font-weight:bold;';
                    return {class: 'redClass'}
                } else {
                    rowIndexArr.push(index);
                }
            },

然后在datagrid的onSelect中这么写

onSelect: function (index, row) {
                var opt = $(this).datagrid("options");
                var rows1 = opt.finder.getTr(this, "", "allbody", 1);
                var rows2 = opt.finder.getTr(this, "", "allbody", 2);
                if (rows1.length > 0) {
                    $(rows1).each(function () {
                        var tempIndex = parseInt($(this).attr("datagrid-row-index"));
                        if (tempIndex == index) {
                            $(this).removeClass("redClass");
                        } else {
                            var findIndex = $.inArray(tempIndex, rowIndexArr);
                            if (findIndex == -1) {
                                $(this).addClass("redClass");
                            }
                        }
                    });
                }
                if (rows2.length > 0) {
                    $(rows2).each(function () {
                        var tempIndex = parseInt($(this).attr("datagrid-row-index"));
                        if (tempIndex == index) {
                            $(this).removeClass("redClass");
                        } else {
                            var findIndex = $.inArray(tempIndex, rowIndexArr);
                            if (findIndex == -1) {
                                $(this).addClass("redClass");
                            }
                        }
                    });
                }

            }

然后就搞定啦,改变思路,其实一切就会变得很简单

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值