jQuery LigerUI 使用教程表格篇(1)
更新時(shí)間：2012年01月18日 00:36:55 作者：
ligerGrid是ligerui系列插件的核心控件，用戶可以快速地創(chuàng)建一個(gè)美觀,而且功能強(qiáng)大的表格,支持排序、分頁(yè)、多表頭、固定列等等
第一個(gè)例子
簡(jiǎn)介
ligerGrid是ligerui系列插件的核心控件，用戶可以快速地創(chuàng)建一個(gè)美觀,而且功能強(qiáng)大的表格,支持排序、分頁(yè)、多表頭、固定列等等。
支持本地?cái)?shù)據(jù)和服務(wù)器數(shù)據(jù)(配置data或者url)
支持排序和分頁(yè)(包括Javascript排序和分頁(yè))
支持列的“顯示/隱藏”
支持多表頭
支持固定列
支持明細(xì)行
支持匯總行
支持單元格模板
支持編輯表格(三種編輯模式,單元格編輯、行編輯、明細(xì)編輯)
支持樹表格
支持分組
代碼
首先引入基本的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: '序號(hào)', width: 200 },
{ name: 'name', display: '名稱', width: 300 }
],
data: { Rows: griddata }
});
</script>
效果
數(shù)據(jù)結(jié)構(gòu)
表格數(shù)據(jù)結(jié)構(gòu)
表格數(shù)據(jù)有兩個(gè)屬性,一個(gè)是Rows，一個(gè)是Total。其中Rows是一個(gè)數(shù)據(jù)數(shù)組，Total是記錄的總數(shù)。
實(shí)則是Total在使用本地?cái)?shù)據(jù)的時(shí)候是不需要提供的。我們使用本地?cái)?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的時(shí)候，并不一定要配置相應(yīng)的列，只需要配置相應(yīng)顯示的列。在后續(xù)的操作中，這些屬性都可以取得。比如方法getSelected()。自定義單元格函數(shù)render。
樹形表格數(shù)據(jù)結(jié)構(gòu)
樹形結(jié)構(gòu)師在表格數(shù)據(jù)的基礎(chǔ)上多了一個(gè)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ù)有兩種方式，一是使用本地?cái)?shù)據(jù)，一是使用服務(wù)器數(shù)據(jù)。
在第一個(gè)例子中，我們配置了data參數(shù)，這種方式是本地方式。另一種方式是配置url參數(shù)，使用遠(yuǎn)程數(shù)據(jù)。
配置column
表格顯示了多少個(gè)列,列寬，列單元格要顯示的內(nèi)容都是由columns屬性配置，下面是column的配置參數(shù)：
{
display: '序號(hào)', //表頭列顯示的文本,支持html
//表頭內(nèi)容自定義函數(shù)
headerRender: function (column) {
return "<b>" + column.display + "</b>";
},
name: 'id', //單元格映射的行數(shù)據(jù)屬性
align: 'center', //單元格內(nèi)容對(duì)齊方式:left/center/right
hide: false, //是否隱藏
width: 100, //列的寬度
minWidth: 50, //列的最小寬度
isSort: true, //是否允許此列排序,默認(rèn)為允許排序
isAllowHide: true, //是否允許隱藏,如果允許，將會(huì)出現(xiàn)在【顯示/隱藏列右鍵菜單】
type: 'string', //類型,用于排序
//自定義單元格渲染器
render : function (record, rowindex, value, column) {
//this 這里指向grid
//record 行數(shù)據(jù)
//rowindex 行索引
//value 當(dāng)前的值，對(duì)應(yīng)record[column.name]
//column 列信息
return value; //返回此單元格顯示的HTML內(nèi)容(一般根據(jù)value和row的內(nèi)容進(jìn)行組織)
},
//列匯總
totalSummary: {
align: 'center', //匯總單元格內(nèi)容對(duì)齊方式:left/center/right
type: 'count', //匯總類型sum,max,min,avg ,count。可以同時(shí)多種類型
render: function (e) { //匯總渲染器，返回html加載到單元格
//e 匯總Object(包括sum,max,min,avg,count)
return "<div>總數(shù)：" + e.count + "</div>";
}
},
//單元格編輯器
editor: {
type: 'text'
},
//多表頭支持
columns: null
},
表格的列提供了很完整的接口可以擴(kuò)展。無(wú)論是內(nèi)容單元格或者是表頭單元格都可以對(duì)內(nèi)容、布局、大小進(jìn)行自定義。
自定義表頭
比如表頭，我們可以把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ù) 哪一個(gè)屬性。比如說(shuō)上面例子的第一行，把name配置為id，那么顯示出來(lái)應(yīng)該就是 "01"，如果配置成name，那么顯示出來(lái)就是 "部門01"。還有align參數(shù)，是確定單元格的對(duì)齊方式。
如果沒有配置render，那么單元格顯示的內(nèi)容將由name確定。
{ name: 'id', display: '序號(hào)', width: 200 },
{ name: 'name', display: '名稱', width: 300 }
上面介紹的是單元格的默認(rèn)顯示方式。除了這種方式，還可以用格式器和自定義函數(shù)。
單元格內(nèi)容的顯示規(guī)則：
，如果配置了render，使用render
，如果column的type參數(shù)擴(kuò)展了對(duì)應(yīng)的格式化器，那么使用格式化器進(jìn)行渲染。比如定義了貨幣格式的格式化器
，最后才是使用默認(rèn)顯示方式
格式化器
通過(guò)擴(kuò)展$.ligerDefaults.Grid.formatters['columntype']來(lái)實(shí)現(xiàn)，columntype是column配置的type參數(shù)。比如現(xiàn)在要格式化一個(gè)貨幣格式的：
$.ligerDefaults.Grid.formatters['currency'] = function (num, column) {
//num 當(dāng)前的值
//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。都會(huì)使用這個(gè)函數(shù)來(lái)自定義單元格內(nèi)容
{ display: '單價(jià)', name: 'UnitPrice', align: 'right' ,type:'currency' }
效果圖
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序號(hào)', width: 100,
render: function (record, rowindex, value, column) {
//this 這里指向grid
//record 行數(shù)據(jù)
//rowindex 行索引
//value 當(dāng)前的值，對(duì)應(yīng)record[column.name]
//column 列信息
return "<a href='edit.htm?id=" + value + "'>編輯</a>";
}
},
{ name: 'id', display: '序號(hào)', 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' }
將會(huì)使用$.ligerDefaults.Grid.editors['spinner'] 進(jìn)行創(chuàng)建編輯器進(jìn)行構(gòu)建。
ligerGrid內(nèi)置提供了 復(fù)選框、文本框、日期、數(shù)字調(diào)整器、下拉框 等編輯器。
效果圖
column的參數(shù)很多,這里不作一一列舉，只介紹了幾個(gè)常用的參數(shù)
更多的可以查看api: http://api.ligerui.com
排序和分頁(yè)
排序和分頁(yè)也有兩種方式。一種是本地排序和分頁(yè)。一種是服務(wù)器排序和分頁(yè)。這里只介紹本地的方式。
默認(rèn)的情況。是啟用排序和分頁(yè)的。如果要取消分頁(yè)功能，如下：
usePager: false
效果圖
事件和方法
事件
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序號(hào)', width: 200 },
{ name: 'name', display: '名稱', width: 300 }
],
data: { Rows: griddata },
onSelectRow: function (rowdata, rowindex) {
//行記錄 對(duì)于數(shù)據(jù)行
//行索引 第幾行,從0開始
alert(rowdata.name);
}
});
grid.bind('SelectRow', function (rowdata, rowindex) {
//this 這里的this都是指向grid
//行記錄 對(duì)于數(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: '序號(hào)', 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);
}
}
簡(jiǎn)介
ligerGrid是ligerui系列插件的核心控件，用戶可以快速地創(chuàng)建一個(gè)美觀,而且功能強(qiáng)大的表格,支持排序、分頁(yè)、多表頭、固定列等等。
支持本地?cái)?shù)據(jù)和服務(wù)器數(shù)據(jù)(配置data或者url)
支持排序和分頁(yè)(包括Javascript排序和分頁(yè))
支持列的“顯示/隱藏”
支持多表頭
支持固定列
支持明細(xì)行
支持匯總行
支持單元格模板
支持編輯表格(三種編輯模式,單元格編輯、行編輯、明細(xì)編輯)
支持樹表格
支持分組
代碼
首先引入基本的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: '序號(hào)', width: 200 },
{ name: 'name', display: '名稱', width: 300 }
],
data: { Rows: griddata }
});
</script>
效果
數(shù)據(jù)結(jié)構(gòu)
表格數(shù)據(jù)結(jié)構(gòu)
表格數(shù)據(jù)有兩個(gè)屬性,一個(gè)是Rows，一個(gè)是Total。其中Rows是一個(gè)數(shù)據(jù)數(shù)組，Total是記錄的總數(shù)。
實(shí)則是Total在使用本地?cái)?shù)據(jù)的時(shí)候是不需要提供的。我們使用本地?cái)?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的時(shí)候，并不一定要配置相應(yīng)的列，只需要配置相應(yīng)顯示的列。在后續(xù)的操作中，這些屬性都可以取得。比如方法getSelected()。自定義單元格函數(shù)render。
樹形表格數(shù)據(jù)結(jié)構(gòu)
樹形結(jié)構(gòu)師在表格數(shù)據(jù)的基礎(chǔ)上多了一個(gè)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ù)有兩種方式，一是使用本地?cái)?shù)據(jù)，一是使用服務(wù)器數(shù)據(jù)。
在第一個(gè)例子中，我們配置了data參數(shù)，這種方式是本地方式。另一種方式是配置url參數(shù)，使用遠(yuǎn)程數(shù)據(jù)。
配置column
表格顯示了多少個(gè)列,列寬，列單元格要顯示的內(nèi)容都是由columns屬性配置，下面是column的配置參數(shù)：
復(fù)制代碼 代碼如下:
{
display: '序號(hào)', //表頭列顯示的文本,支持html
//表頭內(nèi)容自定義函數(shù)
headerRender: function (column) {
return "<b>" + column.display + "</b>";
},
name: 'id', //單元格映射的行數(shù)據(jù)屬性
align: 'center', //單元格內(nèi)容對(duì)齊方式:left/center/right
hide: false, //是否隱藏
width: 100, //列的寬度
minWidth: 50, //列的最小寬度
isSort: true, //是否允許此列排序,默認(rèn)為允許排序
isAllowHide: true, //是否允許隱藏,如果允許，將會(huì)出現(xiàn)在【顯示/隱藏列右鍵菜單】
type: 'string', //類型,用于排序
//自定義單元格渲染器
render : function (record, rowindex, value, column) {
//this 這里指向grid
//record 行數(shù)據(jù)
//rowindex 行索引
//value 當(dāng)前的值，對(duì)應(yīng)record[column.name]
//column 列信息
return value; //返回此單元格顯示的HTML內(nèi)容(一般根據(jù)value和row的內(nèi)容進(jìn)行組織)
},
//列匯總
totalSummary: {
align: 'center', //匯總單元格內(nèi)容對(duì)齊方式:left/center/right
type: 'count', //匯總類型sum,max,min,avg ,count。可以同時(shí)多種類型
render: function (e) { //匯總渲染器，返回html加載到單元格
//e 匯總Object(包括sum,max,min,avg,count)
return "<div>總數(shù)：" + e.count + "</div>";
}
},
//單元格編輯器
editor: {
type: 'text'
},
//多表頭支持
columns: null
},
表格的列提供了很完整的接口可以擴(kuò)展。無(wú)論是內(nèi)容單元格或者是表頭單元格都可以對(duì)內(nèi)容、布局、大小進(jìn)行自定義。
自定義表頭
比如表頭，我們可以把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ù) 哪一個(gè)屬性。比如說(shuō)上面例子的第一行，把name配置為id，那么顯示出來(lái)應(yīng)該就是 "01"，如果配置成name，那么顯示出來(lái)就是 "部門01"。還有align參數(shù)，是確定單元格的對(duì)齊方式。
如果沒有配置render，那么單元格顯示的內(nèi)容將由name確定。
復(fù)制代碼 代碼如下:
{ name: 'id', display: '序號(hào)', width: 200 },
{ name: 'name', display: '名稱', width: 300 }
上面介紹的是單元格的默認(rèn)顯示方式。除了這種方式，還可以用格式器和自定義函數(shù)。
單元格內(nèi)容的顯示規(guī)則：
，如果配置了render，使用render
，如果column的type參數(shù)擴(kuò)展了對(duì)應(yīng)的格式化器，那么使用格式化器進(jìn)行渲染。比如定義了貨幣格式的格式化器
，最后才是使用默認(rèn)顯示方式
格式化器
通過(guò)擴(kuò)展$.ligerDefaults.Grid.formatters['columntype']來(lái)實(shí)現(xiàn)，columntype是column配置的type參數(shù)。比如現(xiàn)在要格式化一個(gè)貨幣格式的：
復(fù)制代碼 代碼如下:
$.ligerDefaults.Grid.formatters['currency'] = function (num, column) {
//num 當(dāng)前的值
//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。都會(huì)使用這個(gè)函數(shù)來(lái)自定義單元格內(nèi)容
復(fù)制代碼 代碼如下:
{ display: '單價(jià)', name: 'UnitPrice', align: 'right' ,type:'currency' }
效果圖
自定義單元格函數(shù)
自定義單元格函數(shù)是指配置column的render。我們可以組織任意的html。
復(fù)制代碼 代碼如下:
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序號(hào)', width: 100,
render: function (record, rowindex, value, column) {
//this 這里指向grid
//record 行數(shù)據(jù)
//rowindex 行索引
//value 當(dāng)前的值，對(duì)應(yīng)record[column.name]
//column 列信息
return "<a href='edit.htm?id=" + value + "'>編輯</a>";
}
},
{ name: 'id', display: '序號(hào)', 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' }
將會(huì)使用$.ligerDefaults.Grid.editors['spinner'] 進(jìn)行創(chuàng)建編輯器進(jìn)行構(gòu)建。
ligerGrid內(nèi)置提供了 復(fù)選框、文本框、日期、數(shù)字調(diào)整器、下拉框 等編輯器。
效果圖
column的參數(shù)很多,這里不作一一列舉，只介紹了幾個(gè)常用的參數(shù)
更多的可以查看api: http://api.ligerui.com
排序和分頁(yè)
排序和分頁(yè)也有兩種方式。一種是本地排序和分頁(yè)。一種是服務(wù)器排序和分頁(yè)。這里只介紹本地的方式。
默認(rèn)的情況。是啟用排序和分頁(yè)的。如果要取消分頁(yè)功能，如下：
復(fù)制代碼 代碼如下:
usePager: false
效果圖
事件和方法
事件
| 事件名 | 參數(shù) | 描述 |
| onAfterAddRow | (e) | 增加行后事件 |
| onAfterBeginEdit | (e) | 開始編輯后事件 |
| onAfterChangeColumnWidth | (column, newwidth) | 改變列寬度事件 |
| onAfterShowData | (data) | 顯示完數(shù)據(jù)事件 |
| onAfterSubmitEdit | (e) | 提交編輯 事件 |
| onBeforeChangeColumnWidth | (column, newwidth) | 驗(yàn)證 改變列寬度 是否通過(guò) |
| onBeforeCheckAllRow | (checked, grid element) | 選擇前事件，可以通過(guò)return false阻止操作(復(fù)選框 全選/全不選) |
| onBeforeEdit | (e) | 編輯前事件 |
| onBeforeShowData | (data) | 顯示數(shù)據(jù)前事件，可以通過(guò)reutrn false阻止操作 |
| onBeforeSubmitEdit | (e) | 驗(yàn)證編輯器結(jié)果是否通過(guò) |
| onBeginEdit | (e) | 驗(yàn)證 開始編輯 是否通過(guò) |
| onCancelEdit | (e) | 取消編輯 事件 |
| onChangeSort | () | 改變排序事件 |
| onCheckAllRow | (checked, grid element) | 選擇事件(復(fù)選框 全選/全不選) |
| onCheckRow | (checked, rowdata, rowindex, rowDomElement) | 選擇事件(復(fù)選框) |
| onContextmenu | (parm, e) | 右擊事件 |
| onDblClickRow | (rowdata, rowindex, rowDomElement) | 雙擊行事件 |
| onDragCol | (node) | 拖動(dòng)列事件 |
| onError | () | 錯(cuò)誤事件 |
| onLoaded | () | 加載完函數(shù) |
| onLoading | () | 加載時(shí)函數(shù) |
| onReload | () | 刷新事件，可以通過(guò)return false來(lái)阻止操作 |
| onSelectRow | (rowdata, rowindex, rowDomElement) | 選擇行事件 |
| onSubmit | () | 提交前事件 |
| onSuccess | () | 成功事件 |
| onToFirst | () | 第一頁(yè)，可以通過(guò)return false來(lái)阻止操作 |
| onToggleCol | () | 切換列事件 |
| onToLast | () | 最后一頁(yè)，可以通過(guò)return false來(lái)阻止操作 |
| onToNext | () | 下一頁(yè)，可以通過(guò)return false來(lái)阻止操作 |
| onToPrev | () | 上一頁(yè)，可以通過(guò)return false來(lái)阻止操作 |
| onUnSelectRow | (rowdata, rowindex, rowDomElement) | 取消選擇行事件 |
例子
復(fù)制代碼 代碼如下:
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序號(hào)', width: 200 },
{ name: 'name', display: '名稱', width: 300 }
],
data: { Rows: griddata },
onSelectRow: function (rowdata, rowindex) {
//行記錄 對(duì)于數(shù)據(jù)行
//行索引 第幾行,從0開始
alert(rowdata.name);
}
});
grid.bind('SelectRow', function (rowdata, rowindex) {
//this 這里的this都是指向grid
//行記錄 對(duì)于數(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: '序號(hào)', 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中對(duì)表格進(jìn)行編輯的實(shí)現(xiàn)代碼
- jQuery EasyUI API 中文文檔 - ComboGrid 組合表格
- jQuery操作表格（table）的常用方法、技巧匯總
- jQuery表格插件datatables用法總結(jié)
- jQuery 表格隔行變色代碼[修正注釋版]
- jQuery一步一步實(shí)現(xiàn)跨瀏覽器的可編輯表格，支持IE、Firefox、Safari、Chrome、Opera
- editable.js 基于jquery的表格的編輯插件
- jQuery對(duì)table表格進(jìn)行增刪改查
相關(guān)文章
jQuery內(nèi)容選擇器與表單選擇器實(shí)例分析
這篇文章主要介紹了jQuery內(nèi)容選擇器與表單選擇器,結(jié)合實(shí)例形式分析了jQuery內(nèi)容選擇器與表單選擇器的功能、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06
Jquery+Ajax+PHP+MySQL實(shí)現(xiàn)分類列表管理(下)
本文將采用Jquery+Ajax+PHP+MySQL來(lái)實(shí)現(xiàn)一個(gè)客戶分類列表的管理，如何利用Ajax和Json技術(shù)讓用戶操作起來(lái)覺得更輕松，感興趣的小伙伴們可以參考一下2015-10-10
jQuery實(shí)現(xiàn)的簡(jiǎn)單拖動(dòng)層示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單拖動(dòng)層,可實(shí)現(xiàn)響應(yīng)鼠標(biāo)拖動(dòng)div層及動(dòng)態(tài)顯示坐標(biāo)值的功能,涉及jQuery鼠標(biāo)響應(yīng)及頁(yè)面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
新浪網(wǎng)易的評(píng)論塊制作 因?yàn)?textarea里面不能放圖片，所以和新浪的做法一樣，選用iframe放內(nèi)容，然后隱藏一個(gè) textarea用于提交。2010-07-07
jquery 模擬雅虎首頁(yè)的點(diǎn)擊對(duì)話框效果
jquery模擬雅虎首頁(yè)的點(diǎn)擊對(duì)話框效果實(shí)現(xiàn)代碼，喜歡的朋友可以參考下。2010-04-04
淺談jquery點(diǎn)擊label觸發(fā)2次的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談jquery點(diǎn)擊label觸發(fā)2次的問(wèn)題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
下面小編就為大家?guī)?lái)一篇使用JQuery選擇HTML遍歷函數(shù)的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
jquery實(shí)現(xiàn)彈出層登錄和全屏層注冊(cè)特效
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)彈出層登錄和全屏層注冊(cè)特效，推薦給大家，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
jquery果凍抖動(dòng)效果實(shí)現(xiàn)方法
這篇文章主要介紹了jquery果凍抖動(dòng)效果實(shí)現(xiàn)方法,涉及animate方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery實(shí)現(xiàn)拖拽效果插件的方法,較為詳細(xì)的分析了jQuery拖拽效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-03-03