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

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

ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等

第一个例子

简介

ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等。

支持本地数据和服务器数据(配置data或者url)

支持排序和分页(包括Javascript排序和分页)

支持列的“显示/隐藏”

支持多表头

支持固定列

支持明细行

支持汇总行

支持单元格模板

支持编辑表格(三种编辑模式,单元格编辑、行编辑、明细编辑)

支持树表格

支持分组

代码

首先引入基本的css和js文件

复制代码代码如下:

然后就可以使用liger Grid了

复制代码代码如下:

效果

数据结构

表格数据结构

表格数据有两个属性,一个是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 "" + column.display + "";

},

name: 'id', //单元格映射的行数据属性

align: 'center', //单元格内容对齐方式:left/center/right

hide: false, //是否隐藏

width: 100, //列的宽度

minWidth: 50, //列的最小宽度

isSort: true, //是否允许此列排序,默认为允许排序