jQueryLigerUI使⽤教程表格篇（1）
第⼀个例⼦
简介
ligerGrid是ligerui系列插件的核⼼控件，⽤户可以快速地创建⼀个美观,⽽且功能强⼤的表格,⽀持排序、分页、多表头、固定列等等。
⽀持本地数据和服务器数据(配置data或者url)
⽀持排序和分页(包括Javascript排序和分页)
⽀持列的“显⽰/隐藏”
⽀持多表头
⽀持固定列
⽀持明细⾏
⽀持汇总⾏
⽀持单元格模板
⽀持编辑表格(三种编辑模式，单元格编辑、⾏编辑、明细编辑)
⽀持树表格
⽀持分组
代码
⾸先引⼊基本的css和js⽂件
复制代码代码如下:
<link href="wwwblogs/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script src="wwwblogs/lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="wwwblogs/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>
效果
表格数据结构
表格数据有两个属性,⼀个是Rows，⼀个是Total。其中Rows是⼀个数据数组，Total是记录的总数。
实则是Total在使⽤本地数据的时候是不需要提供的。我们使⽤本地数据的格式可以这样：
复制代码代码如下:
{
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的时候，并不⼀定要配置相应的列，只需要配置相应显⽰的列。在后续的操作中，这些属性都可以取得。⽐如⽅法getSelected()。⾃定义单元格函数render。
树形表格数据结构
树形结构师在表格数据的基础上多了⼀个children的参数，⽐如：
复制代码代码如下:
{
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' }
]
}
两种绑定数据的⽅式
ligerGrid绑定数据有两种⽅式，⼀是使⽤本地数据，⼀是使⽤服务器数据。
在第⼀个例⼦中，我们配置了data参数，这种⽅式是本地⽅式。另⼀种⽅式是配置url参数，使⽤远程数据。
配置column
表格显⽰了多少个列，列宽，列单元格要显⽰的内容都是由columns属性配置，下⾯是column的配置参数：
复制代码代码如下:
{
display: '序号', //表头列显⽰的⽂本,⽀持html
//表头内容⾃定义函数
headerRender: function (column) {
return "<b>" + column.display + "</b>";
jquery学习在线教程},
name: 'id', //单元格映射的⾏数据属性
align: 'center', //单元格内容对齐⽅式:left/center/right
hide: false, //是否隐藏
width: 100, //列的宽度
minWidth: 50, //列的最⼩宽度
isSort: true, //是否允许此列排序，默认为允许排序
isAllowHide: true, //是否允许隐藏，如果允许，将会出现在【显⽰/隐藏列右键菜单】
type: 'string', //类型,⽤于排序
/
/⾃定义单元格渲染器
render : function (record, rowindex, value, column) {
//this 这⾥指向grid
//record ⾏数据
//rowindex ⾏索引
//value 当前的值，对应record[column.name]
//column 列信息
return value; //返回此单元格显⽰的HTML内容(⼀般根据value和row的内容进⾏组织)
},
//列汇总
totalSummary: {
align: 'center', //汇总单元格内容对齐⽅式:left/center/right
type: 'count', //汇总类型sum,max,min,avg ,count。可以同时多种类型
render: function (e) { //汇总渲染器，返回html加载到单元格
//e 汇总Object(包括sum,max,min,avg,count)
return "<div>总数：" + e.count + "</div>";
}
},
//单元格编辑器
editor: {
type: 'text'
},
/
/多表头⽀持
columns: null
},
表格的列提供了很完整的接⼝可以扩展。⽆论是内容单元格或者是表头单元格都可以对内容、布局、⼤⼩进⾏⾃定义。
⾃定义表头
⽐如表头，我们可以把display直接设置⼀段html:
复制代码代码如下:
{
display: '<a href="javascript:void(0)">部门</a>', //表头列显⽰的⽂本,⽀持html
name: 'name',
align: 'left'
},
或者使⽤headerRender：
复制代码代码如下:
//表头内容⾃定义函数
headerRender: function (column) {
return "<b>" + column.display + "</b>";
},
效果图
column的name是定义单元格链接到⾏数据哪⼀个属性。⽐如说上⾯例⼦的第⼀⾏，把name配置为id，那么显⽰出来应该就是 "01"，如果配置成name，那么显⽰出来就是 "部门01"。还有align参数，是确定单元格的对齐⽅式。
如果没有配置render，那么单元格显⽰的内容将由name确定。
复制代码代码如下:
{ name: 'id', display: '序号', width: 200 },
{ name: 'name', display: '名称', width: 300 }
上⾯介绍的是单元格的默认显⽰⽅式。除了这种⽅式，还可以⽤格式器和⾃定义函数。
单元格内容的显⽰规则：
，如果配置了render，使⽤render
，如果column的type参数扩展了对应的格式化器，那么使⽤格式化器进⾏渲染。⽐如定义了货币格式的格式化器
，最后才是使⽤默认显⽰⽅式
格式化器
通过扩展$.ligerDefaults.Grid.formatters['columntype']来实现，columntype是column配置的type参数。⽐如现在要格式化⼀个货币格式的：
复制代码代码如下:
$.ligerDefaults.Grid.formatters['currency'] = function (num, column) {
//num 当前的值
//column 列信息
if (!num) return "$0.00";
num = String().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。都会使⽤这个函数来⾃定义单元格内容
复制代码代码如下:
{ display: '单价', name: 'UnitPrice', align: 'right' ,type:'currency' }
效果图
⾃定义单元格函数是指配置column的render。我们可以组织任意的html。
复制代码代码如下:
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序号', width: 100,
render: function (record, rowindex, value, column) {
//this 这⾥指向grid
//record ⾏数据
//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'] 进⾏创建编辑器进⾏构建。
ligerGrid内置提供了复选框、⽂本框、⽇期、数字调整器、下拉框等编辑器。
效果图
column的参数很多，这⾥不作⼀⼀列举，只介绍了⼏个常⽤的参数
更多的可以查看api: api.ligerui
排序和分页也有两种⽅式。⼀种是本地排序和分页。⼀种是服务器排序和分页。这⾥只介绍本地的⽅式。
默认的情况。是启⽤排序和分页的。如果要取消分页功能，如下：
复制代码代码如下:
usePager: false
效果图
事件和⽅法
事件
事件名参数描述
(e)增加⾏后事件
(e)开始编辑后事件
(column, newwidth)改变列宽度事件
(data)显⽰完数据事件
(e)提交编辑事件
(column, newwidth)验证改变列宽度是否通过
(checked, grid element)选择前事件，可以通过return false阻⽌操作(复选框全选/全不选)
(e)编辑前事件
(data)显⽰数据前事件，可以通过reutrn false阻⽌操作
(e)验证编辑器结果是否通过
(e)验证开始编辑是否通过
(e)取消编辑事件
()改变排序事件
(checked, grid element)选择事件(复选框全选/全不选)
(checked, rowdata, rowindex, rowDomElement)选择事件(复选框)
(parm, e)右击事件
(rowdata, rowindex, rowDomElement)双击⾏事件
(node)拖动列事件
()错误事件
()加载完函数
()加载时函数
()刷新事件，可以通过return false来阻⽌操作
(rowdata, rowindex, rowDomElement)选择⾏事件
()提交前事件
()成功事件
()第⼀页，可以通过return false来阻⽌操作
()切换列事件
()最后⼀页，可以通过return false来阻⽌操作
()下⼀页，可以通过return false来阻⽌操作
()上⼀页，可以通过return false来阻⽌操作
(rowdata, rowindex, rowDomElement)取消选择⾏事件
复制代码代码如下:
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序号', width: 200 },
{ name: 'name', display: '名称', width: 300 }
]
,

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。