首先列表無分頁,當前顯示行15左右,有復選框,初始化進來,數據要根據標識來設置選中狀態。
public masterListOptions: GridOptions = <GridOptions>{};
這里用到了 api 中的選中方法:
this.masterListOptions.api.selectNode(node, true);
第二個參數時用來追加選中的,如果只設置第一個,則會選中單條。
渲染完數據后,獲取渲染的數據,forEach 根據返回標識,進行追加設置選中。(我這里直接把要選中的存成了數組,判斷當前的key在不在數組中)
// 設置列表展示 this.masterListOptions.api.setRowData(rowData); // 設置選中 const nodes = this.masterListOptions.api.getRenderedNodes(); forEach(nodes, (node) => { if (this.selectedArr && this.selectedArr.indexOf(node.data.rawName) >= 0) { // 如果存在,則說明字段已選中 this.masterListOptions.api.selectNode(node, true); } });
之后看界面展示效果,發現只有上邊的行被初始化選中了,而后邊的幾十行后都沒被選中,打了斷點發現:grid 貌似值渲染當前展示行 * 2 的行數,才導致獲取渲染行數不是全部,然后沒設置上選中
知道問題了,那就監聽滾動,然后重新設置選中即可,這里用到了一個事件
// 界面更換,設置渲染行的選中顯示 this.masterListOptions.onViewportChanged = this.onViewportChanged; onViewportChanged = (event) => {// 設置選中 const nodes = this.masterListOptions.api.getRenderedNodes(); forEach(nodes, (node) => { if (this.selectedArr.indexOf(node.data.rawName) >= 0) { this.masterListOptions.api.selectNode(node, true); } }); }
界面顯示數據的切換,會觸發此方法,這時再重新設置渲染行的選中,完美~
還遇到個小問題,我這當前行還可以進行編輯,單擊單元格,會進入編輯狀態,鼠標點擊其他位置,失去焦點后關閉編輯狀態。
如果處於編輯狀態下,再滾動界面,隨便點擊行,發現界面又會回滾到編輯行處,且關閉了編輯狀態。關閉編輯狀態獲取焦點,導致展示當前焦點行。那就只能在滾動事件中加入一句
// 取消編輯狀態 this.masterListOptions.api.stopEditing(true);
搞定