电竞比分网-中国电竞赛事及体育赛事平台

搜索
分享

ExtJS3 - 如何實現(xiàn)多表頭Grid

 dengshisong 2017-02-14

ExtJS 3.x 版本并沒有直接實現(xiàn)多表頭Grid 的方式，可借助ColumnHeaderGroup插件進行實現(xiàn)，該插件代碼已包含在項目源碼包中的ux目錄下。


1、引入ColumnHeaderGroup插件的css及js文件

  1. <head>  
  2.     <meta charset="utf-8" />  
  3.     <title>ColumnHeaderGroup Grid</title>  
  4.     <link rel="stylesheet" type="text/css" href="extjs/css/ext-all.css" />  
  5.     <link rel="stylesheet" type="text/css" href="extjs/css/xtheme-blue.css" />  
  6.     <link rel="stylesheet" type="text/css" href="extjs/ux/ColumnHeaderGroup.css" />  
  7.     <script type="text/javascript" src="extjs/ext-base.js"></script>  
  8.     <script type="text/javascript" src="extjs/ext-all.js"></script>  
  9.     <script type="text/javascript" src="extjs/ux/ColumnHeaderGroup.js"></script>  
  10. </head>  
2、創(chuàng)建ColumnHeaderGroup對象實例
  1. var row = new Ext.ux.grid.ColumnHeaderGroup({  
  2.     rows: [  
  3.         [{  
  4.             header: "",  
  5.             align: "center",  
  6.             colspan: 1  
  7.         }, {  
  8.             header: "A",  
  9.             align: "center",  
  10.             colspan: 1  
  11.         }, {  
  12.             header: "B",  
  13.             align: "center",  
  14.             colspan: 2  
  15.         }, {  
  16.             header: "C",  
  17.             align: "center",  
  18.             colspan: 3  
  19.         }, {  
  20.             header: "D",  
  21.             align: "center",  
  22.             colspan: 2  
  23.         }, {  
  24.             header: "E",  
  25.             align: "center",  
  26.             colspan: 1  
  27.         }]  
  28.     ]  
  29. });  
其中，rows屬性是一個二維數(shù)組，每一個子項代表一行，可以指定每行包含的單元格及其所跨的列數(shù)，也可以根據(jù)自己的實際需要創(chuàng)建多行。


3、創(chuàng)建Grid實例，并使用ColumnHeaderGroup插件

  1. var sm = new Ext.grid.CheckboxSelectionModel();  
  2. var viewport = new Ext.Viewport({  
  3.     layout: "fit",  
  4.     items: [{  
  5.         xtype: "grid",  
  6.         cls: "col-grid",  
  7.         title: "多表頭Grid",  
  8.         store: new Ext.data.ArrayStore({  
  9.             fields: ["a", "b1", "b2", "c1", "c2", "c3", "d1", "d2", "e"],  
  10.             data: [  
  11.                 ["a", "b-1", "b-2", "c-1", "c-2", "c-3", "d-1", "d-2", "e"],  
  12.                 ["a", "b-1", "b-2", "c-1", "c-2", "c-3", "d-1", "d-2", "e"],  
  13.                 ["a", "b-1", "b-2", "c-1", "c-2", "c-3", "d-1", "d-2", "e"]  
  14.             ]  
  15.         }),  
  16.         sm: sm,  
  17.         columns: [sm, {  
  18.             header: " ",  
  19.             dataIndex: "a",  
  20.             align: "center"  
  21.         }, {  
  22.             header: "B1",  
  23.             dataIndex: "b1",  
  24.             align: "center"  
  25.         }, {  
  26.             header: "B2",  
  27.             dataIndex: "b2",  
  28.             align: "center"  
  29.         }, {  
  30.             header: "C1",  
  31.             dataIndex: "c1",  
  32.             align: "center"  
  33.         }, {  
  34.             header: "C2",  
  35.             dataIndex: "c2",  
  36.             align: "center"  
  37.         }, {  
  38.             header: "C3",  
  39.             dataIndex: "c3",  
  40.             align: "center"  
  41.         }, {  
  42.             header: "D1",  
  43.             dataIndex: "d1",  
  44.             align: "center"  
  45.         }, {  
  46.             header: "D2",  
  47.             dataIndex: "d2",  
  48.             align: "center"  
  49.         }, {  
  50.             header: " ",  
  51.             dataIndex: "e",  
  52.             align: "center"  
  53.         }],  
  54.         viewConfig: {  
  55.             forceFit: true  
  56.         },  
  57.         plugins: row  
  58.     }]  
  59. });  
4、如果Gird是CheckboxSelectionModel模式，那在每一行的表頭都會有一個checkbox選擇框，而且多表頭之間參差不齊。此時可以添加額外的css樣式，對跨列的表頭進行美化。
  1. td.ux-grid-hd-group-cell .x-grid3-hd-checker {display:none;}  
  2.   
  3. .col-grid td {  
  4.     -webkit-box-sizing:border-box;  
  5.     -moz-box-sizing:border-box;  
  6.     box-sizing:border-box;  
  7. }  
ol-grid為當前Grid設置的cls值

5、最終效果如下：


*注：以上實例使用ExtJS3.4版本實現(xiàn)。

    本站是提供個人知識管理的網(wǎng)絡存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多