jQuery LigerUI 使用教程表格篇(1)
更新時間：2012年01月18日 00:36:55 作者：
ligerGrid是ligerui系列插件的核心控件，用戶可以快速地創(chuàng)建一個美觀,而且功能強大的表格,支持排序、分頁、多表頭、固定列等等
第一個例子
簡介
ligerGrid是ligerui系列插件的核心控件，用戶可以快速地創(chuàng)建一個美觀,而且功能強大的表格,支持排序、分頁、多表頭、固定列等等。
支持本地數(shù)據(jù)和服務(wù)器數(shù)據(jù)(配置data或者url)
支持排序和分頁(包括Javascript排序和分頁)
支持列的“顯示/隱藏”
支持多表頭
支持固定列
支持明細行
支持匯總行
支持單元格模板
支持編輯表格(三種編輯模式,單元格編輯、行編輯、明細編輯)
支持樹表格
支持分組
代碼
首先引入基本的css和js文件
<link rel="stylesheet" type="text/css" />
<script src="http://www.cnblogs.com/lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script>
然后就可以使用liger Grid了
<div id="maingrid"></div>
<script type="text/javascript">
var griddata = [
{ id: '01', name: '部門01' },
{ id: '02', name: '部門02' },
{ id: '03', name: '部門03' },
{ id: '04', name: '部門04' },
{ id: '05', name: '部門05' },
{ id: '06', name: '部門06' },
{ id: '07', name: '部門07' }
];
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序號', width: 200 },
{ name: 'name', display: '名稱', width: 300 }
],
data: { Rows: griddata }
});
</script>
效果
數(shù)據(jù)結(jié)構(gòu)
表格數(shù)據(jù)結(jié)構(gòu)
表格數(shù)據(jù)有兩個屬性,一個是Rows，一個是Total。其中Rows是一個數(shù)據(jù)數(shù)組，Total是記錄的總數(shù)。
實則是Total在使用本地數(shù)據(jù)的時候是不需要提供的。我們使用本地數(shù)據(jù)的格式可以這樣：
{
Rows: [
{ id: '01', name: '部門01' },
{ id: '02', name: '部門02' },
{ id: '03', name: '部門03' },
{ id: '04', name: '部門04' },
{ id: '05', name: '部門05' },
{ id: '06', name: '部門06' },
{ id: '07', name: '部門07' }
]
}
id、name都是記錄的屬性,這里是可以任意自定義的,而在配置columns的時候，并不一定要配置相應(yīng)的列，只需要配置相應(yīng)顯示的列。在后續(xù)的操作中，這些屬性都可以取得。比如方法getSelected()。自定義單元格函數(shù)render。
樹形表格數(shù)據(jù)結(jié)構(gòu)
樹形結(jié)構(gòu)師在表格數(shù)據(jù)的基礎(chǔ)上多了一個children的參數(shù)，比如：
{
Rows: [
{ id: '01', name: '部門01', children: [
{ id: '0101', name: '部門0101' },
{ id: '0102', name: '部門0102' },
{ id: '0103', name: '部門0103' }
]
},
{ id: '02', name: '部門02' },
{ id: '03', name: '部門03' },
{ id: '04', name: '部門04' },
{ id: '05', name: '部門05' },
{ id: '06', name: '部門06' },
{ id: '07', name: '部門07' }
]
}
兩種綁定數(shù)據(jù)的方式
ligerGrid綁定數(shù)據(jù)有兩種方式，一是使用本地數(shù)據(jù)，一是使用服務(wù)器數(shù)據(jù)。
在第一個例子中，我們配置了data參數(shù)，這種方式是本地方式。另一種方式是配置url參數(shù)，使用遠程數(shù)據(jù)。
配置column
表格顯示了多少個列,列寬，列單元格要顯示的內(nèi)容都是由columns屬性配置，下面是column的配置參數(shù)：
{
display: '序號', //表頭列顯示的文本,支持html
//表頭內(nèi)容自定義函數(shù)
headerRender: function (column) {
return "<b>" + column.display + "</b>";
},
name: 'id', //單元格映射的行數(shù)據(jù)屬性
align: 'center', //單元格內(nèi)容對齊方式:left/center/right
hide: false, //是否隱藏
width: 100, //列的寬度
minWidth: 50, //列的最小寬度
isSort: true, //是否允許此列排序,默認為允許排序
isAllowHide: true, //是否允許隱藏,如果允許，將會出現(xiàn)在【顯示/隱藏列右鍵菜單】
type: 'string', //類型,用于排序
//自定義單元格渲染器
render : function (record, rowindex, value, column) {
//this 這里指向grid
//record 行數(shù)據(jù)
//rowindex 行索引
//value 當前的值，對應(yīng)record[column.name]
//column 列信息
return value; //返回此單元格顯示的HTML內(nèi)容(一般根據(jù)value和row的內(nèi)容進行組織)
},
//列匯總
totalSummary: {
align: 'center', //匯總單元格內(nèi)容對齊方式:left/center/right
type: 'count', //匯總類型sum,max,min,avg ,count。可以同時多種類型
render: function (e) { //匯總渲染器，返回html加載到單元格
//e 匯總Object(包括sum,max,min,avg,count)
return "<div>總數(shù)：" + e.count + "</div>";
}
},
//單元格編輯器
editor: {
type: 'text'
},
//多表頭支持
columns: null
},
表格的列提供了很完整的接口可以擴展。無論是內(nèi)容單元格或者是表頭單元格都可以對內(nèi)容、布局、大小進行自定義。
自定義表頭
比如表頭，我們可以把display直接設(shè)置一段html:
{
display: '<a href="javascript:void(0)">部門</a>', //表頭列顯示的文本,支持html
name: 'name',
align: 'left'
},
或者使用headerRender：
//表頭內(nèi)容自定義函數(shù)
headerRender: function (column) {
return "<b>" + column.display + "</b>";
},
效果圖
自定義單元格
column的name是定義單元格鏈接到 行數(shù)據(jù) 哪一個屬性。比如說上面例子的第一行，把name配置為id，那么顯示出來應(yīng)該就是 "01"，如果配置成name，那么顯示出來就是 "部門01"。還有align參數(shù)，是確定單元格的對齊方式。
如果沒有配置render，那么單元格顯示的內(nèi)容將由name確定。
{ name: 'id', display: '序號', width: 200 },
{ name: 'name', display: '名稱', width: 300 }
上面介紹的是單元格的默認顯示方式。除了這種方式，還可以用格式器和自定義函數(shù)。
單元格內(nèi)容的顯示規(guī)則：
，如果配置了render，使用render
，如果column的type參數(shù)擴展了對應(yīng)的格式化器，那么使用格式化器進行渲染。比如定義了貨幣格式的格式化器
，最后才是使用默認顯示方式
格式化器
通過擴展$.ligerDefaults.Grid.formatters['columntype']來實現(xiàn)，columntype是column配置的type參數(shù)。比如現(xiàn)在要格式化一個貨幣格式的：
$.ligerDefaults.Grid.formatters['currency'] = function (num, column) {
//num 當前的值
//column 列信息
if (!num) return "$0.00";
num = num.toString().replace(/\$|\,/g, '');
if (isNaN(num))
num = "0.00";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num * 100 + 0.50000000001);
cents = num % 100;
num = Math.floor(num / 100).toString();
if (cents < 10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
num = num.substring(0, num.length - (4 * i + 3)) + ',' +
num.substring(num.length - (4 * i + 3));
return "$" + (((sign) ? '' : '-') + '' + num + '.' + cents);
};
這樣只要column的type配置為currency。都會使用這個函數(shù)來自定義單元格內(nèi)容
{ display: '單價', name: 'UnitPrice', align: 'right' ,type:'currency' }
效果圖
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序號', width: 100,
render: function (record, rowindex, value, column) {
//this 這里指向grid
//record 行數(shù)據(jù)
//rowindex 行索引
//value 當前的值，對應(yīng)record[column.name]
//column 列信息
return "<a href='edit.htm?id=" + value + "'>編輯</a>";
}
},
{ name: 'id', display: '序號', width: 120,
render: function (record, rowindex, value, column) {
return '<input type="button" value="Add"/><input type="button" value="Edit"/><input type="button" value="Delete"/>';
}
},
{ name: 'name', display: '名稱', width: 300 }
],
data: { Rows: griddata }
});
效果圖
editor: { type: 'spinner' }
將會使用$.ligerDefaults.Grid.editors['spinner'] 進行創(chuàng)建編輯器進行構(gòu)建。
ligerGrid內(nèi)置提供了 復(fù)選框、文本框、日期、數(shù)字調(diào)整器、下拉框 等編輯器。
效果圖
column的參數(shù)很多,這里不作一一列舉，只介紹了幾個常用的參數(shù)
更多的可以查看api: http://api.ligerui.com
排序和分頁
排序和分頁也有兩種方式。一種是本地排序和分頁。一種是服務(wù)器排序和分頁。這里只介紹本地的方式。
默認的情況。是啟用排序和分頁的。如果要取消分頁功能，如下：
usePager: false
效果圖
事件和方法
事件
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序號', width: 200 },
{ name: 'name', display: '名稱', width: 300 }
],
data: { Rows: griddata },
onSelectRow: function (rowdata, rowindex) {
//行記錄 對于數(shù)據(jù)行
//行索引 第幾行,從0開始
alert(rowdata.name);
}
});
grid.bind('SelectRow', function (rowdata, rowindex) {
//this 這里的this都是指向grid
//行記錄 對于數(shù)據(jù)行
//行索引 第幾行,從0開始
alert(rowdata.name);
});
方法
例子
<a class="l-button" href="javascript:selectRow(2)">選擇行(3)</a>
<a class="l-button" href="javascript:getSelectRow()">獲取選擇</a>
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序號', width: 200 },
{ name: 'name', display: '名稱', width: 300 }
]
});
grid.set({ data: { Rows: griddata} });
function selectRow(index) {
grid.select(index);
}
function getSelectRow() {
var rows = grid.getSelecteds();
for (var i in rows) {
alert(rows[i].name);
}
}
簡介
ligerGrid是ligerui系列插件的核心控件，用戶可以快速地創(chuàng)建一個美觀,而且功能強大的表格,支持排序、分頁、多表頭、固定列等等。
支持本地數(shù)據(jù)和服務(wù)器數(shù)據(jù)(配置data或者url)
支持排序和分頁(包括Javascript排序和分頁)
支持列的“顯示/隱藏”
支持多表頭
支持固定列
支持明細行
支持匯總行
支持單元格模板
支持編輯表格(三種編輯模式,單元格編輯、行編輯、明細編輯)
支持樹表格
支持分組
代碼
首先引入基本的css和js文件
復(fù)制代碼 代碼如下:
<link rel="stylesheet" type="text/css" />
<script src="http://www.cnblogs.com/lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script>
然后就可以使用liger Grid了
復(fù)制代碼 代碼如下:
<div id="maingrid"></div>
<script type="text/javascript">
var griddata = [
{ id: '01', name: '部門01' },
{ id: '02', name: '部門02' },
{ id: '03', name: '部門03' },
{ id: '04', name: '部門04' },
{ id: '05', name: '部門05' },
{ id: '06', name: '部門06' },
{ id: '07', name: '部門07' }
];
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序號', width: 200 },
{ name: 'name', display: '名稱', width: 300 }
],
data: { Rows: griddata }
});
</script>
效果
數(shù)據(jù)結(jié)構(gòu)
表格數(shù)據(jù)結(jié)構(gòu)
表格數(shù)據(jù)有兩個屬性,一個是Rows，一個是Total。其中Rows是一個數(shù)據(jù)數(shù)組，Total是記錄的總數(shù)。
實則是Total在使用本地數(shù)據(jù)的時候是不需要提供的。我們使用本地數(shù)據(jù)的格式可以這樣：
復(fù)制代碼 代碼如下:
{
Rows: [
{ id: '01', name: '部門01' },
{ id: '02', name: '部門02' },
{ id: '03', name: '部門03' },
{ id: '04', name: '部門04' },
{ id: '05', name: '部門05' },
{ id: '06', name: '部門06' },
{ id: '07', name: '部門07' }
]
}
id、name都是記錄的屬性,這里是可以任意自定義的,而在配置columns的時候，并不一定要配置相應(yīng)的列，只需要配置相應(yīng)顯示的列。在后續(xù)的操作中，這些屬性都可以取得。比如方法getSelected()。自定義單元格函數(shù)render。
樹形表格數(shù)據(jù)結(jié)構(gòu)
樹形結(jié)構(gòu)師在表格數(shù)據(jù)的基礎(chǔ)上多了一個children的參數(shù)，比如：
復(fù)制代碼 代碼如下:
{
Rows: [
{ id: '01', name: '部門01', children: [
{ id: '0101', name: '部門0101' },
{ id: '0102', name: '部門0102' },
{ id: '0103', name: '部門0103' }
]
},
{ id: '02', name: '部門02' },
{ id: '03', name: '部門03' },
{ id: '04', name: '部門04' },
{ id: '05', name: '部門05' },
{ id: '06', name: '部門06' },
{ id: '07', name: '部門07' }
]
}
兩種綁定數(shù)據(jù)的方式
ligerGrid綁定數(shù)據(jù)有兩種方式，一是使用本地數(shù)據(jù)，一是使用服務(wù)器數(shù)據(jù)。
在第一個例子中，我們配置了data參數(shù)，這種方式是本地方式。另一種方式是配置url參數(shù)，使用遠程數(shù)據(jù)。
配置column
表格顯示了多少個列,列寬，列單元格要顯示的內(nèi)容都是由columns屬性配置，下面是column的配置參數(shù)：
復(fù)制代碼 代碼如下:
{
display: '序號', //表頭列顯示的文本,支持html
//表頭內(nèi)容自定義函數(shù)
headerRender: function (column) {
return "<b>" + column.display + "</b>";
},
name: 'id', //單元格映射的行數(shù)據(jù)屬性
align: 'center', //單元格內(nèi)容對齊方式:left/center/right
hide: false, //是否隱藏
width: 100, //列的寬度
minWidth: 50, //列的最小寬度
isSort: true, //是否允許此列排序,默認為允許排序
isAllowHide: true, //是否允許隱藏,如果允許，將會出現(xiàn)在【顯示/隱藏列右鍵菜單】
type: 'string', //類型,用于排序
//自定義單元格渲染器
render : function (record, rowindex, value, column) {
//this 這里指向grid
//record 行數(shù)據(jù)
//rowindex 行索引
//value 當前的值，對應(yīng)record[column.name]
//column 列信息
return value; //返回此單元格顯示的HTML內(nèi)容(一般根據(jù)value和row的內(nèi)容進行組織)
},
//列匯總
totalSummary: {
align: 'center', //匯總單元格內(nèi)容對齊方式:left/center/right
type: 'count', //匯總類型sum,max,min,avg ,count。可以同時多種類型
render: function (e) { //匯總渲染器，返回html加載到單元格
//e 匯總Object(包括sum,max,min,avg,count)
return "<div>總數(shù)：" + e.count + "</div>";
}
},
//單元格編輯器
editor: {
type: 'text'
},
//多表頭支持
columns: null
},
表格的列提供了很完整的接口可以擴展。無論是內(nèi)容單元格或者是表頭單元格都可以對內(nèi)容、布局、大小進行自定義。
自定義表頭
比如表頭，我們可以把display直接設(shè)置一段html:
復(fù)制代碼 代碼如下:
{
display: '<a href="javascript:void(0)">部門</a>', //表頭列顯示的文本,支持html
name: 'name',
align: 'left'
},
或者使用headerRender：
復(fù)制代碼 代碼如下:
//表頭內(nèi)容自定義函數(shù)
headerRender: function (column) {
return "<b>" + column.display + "</b>";
},
效果圖
自定義單元格
column的name是定義單元格鏈接到 行數(shù)據(jù) 哪一個屬性。比如說上面例子的第一行，把name配置為id，那么顯示出來應(yīng)該就是 "01"，如果配置成name，那么顯示出來就是 "部門01"。還有align參數(shù)，是確定單元格的對齊方式。
如果沒有配置render，那么單元格顯示的內(nèi)容將由name確定。
復(fù)制代碼 代碼如下:
{ name: 'id', display: '序號', width: 200 },
{ name: 'name', display: '名稱', width: 300 }
上面介紹的是單元格的默認顯示方式。除了這種方式，還可以用格式器和自定義函數(shù)。
單元格內(nèi)容的顯示規(guī)則：
，如果配置了render，使用render
，如果column的type參數(shù)擴展了對應(yīng)的格式化器，那么使用格式化器進行渲染。比如定義了貨幣格式的格式化器
，最后才是使用默認顯示方式
格式化器
通過擴展$.ligerDefaults.Grid.formatters['columntype']來實現(xiàn)，columntype是column配置的type參數(shù)。比如現(xiàn)在要格式化一個貨幣格式的：
復(fù)制代碼 代碼如下:
$.ligerDefaults.Grid.formatters['currency'] = function (num, column) {
//num 當前的值
//column 列信息
if (!num) return "$0.00";
num = num.toString().replace(/\$|\,/g, '');
if (isNaN(num))
num = "0.00";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num * 100 + 0.50000000001);
cents = num % 100;
num = Math.floor(num / 100).toString();
if (cents < 10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
num = num.substring(0, num.length - (4 * i + 3)) + ',' +
num.substring(num.length - (4 * i + 3));
return "$" + (((sign) ? '' : '-') + '' + num + '.' + cents);
};
這樣只要column的type配置為currency。都會使用這個函數(shù)來自定義單元格內(nèi)容
復(fù)制代碼 代碼如下:
{ display: '單價', name: 'UnitPrice', align: 'right' ,type:'currency' }
效果圖
自定義單元格函數(shù)
自定義單元格函數(shù)是指配置column的render。我們可以組織任意的html。
復(fù)制代碼 代碼如下:
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序號', width: 100,
render: function (record, rowindex, value, column) {
//this 這里指向grid
//record 行數(shù)據(jù)
//rowindex 行索引
//value 當前的值，對應(yīng)record[column.name]
//column 列信息
return "<a href='edit.htm?id=" + value + "'>編輯</a>";
}
},
{ name: 'id', display: '序號', width: 120,
render: function (record, rowindex, value, column) {
return '<input type="button" value="Add"/><input type="button" value="Edit"/><input type="button" value="Delete"/>';
}
},
{ name: 'name', display: '名稱', width: 300 }
],
data: { Rows: griddata }
});
效果圖
單元格編輯器
所有的編輯器的構(gòu)造的定義在$.ligerDefaults.Grid.editors，比如
復(fù)制代碼 代碼如下:
editor: { type: 'spinner' }
將會使用$.ligerDefaults.Grid.editors['spinner'] 進行創(chuàng)建編輯器進行構(gòu)建。
ligerGrid內(nèi)置提供了 復(fù)選框、文本框、日期、數(shù)字調(diào)整器、下拉框 等編輯器。
效果圖
column的參數(shù)很多,這里不作一一列舉，只介紹了幾個常用的參數(shù)
更多的可以查看api: http://api.ligerui.com
排序和分頁
排序和分頁也有兩種方式。一種是本地排序和分頁。一種是服務(wù)器排序和分頁。這里只介紹本地的方式。
默認的情況。是啟用排序和分頁的。如果要取消分頁功能，如下：
復(fù)制代碼 代碼如下:
usePager: false
效果圖
事件和方法
事件
| 事件名 | 參數(shù) | 描述 |
| onAfterAddRow | (e) | 增加行后事件 |
| onAfterBeginEdit | (e) | 開始編輯后事件 |
| onAfterChangeColumnWidth | (column, newwidth) | 改變列寬度事件 |
| onAfterShowData | (data) | 顯示完數(shù)據(jù)事件 |
| onAfterSubmitEdit | (e) | 提交編輯 事件 |
| onBeforeChangeColumnWidth | (column, newwidth) | 驗證 改變列寬度 是否通過 |
| onBeforeCheckAllRow | (checked, grid element) | 選擇前事件，可以通過return false阻止操作(復(fù)選框 全選/全不選) |
| onBeforeEdit | (e) | 編輯前事件 |
| onBeforeShowData | (data) | 顯示數(shù)據(jù)前事件，可以通過reutrn false阻止操作 |
| onBeforeSubmitEdit | (e) | 驗證編輯器結(jié)果是否通過 |
| onBeginEdit | (e) | 驗證 開始編輯 是否通過 |
| onCancelEdit | (e) | 取消編輯 事件 |
| onChangeSort | () | 改變排序事件 |
| onCheckAllRow | (checked, grid element) | 選擇事件(復(fù)選框 全選/全不選) |
| onCheckRow | (checked, rowdata, rowindex, rowDomElement) | 選擇事件(復(fù)選框) |
| onContextmenu | (parm, e) | 右擊事件 |
| onDblClickRow | (rowdata, rowindex, rowDomElement) | 雙擊行事件 |
| onDragCol | (node) | 拖動列事件 |
| onError | () | 錯誤事件 |
| onLoaded | () | 加載完函數(shù) |
| onLoading | () | 加載時函數(shù) |
| 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) | 取消選擇行事件 |
例子
復(fù)制代碼 代碼如下:
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序號', width: 200 },
{ name: 'name', display: '名稱', width: 300 }
],
data: { Rows: griddata },
onSelectRow: function (rowdata, rowindex) {
//行記錄 對于數(shù)據(jù)行
//行索引 第幾行,從0開始
alert(rowdata.name);
}
});
grid.bind('SelectRow', function (rowdata, rowindex) {
//this 這里的this都是指向grid
//行記錄 對于數(shù)據(jù)行
//行索引 第幾行,從0開始
alert(rowdata.name);
});
方法
| 方法 | 參數(shù) | 描述 |
| 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) |
|
復(fù)制代碼 代碼如下:
<a class="l-button" href="javascript:selectRow(2)">選擇行(3)</a>
<a class="l-button" href="javascript:getSelectRow()">獲取選擇</a>
復(fù)制代碼 代碼如下:
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序號', width: 200 },
{ name: 'name', display: '名稱', width: 300 }
]
});
grid.set({ data: { Rows: griddata} });
function selectRow(index) {
grid.select(index);
}
function getSelectRow() {
var rows = grid.getSelecteds();
for (var i in rows) {
alert(rows[i].name);
}
}
您可能感興趣的文章:
- jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
- jQuery EasyUI API 中文文檔 - TreeGrid 樹表格使用介紹
- jQuery EasyUI中對表格進行編輯的實現(xiàn)代碼
- jQuery EasyUI API 中文文檔 - ComboGrid 組合表格
- jQuery操作表格（table）的常用方法、技巧匯總
- jQuery表格插件datatables用法總結(jié)
- jQuery 表格隔行變色代碼[修正注釋版]
- jQuery一步一步實現(xiàn)跨瀏覽器的可編輯表格，支持IE、Firefox、Safari、Chrome、Opera
- editable.js 基于jquery的表格的編輯插件
- jQuery對table表格進行增刪改查
相關(guān)文章
jQuery通過ajax快速批量提交表單數(shù)據(jù)
這篇文章主要為大家詳細介紹了jQuery通過ajax快速批量提交表單數(shù)據(jù)的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
本文通過實例代碼給大家講解了jQuery實現(xiàn)下拉菜單效果,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-06-06
這篇文章主要介紹了jQuery使用hide方法隱藏頁面上指定元素的方法,涉及jQuery使用hide隱藏元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery實現(xiàn)長按按鈕觸發(fā)事件的方法,可應(yīng)用于手機端應(yīng)用程序的開發(fā)中,非常具有實用價值,需要的朋友可以參考下2015-02-02
本文給大家分享的是一個經(jīng)常需要碰到的問題的解決方案，如何才能讓一個頁面中同時存在多個jQuery呢，這就是今天我們需要探討的話題了。2015-03-03
本篇文章是對jQuery中的按鈕組件進行了詳細的分析介紹，需要的朋友參考下2013-06-06
本篇文章主要是對Json序列化和反序列化方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
一個模仿懸停事件的方法，當鼠標移動到一個匹配的元素上面時，會觸發(fā)指定的第一個函數(shù)2014-02-02
jQuery EasyUI框架中的Datagrid數(shù)據(jù)表格組件結(jié)構(gòu)詳解
jQuery EasyUI是一個旨在輔助HTML5打造更好的Web界面的框架,而其中的Datagrid組件也是非常強大,這里我們就來看一下jQuery EasyUI框架中的Datagrid數(shù)據(jù)表格組件結(jié)構(gòu)詳解2016-06-06
jQuery實現(xiàn)在新增加的元素上添加事件方法案例分析
這篇文章主要介紹了jQuery實現(xiàn)在新增加的元素上添加事件方法,結(jié)合具體實例形式分析了jQuery針對新增加的元素添加事件的實現(xiàn)技巧與注意事項,需要的朋友可以參考下2017-02-02