閱讀目錄
第一個例子
簡介
ligerGrid是ligerui系列插件的核心控件，用戶可以快速地創建一個美觀,而且功能強大的表格,支持排序、分頁、多表頭、固定列等等。
- 支持本地數據和服務器數據(配置data或者url)
- 支持排序和分頁(包括Javascript排序和分頁)
- 支持列的“顯示/隱藏”
- 支持多表頭
- 支持固定列
- 支持明細行
- 支持匯總行
- 支持單元格模板
- 支持編輯表格(三種編輯模式,單元格編輯、行編輯、明細編輯)
- 支持樹表格
- 支持分組
- 支持行移位、表頭拖拽(新加入)
代碼
首先引入基本的css和js文件
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了
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是記錄的總數。
實則是Total在使用本地數據的時候是不需要提供的。我們使用本地數據的格式可以這樣：
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。
樹形表格數據結構
樹形結構師在表格數據的基礎上多了一個children的參數，比如：
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 | () |
|
| getCheckedRows | () |
|
| getChidren | (rowParm) |
|
| getColumn | (columnpam) |
|
| getColumns | (columnLevel) |
|
| getColumnType | (columnname) |
|
| getData | (status, removeStatus) |
|
| getDeleted | () |
|
| getParent | (rowParm) |
|
| getRowObj | (rowParm) |
|
| getSelected | () |
|
| getSelectedRow | () |
|
| getSelectedRowObj | () |
|
| getSelectedRowObjs | () |
|
| getSelectedRows | () |
|
| getSelecteds | () |
|
| getUpdated | () |
|
| hasChildren | (rowParm) |
|
| isLeaf | (rowParm) |
|
| isTotalSummary | () |
|
| loadData | (loadDataParm) |
|
| loadServerData | (param, clause) |
|
| reRender | (e) |
|
| setColumnWidth | (columnparm, value) |
|
| setOptions | (parms) |
|
| 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 }