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

jQuery LigerUI 使用教程表格篇(1)ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等第一个例子简介ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等。

支持本地数据和服务器数据(配置data或者url)支持排序和分页(包括Javascript排序和分页)支持列的“显示/隐藏”支持多表头支持固定列支持明细行支持汇总行支持单元格模板支持编辑表格(三种编辑模式,单元格编辑、行编辑、明细编辑)支持树表格支持分组代码首先引入基本的css和js文件复制代码代码如下:<link href=" lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /><script src="lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script> <script src="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>";},name: 'id', //单元格映射的行数据属性align: 'center', //单元格内容对齐方式:left/center/righthide: false, //是否隐藏width: 100, //列的宽度minWidth: 50, //列的最小宽度isSort: true, //是否允许此列排序,默认为允许排序isAllowHide: true, //是否允许隐藏,如果允许，将会出现在【显示/隐藏列右键菜单】type: 'string', //类型,用于排序//自定义单元格渲染器render : function (record, rowindex, value, column) {//this 这里指向grid//record 行数据//rowindex 行索引//value 当前的值，对应record[]//column 列信息return value; //返回此单元格显示的HTML内容(一般根据value和row的内容进行组织) },//列汇总totalSummary: {align: 'center', //汇总单元格内容对齐方式:left/center/righttype: '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>', //表头列显示的文本,支持htmlname: '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参数扩展了对应的格式化器，那么使用格式化器进行渲染。

比如定义了货币格式的格式化器，最后才是使用默认显示方式格式化器通过扩展$formatters['columntype']来实现，columntype是column配置的type参数。