jQuery LigerUI 使用教程表格篇(1)
更新時間：2012年01月18日 00:36:55 作者：
ligerGrid是ligerui系列插件的核心控件，用戶可以快速地創(chuàng)建一個美觀,而且功能強大的表格,支持排序、分頁、多表頭、固定列等等
第一個例子
簡介
ligerGrid是ligerui系列插件的核心控件，用戶可以快速地創(chuàng)建一個美觀,而且功能強大的表格,支持排序、分頁、多表頭、固定列等等。
支持本地數(shù)據(jù)和服務器數(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ù)結構
表格數(shù)據(jù)結構
表格數(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的時候，并不一定要配置相應的列，只需要配置相應顯示的列。在后續(xù)的操作中，這些屬性都可以取得。比如方法getSelected()。自定義單元格函數(shù)render。
樹形表格數(shù)據(jù)結構
樹形結構師在表格數(shù)據(jù)的基礎上多了一個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ù)，一是使用服務器數(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 當前的值，對應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?？梢酝瑫r多種類型
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直接設置一段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，那么顯示出來應該就是 "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ù)擴展了對應的格式化器，那么使用格式化器進行渲染。比如定義了貨幣格式的格式化器
，最后才是使用默認顯示方式
格式化器
通過擴展$.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 當前的值，對應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)建編輯器進行構建。
ligerGrid內(nèi)置提供了 復選框、文本框、日期、數(shù)字調整器、下拉框 等編輯器。
效果圖
column的參數(shù)很多,這里不作一一列舉，只介紹了幾個常用的參數(shù)
更多的可以查看api: http://api.ligerui.com
排序和分頁
排序和分頁也有兩種方式。一種是本地排序和分頁。一種是服務器排序和分頁。這里只介紹本地的方式。
默認的情況。是啟用排序和分頁的。如果要取消分頁功能，如下：
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ù)和服務器數(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ù)結構
表格數(shù)據(jù)結構
表格數(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的時候，并不一定要配置相應的列，只需要配置相應顯示的列。在后續(xù)的操作中，這些屬性都可以取得。比如方法getSelected()。自定義單元格函數(shù)render。
樹形表格數(shù)據(jù)結構
樹形結構師在表格數(shù)據(jù)的基礎上多了一個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ù)，一是使用服務器數(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 當前的值，對應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?？梢酝瑫r多種類型
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直接設置一段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，那么顯示出來應該就是 "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ù)擴展了對應的格式化器，那么使用格式化器進行渲染。比如定義了貨幣格式的格式化器
，最后才是使用默認顯示方式
格式化器
通過擴展$.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' }
效果圖
自定義單元格函數(shù)
自定義單元格函數(shù)是指配置column的render。我們可以組織任意的html。
復制代碼 代碼如下:
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序號', width: 100,
render: function (record, rowindex, value, column) {
//this 這里指向grid
//record 行數(shù)據(jù)
//rowindex 行索引
//value 當前的值，對應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 }
});
效果圖
單元格編輯器
所有的編輯器的構造的定義在$.ligerDefaults.Grid.editors，比如
復制代碼 代碼如下:
editor: { type: 'spinner' }
將會使用$.ligerDefaults.Grid.editors['spinner'] 進行創(chuàng)建編輯器進行構建。
ligerGrid內(nèi)置提供了 復選框、文本框、日期、數(shù)字調整器、下拉框 等編輯器。
效果圖
column的參數(shù)很多,這里不作一一列舉，只介紹了幾個常用的參數(shù)
更多的可以查看api: http://api.ligerui.com
排序和分頁
排序和分頁也有兩種方式。一種是本地排序和分頁。一種是服務器排序和分頁。這里只介紹本地的方式。
默認的情況。是啟用排序和分頁的。如果要取消分頁功能，如下：
復制代碼 代碼如下:
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阻止操作(復選框 全選/全不選) |
| onBeforeEdit | (e) | 編輯前事件 |
| onBeforeShowData | (data) | 顯示數(shù)據(jù)前事件，可以通過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 | () | 加載完函數(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) | 取消選擇行事件 |
例子
復制代碼 代碼如下:
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) |
|
復制代碼 代碼如下:
<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);
}
}
您可能感興趣的文章:
- jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
- jQuery EasyUI API 中文文檔 - TreeGrid 樹表格使用介紹
- jQuery EasyUI中對表格進行編輯的實現(xiàn)代碼
- jQuery EasyUI API 中文文檔 - ComboGrid 組合表格
- jQuery操作表格（table）的常用方法、技巧匯總
- jQuery表格插件datatables用法總結
- jQuery 表格隔行變色代碼[修正注釋版]
- jQuery一步一步實現(xiàn)跨瀏覽器的可編輯表格，支持IE、Firefox、Safari、Chrome、Opera
- editable.js 基于jquery的表格的編輯插件
- jQuery對table表格進行增刪改查
相關文章
這篇文章主要介紹了jQuery內(nèi)容選擇器與表單選擇器,結合實例形式分析了jQuery內(nèi)容選擇器與表單選擇器的功能、用法及相關操作注意事項,需要的朋友可以參考下2019-06-06
Jquery+Ajax+PHP+MySQL實現(xiàn)分類列表管理(下)
本文將采用Jquery+Ajax+PHP+MySQL來實現(xiàn)一個客戶分類列表的管理，如何利用Ajax和Json技術讓用戶操作起來覺得更輕松，感興趣的小伙伴們可以參考一下2015-10-10
這篇文章主要介紹了jQuery實現(xiàn)的簡單拖動層,可實現(xiàn)響應鼠標拖動div層及動態(tài)顯示坐標值的功能,涉及jQuery鼠標響應及頁面元素屬性相關操作技巧,需要的朋友可以參考下2017-02-02
新浪網(wǎng)易的評論塊制作 因為 textarea里面不能放圖片，所以和新浪的做法一樣，選用iframe放內(nèi)容，然后隱藏一個 textarea用于提交。2010-07-07
jquery模擬雅虎首頁的點擊對話框效果實現(xiàn)代碼，喜歡的朋友可以參考下。2010-04-04
下面小編就為大家?guī)硪黄獪\談jquery點擊label觸發(fā)2次的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
下面小編就為大家?guī)硪黄褂肑Query選擇HTML遍歷函數(shù)的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要為大家詳細介紹了jquery實現(xiàn)彈出層登錄和全屏層注冊特效，推薦給大家，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
這篇文章主要介紹了jquery果凍抖動效果實現(xiàn)方法,涉及animate方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery實現(xiàn)拖拽效果插件的方法,較為詳細的分析了jQuery拖拽效果的實現(xiàn)技巧,需要的朋友可以參考下2015-03-03