【EasyUI DataGrid】實現跨頁保持多選checkbox狀態

       爲了實現對EasyUi DataGrid的批量操作,需要對多行的數據進行選中,經過測試發現一個問題:進行多選的時候,經過翻頁,上一頁的數據選擇狀態被清空。然而在實際中這是不符合要求的,我們經過翻頁上一頁數據的選中狀態應該仍然保持選中,而不是被清除。

       爲了實現對dataGrid的多選操作,我們在datagrid中添加複選框,能夠保持多選,複選框的代碼如下所示:

這裏寫圖片描述

       在上述中需要注意的是:field:cb,cb這個屬性名可以任意的起名字,只要不和後臺數據傳過來的屬性名一樣就行。

       爲了解決用戶翻頁選中的問題,需要在加入一個屬性,如下所示:

這裏寫圖片描述

       與此相對的問題就來了,我IdField後面的屬性名能不能是cb呢?也就是複選框的那個屬性列,然後你嘗試了一下,發現沒問題。就得出一個結論:在datagrid顯示的屬性列中的屬性都可以跟在idField後面。

       事實上你得出的結論是錯誤的。然後就有人感到奇怪了?你是在逗我嗎?我明明用cb這個屬性都可以實現跨頁選中了,然後配上我要批量操作的代碼,功能也通了,你現在告訴我我的結論不正確,你是不是傻?

       不不不,我不傻,你也不傻。只是你考慮的情況太單一了,直接用截圖證明我的結論吧。我的功能界面是這樣子的:
這裏寫圖片描述
       點擊左邊的一欄,在右面顯示左邊一欄的詳細信息,不點擊左邊的默認顯示左邊第一欄的詳細信息。下面我們跨頁的代碼用cb複選框試一下,也就是idField :'cb',看看會出現什麼情況:

這裏寫圖片描述

這裏寫圖片描述

       就會有人說,這不是挺正常的嗎,我點擊全選按鈕,兩頁內容全部都選中了。別急,我們接着往下看,當你點開培訓編號爲200002的培訓項目時,你會發現如下的頁面:
這裏寫圖片描述

       當你再點擊培訓編號爲201403的項目如下圖所示:
這裏寫圖片描述

       通過上圖你會發現,idField後面的屬性如果是全選框,會導致所有的培訓信息都被選中,這不是我們想要的結果,這就是idField後的屬性不用複選框的原因。
       綜上所述:爲了解決跨頁多選的問題:一般情況下idField後的屬性爲主鍵,能唯一標識的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章