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

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

第一个例子简介ligeruiGrid是liger睿系列插件的核心控件。用户可以快速创建一个美观且功能强大的表格，支持排序、分页、多表头、固定列等。

支持本地数据和服务器数据(配置数据或url)，支持排序和分页(包括Javascript排序和分页)，支持列的“显示/隐藏”，支持多个表头，支持固定列，支持明细行，支持汇总行，支持单元格模板，支持编辑表(三种编辑模式，单元格编辑，行编辑，明细编辑)支持树形表支持分组代码。先介绍一下基本的css和js文件复制代码如下：link href= 3358 www.cnblogs.com/lib/ligerui/skins/aqua/css/lige Rui-all . CSS rel= style sheet type= text/CSS /Script src= http://www . cn blogs . com/lib/jquery/jquery-1 . 5 . 2 . min . js type= text/JavaScript /Script src= http://www.cnblogs.com/lib/ligerui/js/ligerui.min.js type= text/JavaScript /Script然后就可以使用liger Grid了。复制代码如下：div ID= main grid /Script type= text/JavaScript vargriddata=[{ ID: 01 ，名称：部门01 }，{id: 02 ，名称：部门02 }，{id: 03 ，名称：部门03 }，{id: 04 名称：部门04 }，{id: 05 ，名称：部门05 }，{id: 06 ，名称：部门06 }，{id: 07 ，名称：部门07

Var=$ (# maingrid )。ligergrid ({columns: [{name: id ，display:序列号，width: 200}，{name: name ，display: name ，width: 300}]，data:{ rows:/script effect

数据结构

表数据结构表数据有两个属性，一个是Rows，一个是Total。其中Rows是数据数组，Total是记录总数。其实Total在使用的时候是不需要提供本地数据的。我们使用的本地数据的格式可以是这样的：复制代码如下：{Rows: [{id: 01 ，name: department 01 }，{id: 02 ，name: department 02 }，{id: 03 ，name: department 03}，{ID: {id: 05 ，name: department 05 }，{id: 06 ，name: department 06 }，{id: 07 ，name: department 07 } } ID和name都是记录的属性，可以任意定制。但是，当配置列时，在后续的操作中，可以获得这些属性。例如getSelected()方法。自定义单元格函数呈现。表数据结构树架构师在表数据中增加了一个子项的参数，例如复制代码如下：{行：[{id: 01 ，名称：部门01 ，子项：[{id: 0101 ，名称：部门0101 }，{id: 0102 001 名称：部门0102 }，{id: 0103 ，名称：部门0103}，{ID: 02 ，名称：部门02 }，{id: 03 ，名称：部门003 name: Department 07}}两种绑定数据的方式ligerGrid有两种绑定数据的方式，一种是使用本地数据，一种是使用服务器数据。在第一个例子中，我们配置了数据参数，它是本地的。另一种方法是配置url参数并使用远程数据。

自定义单元格

自定义单元格功能是指配置列的渲染。我们可以组织任意的html。复制代码如下：vargrid=$ (# maingrid )。ligergrid ({columns: [{name: id ，display: serial number ，width: 100，render: function (record，rowindex，value，Column){//此处指向grid的当前值//record行数据//rowindex行索引//value，对应record[column.name] //column列信息返回 a href=edit.htm？id= value edit/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 /；} }，{名称：名称，显示：名称，宽度：300}]，数据：{ rows:grid data } })；翻译

自定义单元格函数

所有编辑器都在$.ligerDefaults.Grid.editors中定义，例如复制代码如下：editor: {type: spinner}将使用$ . ligerdefaults . grid . editors[ spinner ]创建编辑器并构建它们。

LigerGrid内置了复选框、文本框、日期、数字调节器、下拉框等编辑器。

效果图一栏有很多参数，这里就不一一列举了，只介绍几个常用的参数。要了解更多信息，您可以查看API:http://api.ligerui.com

单元格编辑器

选择行事件。

onUnSelectRow

复制代码代码如下：var grid=$ (# maingrid )。ligergrid ({columns: [{name: id ，display:序列号，width: 200}，{name: name ，display: name ，Width: 300}]，data: {rows: griddata}，on select row: function (rowdata，rowindex){//数据行的row记录//行索引的哪一行，alert(rowdata.name)从0开始；} });Grid.bind (selectrow ，function (rowdata，rowindex) {//this This这里都指向网格。

//数据行的行记录//行索引的哪一行，alert(rowdata.name)从0开始；});方法

方法

参数

形容