9.19 列表特殊行标红

Posted 2020-10-07 西西夏天

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

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

之前我设想选中复选框后，可能用到刷新列表函数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‘);

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

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