9.19 列表特殊行标红

这个版本我做的模块有个需求,点击延期还款客户复选框后,将列表中延期还款超过当前日期的一行标红。

没做之前我觉得排序和标红很难,所以一直没有做,往后压,现在排序已经做好啦,花了大半天,然后来做标红。

之前我设想选中复选框后,可能用到刷新列表函数tableUpdate(),甚至想过用到filter的render函数。所以有点慌。

开始做之后,突然想到,选中复选框后,直接找出超时的td,然后将它的父节点tr一整行color改为红色就好了呀!

在网上看了下遍历td的代码,然后就开始写了。

基本思路是:取 table 的 tbody 的所有 tr, 存到 trList , 遍历 trList, 找到第 i 个 tr 的后代 td 元素,

  取出其中指定列的 td ,取其值,判断改值是否超时,若超时则给当前 tr 设置css样式 (color,red) ,

  当取消标红时,将当前 tbody 的所有 tr 设置颜色为默认即可。

代码如下:

//标红延期垫款核销客户
$('#showRed').on('change', function(){
     if($(this).attr('checked')){
         $(this).removeAttr('checked');
        $("#advTable tbody").children('tr').css('color','');
      }else{
         $(this).attr('checked','true');

          var trList = $("#advTable tbody").children("tr");
          for (var i = 1; i < trList.length; i++) {
              var td = trList.eq(i).find("td").eq(7).html();
               if(td > 500){ //
                  trList.eq(i).css('color','red');
                }
          }
     }
});

不过还要去排序事件和reload函数里去加一下,因为每次点击排序或者改变筛选条件后会刷新列表,红色会被重置掉,需要特意取消标红复选框的选中。

//改变筛选条件后取消标红复选框
 $('#showRed').removeAttr('checked');

总结:光靠想是不能解决问题的。不要怕,只要下手开始去做,问题总会被解决的。

虽然这个功能很简单,但是我很开心。继续加油吧!

原文地址:https://www.cnblogs.com/yan89/p/7552756.html