jQuery LigerUI 使用教程表格篇(1)

第一个例子
简介
ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等。
支持本地数据和服务器数据(配置data或者url)
支持排序和分页(包括Javascript排序和分页)
支持列的“显示/隐藏”
支持多表头
支持固定列
支持明细行
支持汇总行
支持单元格模板
支持编辑表格(三种编辑模式,单元格编辑、行编辑、明细编辑)
支持树表格
支持分组
代码
首先引入基本的css和js文件

<link href=”http://www.cnblogs.com/lib/ligerUI/skins/Aqua/css/ligerui-all.css” 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>

效果
数据结构
表格数据结构
表格数据有两个属性,一个是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。