agGrid設定對指定行不能選中checkbox

漂亮得皮皮發表於2019-02-02
官方文件如下描述：
介面：
agGrid設定對指定行不能選中checkbox
方法一：（只控制點選checkbox時不能選擇，但是出了一個bug,如有遇到的夥伴望能夠交流一下解決方案。 設定某些行不可進行行選擇時，這個方法對全選框也起了作用，導致1、全選時全選checkbox沒有選中圖示，2、反選也就是取消所有選擇失效）

解決辦法（方法二)：2019-3-25補充：自己寫判斷有太多情況需要判斷，而且不好找判斷條件，所以最後解決步驟：（換了一個方法解決）
1、 不可選的行不渲染checkbox，這裡說明：即使沒有渲染checkbox框，其實該行仍然可以被選中（比如選中後的顏色會被加上）用的方法是：

checkboxSelection:(params)=>{
    let field=params.data;
    this.actions.getNotSelectAndRowId(params);//獲取不可選行的索引和id
    return params.data?!options.includes(field.f8)&&!options.includes(field.f11):false;
}
複製程式碼

// 獲取衝突行的_id和rowid
getNotSelectAndRowId:function(params){
    let options=['是','是（請假）'];
    let field=params.data;
    let id = field._id;
    //獲取所有衝突行的_id /行ID  options.includes(field.f7)||
    if (options.includes(field.f8)||options.includes(field.f11)) {
        !this.data.notSelectData.includes(id)&& this.data.notSelectData.push(id)
        if (params.node) !this.data.notSelectRowId.includes(params.node.id)&&this.data.notSelectRowId.push(params.node.id)
        else if (params.id) !this.data.notSelectRowId.includes(params.id)&&this.data.notSelectRowId.push(params.id)
    }
},
複製程式碼

2、從api裡獲取所有選中的行,然後根據條件篩選不可選的，把這些行存起來，行索引和每行的唯一識別的比如id(有時候id可能是索引，要區別開）

方法:api.getSelectedRows()
複製程式碼

let rows = this.agGrid.gridOptions.api.getSelectedRows();
//去掉rows中衝突的行資料
if ((this.data.viewMode== "viewFromCorrespondence"||this.data.viewMode=='editFromCorrespondence') &&this.data.parentTableId== "8174_vZhJu4jY8yfZpVTjkmsrhF") {
    for (let r = 0; r < rows.length; r++) {
        for (let j = 0; j < this.data.notSelectData.length; j++) {
            if (rows[r]&&rows[r]._id == this.data.notSelectData[j]) {
                rows.splice(r, 1)
            }
        }
    }
    this.actions.removeNotSelectDataColor()
}
複製程式碼

3、第一個：判斷單行點選，單擊某個單元格多次可能會選中改行第二個：點選全選，其實點選全選還是選中的全部資料，這時候通過之前拿到的每行的id的陣列，把不可選的行從getSelectedRows()這去除掉，這樣儲存下來的資料裡就不會存在不可選的行資料此外，因為全選會給所有行加上選中的顏色，這裡需要通過行索引的陣列把顏色去掉複製程式碼

//移除衝突行的選中顏色
  removeNotSelectDataColor:function(){
console.log('this.data.isSaveSelectData',localStorage.getItem('isSaveSelectData'),localStorage.getItem('isSaveSelectData')=='false',typeof localStorage.getItem('isSaveSelectData'))
      //如果剛剛儲存的排期單對應關係資料，就返回不取消顏色
      if (localStorage.getItem('isSaveSelectData')!='false'){
          return;
      }
      for(let i=0;i<$('.ag-row').length;i++){
          let rowId = $('.ag-row')[i].getAttribute('row');
          //let className = $('.ag-row')[i].className;
          if (this.data.notSelectRowId.includes(rowId)){
              $($('.ag-row')[i]).removeClass('ag-row-selected')
          }
      }
  },
複製程式碼

總結：這個方法其實就是障眼法，頁面看著沒選中，其實是選中狀態的，只是人為的把選中顏色取消了，把checkbox取消了，把不可選的行資料直接從所有資料裡刪掉了，這樣儲存和全選反選就沒問題了
遇到一個bug:滾動可能之前沒有顏色的不可選的行顏色會被再次加上，這個把去掉顏色 的方法在滾動事件裡在執行一次就ok複製程式碼

this.el.find('.ag-body-viewport').on('scroll', _.debounce((e) => {
    That.actions.setFloatingFilterInput();
    //解決agGrid滾動衝突行顏色問題
    this.actions.removeNotSelectDataColor();
}, 700));
複製程式碼

其他問題針對不同的情況而定，願大家寫程式碼寫的開心


相關文章