关于动态修改easyui datagrid行样式,不同样式覆盖优先级问题(class)

easyui->datagrid->rowStyler

释义:直接return class实际在html中是叠加class,并不会移除已有的自定义class,这会导致class的优先级是根据在css文件中的先后来判断优先级,达不到新的覆盖旧的的效果,故此处先移除自定义class,再加载新class

rowStyler: function (index, row) {
  var opt = $(this).datagrid("options");
  var rows1 = opt.finder.getTr(this, 0, "allbody", 1);
  var rows2 = opt.finder.getTr(this, 0, "allbody", 2);
  if (rows1.length > 0) {
    $(rows1).each(function () {
      var tempIndex = parseInt($(this).attr("datagrid-row-index"));
      if (tempIndex == index) {
        $(this).removeClass(function (i, cls) { return cls.replace(/custom-d+ /g, ''); });   //此处表示自定义class名称是 'custom-'开头的
      }
    });
  }
  if (rows2.length > 0) {
    $(rows2).each(function () {
      var tempIndex = parseInt($(this).attr("datagrid-row-index"));
      if (tempIndex == index) {
        $(this).removeClass(function (i, cls) { return cls.replace(/custom-d+ /g, ''); });  //此处表示自定义class名称是 'custom-'开头的
      }
    });
  }

  if (row.driveState == '离线') {
    return { class: 'custom-off-line' };
  }
  else {
    if (row.alarmFlagName != '') {
      return { class: 'custom-alarm-car' };
    }
    else {
      if ((row.stateFlag & 2) == 0) {
        return { class: 'custom-unlocation' };
      }
      else {
        if (row.driveState == '停车') {
          return { class: 'custom-stop-car' };
        }
        else if (row.driveState == '行驶') {
          return { class: 'custom-drive-car' };
        }
        }
      }
    }
}

原文地址:https://www.cnblogs.com/wcrBlog/p/10059217.html