LigerUI 使用教程表格篇

閱讀目錄

第一個例子

簡介

ligerGrid是ligerui系列插件的核心控件，用戶能夠快速地建立一個美觀,並且功能強大的表格,支持排序、分頁、多表頭、固定列等等。javascript

支持本地數據和服務器數據(配置data或者url)

支持排序和分頁(包括Javascript排序和分頁)

支持列的「顯示/隱藏」

支持多表頭

支持固定列

支持明細行

支持彙總行

支持單元格模板

支持編輯表格(三種編輯模式,單元格編輯、行編輯、明細編輯)

支持樹表格

支持分組

支持行移位、表頭拖拽(新加入)

代碼

首先引入基本的css和js文件css

1  <link href="http://www.cnblogs.com/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
2  <script src="http://www.cnblogs.com/lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
3  <script src="http://www.cnblogs.com/lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script>

而後就可使用liger Grid了html

 1     <div id="maingrid"></div>
 2     <script type="text/javascript">
 3     var griddata = [
 4             { id: '01', name: '部門01' },
 5             { id: '02', name: '部門02' },
 6             { id: '03', name: '部門03' },
 7             { id: '04', name: '部門04' },
 8             { id: '05', name: '部門05' },
 9             { id: '06', name: '部門06' },
10             { id: '07', name: '部門07' }
11         ];
12 
13      var grid = $("#maingrid").ligerGrid({
14             columns: [
15                 { name: 'id', display: '序號', width: 200 },
16                 { name: 'name', display: '名稱', width: 300 }
17             ],
18             data: { Rows: griddata }
19         }); 
20 </script>

效果

數據結構

表格數據結構

表格數據有兩個屬性,一個是Rows，一個是Total。其中Rows是一個數據數組，Total是記錄的總數。java

實則是Total在使用本地數據的時候是不須要提供的。咱們使用本地數據的格式能夠這樣：node

 1   {
 2         Rows: [
 3             { id: '01', name: '部門01' },
 4             { id: '02', name: '部門02' },
 5             { id: '03', name: '部門03' },
 6             { id: '04', name: '部門04' },
 7             { id: '05', name: '部門05' },
 8             { id: '06', name: '部門06' },
 9             { id: '07', name: '部門07' }
10         ]
11   }

id、name都是記錄的屬性,這裏是能夠任意自定義的,而在配置columns的時候，並不必定要配置相應的列，只須要配置相應顯示的列。在後續的操做中，這些屬性均可以取得。好比方法getSelected()。自定義單元格函數render。jquery

樹形表格數據結構

樹形結構師在表格數據的基礎上多了一個children的參數，好比：api

 1         {
 2             Rows: [
 3             { id: '01', name: '部門01', children: [
 4                 { id: '0101', name: '部門0101' },
 5                 { id: '0102', name: '部門0102' },
 6                 { id: '0103', name: '部門0103' }
 7             ]
 8             },
 9             { id: '02', name: '部門02' },
10             { id: '03', name: '部門03' },
11             { id: '04', name: '部門04' },
12             { id: '05', name: '部門05' },
13             { id: '06', name: '部門06' },
14             { id: '07', name: '部門07' }
15         ]
16         }

兩種綁定數據的方式

ligerGrid綁定數據有兩種方式，一是使用本地數據，一是使用服務器數據。數組

在第一個例子中，咱們配置了data參數，這種方式是本地方式。另外一種方式是配置url參數，使用遠程數據。服務器

配置column

表格顯示了多少個列,列寬，列單元格要顯示的內容都是由columns屬性配置，下面是column的配置參數：數據結構

 1 {
 2     display: '序號',         //表頭列顯示的文本,支持html
 3     //表頭內容自定義函數
 4     headerRender: function (column) {
 5         return "<b>" + column.display + "</b>";
 6     },
 7     name: 'id',              //單元格映射的行數據屬性 
 8     align: 'center',           //單元格內容對齊方式:left/center/right    
 9     hide: false,             //是否隱藏
10     width: 100,              //列的寬度
11     minWidth: 50,            //列的最小寬度
12     isSort: true,            //是否容許此列排序,默認爲容許排序 
13     isAllowHide: true,       //是否容許隱藏,若是容許，將會出如今【顯示/隱藏列右鍵菜單】
14     type: 'string',          //類型,用於排序
15     //自定義單元格渲染器
16     render : function (record, rowindex, value, column) {
17         //this     這裏指向grid
18         //record   行數據
19         //rowindex 行索引
20         //value    當前的值，對應record[column.name]
21         //column   列信息
22         return value;  //返回此單元格顯示的HTML內容(通常根據value和row的內容進行組織)
23     },
24     //列彙總
25     totalSummary: {
26         align: 'center',   //彙總單元格內容對齊方式:left/center/right 
27         type: 'count',     //彙總類型sum,max,min,avg ,count。能夠同時多種類型
28         render: function (e) {  //彙總渲染器，返回html加載到單元格
29             //e 彙總Object(包括sum,max,min,avg,count) 
30             return "<div>總數：" + e.count + "</div>";
31         }
32     },
33     //單元格編輯器
34     editor: {
35         type: 'text'
36     },
37     //多表頭支持
38     columns: null
39 },

表格的列提供了很完整的接口能夠擴展。不管是內容單元格或者是表頭單元格均可以對內容、佈局、大小進行自定義。

自定義表頭

好比表頭，咱們能夠把display直接設置一段html:

1 {
2     display: '<a href="javascript:void(0)">部門</a>', //表頭列顯示的文本,支持html
3     name: 'name',
4     align: 'left'
5 },

或者使用headerRender：

1 //表頭內容自定義函數
2 headerRender: function (column) {
3        return "<b>" + column.display + "</b>";
4 },

效果圖

自定義單元格

column的name是定義單元格連接到行數據哪個屬性。好比說上面例子的第一行，把name配置爲id，那麼顯示出來應該就是 "01"，若是配置成name，那麼顯示出來就是 "部門01"。還有align參數，是肯定單元格的對齊方式。

若是沒有配置render，那麼單元格顯示的內容將由name肯定。

1  { name: 'id', display: '序號', width: 200 },
2  { name: 'name', display: '名稱', width: 300 }

上面介紹的是單元格的默認顯示方式。除了這種方式，還能夠用格式器和自定義函數。

單元格內容的顯示規則：

1，若是配置了render，使用render

2，若是column的type參數擴展了對應的格式化器，那麼使用格式化器進行渲染。好比定義了貨幣格式的格式化器

3，最後纔是使用默認顯示方式

格式化器

經過擴展$.ligerDefaults.Grid.formatters['columntype']來實現，columntype是column配置的type參數。好比如今要格式化一個貨幣格式的：

 1 $.ligerDefaults.Grid.formatters['currency'] = function (num, column) {
 2             //num 當前的值
 3             //column 列信息
 4             if (!num) return "$0.00";
 5             num = num.toString().replace(/\$|\,/g, '');
 6             if (isNaN(num))
 7                 num = "0.00";
 8             sign = (num == (num = Math.abs(num)));
 9             num = Math.floor(num * 100 + 0.50000000001);
10             cents = num % 100;
11             num = Math.floor(num / 100).toString();
12             if (cents < 10)
13                 cents = "0" + cents;
14             for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
15                 num = num.substring(0, num.length - (4 * i + 3)) + ',' +
16         num.substring(num.length - (4 * i + 3));
17             return "$" + (((sign) ? '' : '-') + '' + num + '.' + cents);
18         };

這樣只要column的type配置爲currency。都會使用這個函數來自定義單元格內容

1 { display: '單價', name: 'UnitPrice', align: 'right' ,type:'currency' }

效果圖

自定義單元格函數

自定義單元格函數是指配置column的render。咱們能夠組織任意的html。

 1 var grid = $("#maingrid").ligerGrid({
 2             columns: [
 3                 { name: 'id', display: '序號', width: 100,
 4                     render: function (record, rowindex, value, column) {
 5                         //this     這裏指向grid
 6                         //record   行數據
 7                         //rowindex 行索引
 8                         //value    當前的值，對應record[column.name]
 9                         //column   列信息
10                         return "<a href='edit.htm?id=" + value + "'>編輯</a>";
11                     }
12                 },
13             { name: 'id', display: '序號', width: 120,
14                 render: function (record, rowindex, value, column) {
15                     return '<input type="button" value="Add"/><input type="button" value="Edit"/><input type="button" value="Delete"/>';
16                 }
17             }, 
18                 { name: 'name', display: '名稱', width: 300 }
19             ],
20             data: { Rows: griddata }
21         });

效果圖

單元格編輯器

全部的編輯器的構造的定義在$.ligerDefaults.Grid.editors，好比

1 editor: { type: 'spinner' }

將會使用$.ligerDefaults.Grid.editors['spinner'] 進行建立編輯器進行構建。

ligerGrid內置提供了複選框、文本框、日期、數字調整器、下拉框等編輯器。

效果圖

column的參數不少,這裏不做一一列舉，只介紹了幾個經常使用的參數

更多的能夠查看api: http://api.ligerui.com

排序和分頁

排序和分頁也有兩種方式。一種是本地排序和分頁。一種是服務器排序和分頁。這裏只介紹本地的方式。

默認的狀況。是啓用排序和分頁的。若是要取消分頁功能，以下：

1 usePager: false

效果圖

事件和方法

事件

事件名	參數	描述
onAfterAddRow	(e)	增長行後事件
onAfterBeginEdit	(e)	開始編輯後事件
onAfterChangeColumnWidth	(column, newwidth)	改變列寬度事件
onAfterShowData	(data)	顯示完數據事件
onAfterSubmitEdit	(e)	提交編輯事件
onBeforeChangeColumnWidth	(column, newwidth)	驗證改變列寬度是否經過
onBeforeCheckAllRow	(checked, grid element)	選擇前事件，能夠經過return false阻止操做(複選框全選/全不選)
onBeforeEdit	(e)	編輯前事件
onBeforeShowData	(data)	顯示數據前事件，能夠經過reutrn false阻止操做
onBeforeSubmitEdit	(e)	驗證編輯器結果是否經過
onBeginEdit	(e)	驗證開始編輯是否經過
onCancelEdit	(e)	取消編輯事件
onChangeSort	()	改變排序事件
onCheckAllRow	(checked, grid element)	選擇事件(複選框全選/全不選)
onCheckRow	(checked, rowdata, rowindex, rowDomElement)	選擇事件(複選框)
onContextmenu	(parm, e)	右擊事件
onDblClickRow	(rowdata, rowindex, rowDomElement)	雙擊行事件
onDragCol	(node)	拖動列事件
onError	()	錯誤事件
onLoaded	()	加載完函數
onLoading	()	加載時函數
onReload	()	刷新事件，能夠經過return false來阻止操做
onSelectRow	(rowdata, rowindex, rowDomElement)	選擇行事件
onSubmit	()	提交前事件
onSuccess	()	成功事件
onToFirst	()	第一頁，能夠經過return false來阻止操做
onToggleCol	()	切換列事件
onToLast	()	最後一頁，能夠經過return false來阻止操做
onToNext	()	下一頁，能夠經過return false來阻止操做
onToPrev	()	上一頁，能夠經過return false來阻止操做
onUnSelectRow	(rowdata, rowindex, rowDomElement)	取消選擇行事件

例子

 1  var grid = $("#maingrid").ligerGrid({
 2             columns: [
 3                     { name: 'id', display: '序號', width: 200 },
 4                     { name: 'name', display: '名稱', width: 300 }
 5                 ],
 6             data: { Rows: griddata },
 7             onSelectRow: function (rowdata, rowindex) {
 8                 //行記錄 對於數據行
 9                 //行索引 第幾行,從0開始
10                 alert(rowdata.name);
11             }
12         }); 
13         grid.bind('SelectRow', function (rowdata, rowindex) {
14             //this 這裏的this都是指向grid
15 
16             //行記錄 對於數據行
17             //行索引 第幾行,從0開始
18             alert(rowdata.name);
19         });

方法

方法	參數	描述
addEditRow	(rowdata)	增長一個編輯行
addRow	(rowdata, rowParm, isBefore, parentRow)	增長新行
addRows	(rowdataArr)	一次性增長多行
appendRow	(rowData, targetRow, nearRow, isBefore)	附加新行(樹模式)
beginEdit	(rowParm)	進入編輯狀態
cancelEdit	(rowParm)	取消編輯
changeHeaderText	(columnparm, headerText)	改變表頭文本
changePage	(ctype)	改變分頁
changeSort	(columnName, sortOrder)	改變排序
collapse	(targetRow)	收縮(樹模式)
collapseDetail	(rowParm)	收縮明細
deleteRow	(rowParm)	選擇行
deleteSelectedRow	()	刪除選擇的行
demotion	(targetRow)	降級(樹模式)
endEdit	(rowParm)	結束編輯
expand	(targetRow)	展開(樹模式)
extendDetail	(rowParm)	展開明細
formatRecord	(record)	格式化數據,刪除系統字段
getAdded	()	獲取新增的數據
getCheckedRowObjs	()	獲取選中的行 DOM對象集合
getCheckedRows	()	獲取選中的行數據(複選框)
getChidren	(rowParm)	獲取子節點數據(樹模式)
getColumn	(columnpam)	獲取列信息
getColumns	(columnLevel)	獲取指定層級的Columns
getColumnType	(columnname)	根據列名獲取列類型
getData	(status, removeStatus)	獲取數據
getDeleted	()	獲取刪除過的數據
getParent	(rowParm)	獲取父節點數據(樹模式)
getRowObj	(rowParm)	行DOM轉換爲行數據
getSelected	()	獲取選中的行數據(同getSelectedRow)
getSelectedRow	()	獲取選中的行數據
getSelectedRowObj	()	獲取選中的行 DOM對象
getSelectedRowObjs	()	獲取選中的行 DOM對象集合
getSelectedRows	()	獲取選中的行數據集合(支持Ctrl多選)
getSelecteds	()	獲取選中的行數據集合(支持Ctrl多選)(同getSelectedRows)
getUpdated	()	獲取修改過的數據
hasChildren	(rowParm)	是否包括子節點(樹模式)
isLeaf	(rowParm)	是否葉節點(樹模式)
isTotalSummary	()	是否包含彙總
loadData	(loadDataParm)	刷新數據
loadServerData	(param, clause)	加載數據(服務器)
reRender	(e)	從新加載html
setColumnWidth	(columnparm, value)	調整列寬
setOptions	(parms)	從新設置參數(同名方法set)
SubmitEdit	(rowParm)	提交編輯
toggle	(targetRow)	伸展/收縮節點(樹模式)
toggleCol	(columnparm, visible)	顯示/隱藏列
updateCell	(cell, value, rowParm)	更新單元格
updateRow	(newRowData, rowDom)	更新行
upgrade	(targetRow)	升級(樹模式)

例子

1     <a class="l-button" href="javascript:selectRow(2)">選擇行(3)</a>
2     <a class="l-button" href="javascript:getSelectRow()">獲取選擇</a>

 1 var grid = $("#maingrid").ligerGrid({
 2             columns: [
 3                 { name: 'id', display: '序號', width: 200 },
 4                 { name: 'name', display: '名稱', width: 300 }
 5             ]
 6         });
 7 
 8         grid.set({ data: { Rows: griddata} });
 9          
10         function selectRow(index) {
11             grid.select(index);
12         }
13         function getSelectRow() {
14             var rows = grid.getSelecteds();
15             for (var i in rows) {
16                 alert(rows[i].name);
17             }
18         }