再談extjs4.1中gridpanel動態表頭動態列


之前寫過一篇gridpanel有關動態列的博客,當時只是實驗性的寫寫,實際項目中也沒有用,因為是實驗性的寫,所以對實際項目考慮的問題不是很多,比如,如果是動態列,數據也是動態的,而且可能不固定,這些具體的問題,只有在實際開發后,才會明白,這次正好順利開發完gridpanel的動態列,總結一下過程,為遇到同樣問題的同學提供一個思路。

因為是實際開發項目,具體的代碼比較多,這里只簡單說說重點的一些代碼,其實這些代碼明白后,其他的功能都很好弄。順便說一下,我后台數據庫相關操作用的是c#。

既然是動態列,應該是包括兩部分動態的信息,一部分是動態的表頭信息,一部分是動態的數據信息。表頭信息可以直接動態生成,而動態的數據嘛,我之前有考慮過動態生成類,然后根據生成的類,構造數據集合,后來試了一下,行不通,所以動態的數據信息還是使用js構造吧,也不復雜。

生成動態表頭時,我創建了一個表頭類,如下

因為我的動態列都是int類型,所以直接在前台生成的時候固定寫好了,你的要是不同的類型,也可以多增加一個字段,表示字段的數據類型。

動態表頭生成后,有兩個地方需要,那就是gridpanel的columns集合,以及構建數據集合store的fields集合。

表頭集合和數據集合都是通過后台序列化傳到前台頁面,操作起來也很簡單,上面的代碼基本就是剛剛說的,構建columns和fields數組。

下一步就是有個數據的構建了,一般這種動態列,都是行轉列的操作,如果不是行轉列那就更簡單。什么是行轉列呢?舉個例子

有一個集合是這樣的

科目   姓名  分數

語文   李一   20

數學  李一    30

英語  李一    40

語文  李二    50

數學  李二    50

最終的動態列要求是這樣的

姓名  語文  數學  英語 

李一    20   30     40

李二    50    50     0

說是動態列,其實下動態列的來源是固定有的,當然你也可以說,我可以使用sql,聯合查詢可以得到行轉列。沒錯,關鍵是傳遞到前台的方式,如果你是要序列化,你就需要根據一個動態類序列化,然后傳到前台,也就是以json的格式,如果只傳遞一個類似於DataTable的方式,前台是沒法顯示的,gridpanel數據源一般是store。

那我們就按照需要的格式組織我們的數據就行了,這里就體現了js的一個靈活的地方,屬性可以直接的添加,比如上面生成的表頭集合中的動態的dataIndex,我們就可以定義一個對象,動態給這個對象添加dataIndex和對應的數據值。

好了,動態表頭集合有了,構造的對應的數據集合有了,下面的就簡單了,只需要構造store,和重新配置grid就行了

大功告成,動態列和動態表頭也就完成了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM