1. 程式人生 > >關於動態修改easyui datagrid行樣式,不同樣式覆蓋優先順序問題(class)

關於動態修改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' };
        }
        }
      }
    }
}