分享一個個人JavaScript版GridView多功能表格

時間 2019-11-08

標籤分享一個個人 javascript gridview 多功能表格欄目 JavaScript 简体版

原文原文鏈接

GridView是什麼？

GridView是由Mr.Co開發的一套開源的多功能表格插件，主要用於讓頁面開發者在開發中節省拼接Table表格和操做Table表格相關複雜操做的開發成本與時間。開發人員能夠用GridView快速開發出帶有集成編輯、組合表頭、分頁、錶行列操做等一系列功能的GridView。GridView依賴於jQuery類庫開發而成，它可使用在任何Web頁面中，比較適合後端項目使用。css

主要特色

快速：體積小，加載速度快
開源：開放源代碼，高品質
擴展：基於對象庫的設計，可根據需求增減功能
風格：修改GridView風格很是容易，只需修改一個 CSS 文件
兼容：支持大部分主流瀏覽器，好比 IE、Firefox、Safari、Chrome、Opera

快速使用

1 /**引入皮膚樣式**/
2 <link href="gridview.css" rel="stylesheet">
3 /**引入jQuery類庫**/
4 <script src="jquery.js"></script>
5 /**引入gridview類庫**/
6 <script src="gridview.js"></script>
7 /**頁面中新增一個容器元素**/
8 <div id="grid"></div>

 1 //初始化
 2 GridView({
 3     container: $('#grid'),
 4     dataSource: [
 5         { 
 6             id: '006', 
 7             name: "張三", 
 8             age: "47", 
 9             sex: '男', 
10             address: "重慶市", 
11             income: '100W' 
12         }
13     ],
14     columns: [
15         { 
16             name: '系統編號', 
17             field: 'id', 
18             order: 0, 
19             width: 100, 
20             titleAlign: 'center', 
21             contentAlign: 'left', 
22             display: '' 
23         },
24         { 
25             name: '年齡', 
26             field: 'age', 
27             order: 2, 
28             width: 60, 
29             titleAlign: 'center', 
30             contentAlign: 'center', 
31             link: '/main.html?key={id}' 
32         }
33     ]
34 });

初始化參數配置

  1 //表格容器
  2 container: $('body')
  3 
  4 //表格惟一ID
  5 id: 'gridView' + parseInt(100000000 * Math.random())
  6 
  7 //是否隱藏表格頭部
  8 hidenHead: false
  9 
 10 //是否爲組合表頭
 11 groupHead: {
 12     //若是爲組合表頭必須設置爲true
 13     isGroup: false,
 14         template: $('#gridview_head').html()
 15 },
 16 
 17 //表格行checkbox是否爲單選,false : 非單選  true : 單選
 18 singleSeleted: false
 19 
 20 //表格默認樣式名稱
 21 className: 'gridView'
 22 
 23 //行間隔-高亮變色行樣式名稱
 24 columnHighClassName: 'highBack'
 25 
 26 //主鍵ID，若是不設置將會致使行更新操做時獲取不到主鍵ID
 27 dataKeyID: 'id'
 28 
 29 //當數據不夠分頁條數行的時候填充空白行
 30 columnFilling: false
 31 
 32 //是否須要顯示錶格行checkbox可選功能, false : 不顯示  true : 顯示
 33 selectedColumn: true
 34 
 35 //是否添加行序號, false : 不顯示  true : 顯示
 36 columnNo: true
 37 
 38 //行合併,默認爲所有不合並
 39 mergeRows: {
 40     //是否合併  false : 不合並  true : 合併
 41     isMerge: false,
 42         //須要合併的列索引,不給此屬性，默認合併全部列
 43         index: [0, 1, 2, 3, 4, 5]
 44 }
 45 
 46 //數據表格格式設置，表格數據顯示規則就靠它了
 47 columns:[
 48     {
 49         //須要映射的字段Key
 50         field:'name',
 51         //表格頭部標題
 52         name:'姓名'，
 53 //表格列排序，數字越小越靠前
 54 order:1,
 55     //表格寬度
 56     width:200,
 57     //表格頭部標題顯示位置,屬性與CSS中的text-align屬性一致
 58     titleAlign:'center',
 59     //表格內容部分顯示位置,屬性與CSS中的text-align屬性一致
 60     contentAlign:'center',
 61     //控制該列是否顯示 block 顯示 none 不顯示
 62     display:'none',
 63     //當該屬性存在,clickCallback不存在的時候，當前元素會變成一個超連接
 64     link:'http://www.baidu.com',
 65     //監聽當前元素的點擊事件
 66     clickCallback:function(){
 67     //當前元素對象
 68     var _$this = $(this);
 69 },
 70 //返回格式化後的數據信息顯示到表格中
 71 formatCallback: function ($this) {
 72     return $this.text() == '張三' ? '張三好帥' : '王五好帥';
 73 }
 74 }
 75 ]
 76 
 77 //編輯列設置屬性配置
 78 editColumn:[
 79     {
 80         //操做名稱
 81         name: '刪除',
 82         //操做類型，預約義類型有 delete(刪除)、update(表格編輯)、common(自定義)三種類型
 83         type: 'delete',
 84         //當type爲delete、update時候須要設置action的ajax請求地址,傳參方式在{}括號中填寫相對於的數據源中所映射的Key名稱即可
 85         action: '/main.ashx?key={id}',
 86         //是否顯示操做項
 87         visible: true,
 88         //在操做名稱後面追加其它HTML元素，這裏我用於作間隔
 89         after: '<span>|</span>',
 90         //在當前操做項中追加一個ICON操做圖片,也能夠追加其它HTML元素
 91         append: '<img src="btn_save.gif" />',
 92         //監聽當前編輯元素的點擊事件
 93         clickCallback:function (actionType, actionURL) {
 94             //actionType 獲取當前的操做type, 好比delete或者update
 95             //actionURL 獲取到解析後的action地址，用於ajax請求
 96             //this爲當前編輯元素對象,你拿到它能夠作其它相關DOM操做
 97             var _$this = this;
 98         },
 99         //返回格式化後的數據信息替換操做名稱
100         formatCallback:function (data) {
101             //data 當前一行的data數據
102             if (data.id == '001')
103                 return '恢復';
104             else
105                 return '刪除';
106         }
107     },
108     {
109         //操做名稱
110         name: '更新',
111         //操做類型，預約義類型有 delete(刪除)、update(表格編輯)、common(自定義)三種類型
112         type: 'update',
113         //定義編輯時顯示的表單類型
114         columns: [
115             {
116                 //如今的列索引位置
117                 rowIndex: 1,
118                 //表單類型,能夠是因此表單類型,好比select、text、passwod等等
119                 type: 'hidden',
120                 //表單名稱
121                 name: 'hidID'
122             },
123             {
124                 //如今的列索引位置
125                 rowIndex: 2,
126                 //表單類型,能夠是因此表單類型,好比select、text、passwod等等
127                 type: 'select',
128                 //表單名稱
129                 name: 'ddlCity',
130                 //select異步請求數據源的ajax地址
131                 action: '/main.ashx',
132                 //數據對象
133                 dataSource: [
134                     { id: '010', name: '北京市' },
135                     { id: '023', name: '重慶市' }
136                 ],
137                 //select綁定的value
138                 dataKeyID: 'id',
139                 //select綁定的text
140                 dataKeyText: 'name'
141             }
142         ],
143         after: '<span>|</span>',
144         append: '<img src="xg.gif" width="48" height="22" />',
145         saveAppend: '<img src="btn_save.gif" width="48" height="22" />',
146         clickCallback: function (actionType, actionURL) {
147             alert('點擊更新');
148             //返回true時，行內會執行colums配置的編輯樣式，false時將會被忽略
149             return true;
150         }
151     }
152 ]
153 
154 //分頁屬性配置
155 pages:{
156     //是否顯示分頁, block或者不設置display屬性 = 顯示  none = 不顯示
157     display: 'none',
158         //默認頁碼
159         index: 0,
160         //每頁顯示條數
161         size: 8,
162         //總條數
163         count: 24,
164         pageClickEvent: function (index/*當前頁碼*/, grid/*GridView引用對象,用於再次調用綁定表格數據,不調用綁定方法則表格數據不會更新*/) {
165         //在這裏寫請求後臺拿數據的Ajax調用
166         //而後再次調用
167         grid.ResetBindData([{ id: '001', name: "張三", age: "32", sex: '男', address: "北京市", income: '100W' }, { id: '002', name: "王老五", age: "23", sex: '男', address: "重慶市", income: '100W' }]);
168     }
169 }
170 
171 //行單擊監聽方法
172 columnClickHandle:function(){
173     var _$this = $(this)
174 }
175 
176 //行雙擊監聽方法
177 columnDBClickHandle:function(){
178     var _$this = $(this)
179 }
180 
181 //行復選框的change事件監聽方法
182 checkboxChangeHandle:function(){
183     var _checked = data.checked,
184         _value = data.value;
185 }