ExtJs grid遠端分頁編輯

2021-10-24 07:14:16 字數 1283 閱讀 6905

在使用gird分頁時,一般有兩種實現方式:

前端本地分頁

遠端伺服器分頁 

當資料體量大時,肯定第二種方法優先,但是當使用了遠端分頁後,在進行編輯時,對於資料的儲存就要特殊處理下了。

具體實現效果如下:

由於**在進行切頁時,資料會從服務端重新拉取,並重新渲染到前端store。

所以,在切頁時需要將當前頁改變的內容儲存下來,儲存到乙個中介位置,等使用者切回此頁時,再把編輯的內容放入。

1.首先在開啟編輯時動態監聽store的載入事件,並建立乙個記憶體store用於儲存資料

startedit() });//借助記憶體用於儲存編輯的資料

store.addlistener('beforeload', 'beforedataload', me);//監聽資料載入之前的事件

store.addlistener('load', 'afterdataload', me);//監聽資料載入的事件

}

2.在資料載入前,將當前資料裡的改動值存入到記憶體store

beforedataload(store, opts)
ps:關於獲取store裡的變動值,有三種型別的獲取:

getrejectrecords=>獲取新增的資料

getupdatedrecords=>獲取變更的資料

getremovedrecords=>獲取刪除的資料 

上面的三類獲取方法,都是基於資料儲存在前端的,store還未接收真正change前

3.在新的頁面渲染資料時,把之前存在記憶體store變數裡的相關行資料重新塞入

afterdataload(store, records, success, opts) );

}

4.最後在結束編輯時,將動態監聽的事件移除,同時銷毀記憶體store

canceledit()

Extjs grid 單元格編輯

實現grid勾選後出現編輯按鈕,通過增加乙個欄位checked來控制 事件如下 selectionchange function thi,selected,eopts deselect function row,record,index,eopts grid中如下 else listeners va...

ExtJS Grid 分頁時保持選中的簡單實現方法

2013 11 25 22 30 extjs中經常要用到分頁和選擇,但是當選擇遇到分頁的時候,杯具就發生了,每一次翻頁,其它頁面的選中行就消失了。ext 沒有為我們提供內建的保持選中的支援,只有我們自己動手來實現了。先說一下具體的思路吧 首先在頁面中建立乙個陣列,用來儲存grid的所有選中行,然後分...

ExtJs Grid分頁時序號自增的實現

extjs grid分頁時,預設情況下每頁的序號都是從1起始的,這往往不符合我們的習慣。這裡實現了序號的自動增加。先看效果圖 實現步驟如下 1 定義全域性變數。var record start 0 2 grid的columns部分的定義。columns new ext.grid.rownumbere...