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单元格编辑器 有两种排序和分页方式。一种是本地排序和分页。一个是服务器排序和分页。这里只介绍当地的方式。默认情况。排序和分页已启用。如果要取消分页功能，如下：复制代码如下：usePager:假渲染事件和方法事件。
事件名称
参数
形容
排序和分页
(五)
添加帖子事件
onAfterAddRow
(五)
开始编辑后的事件
onAfterBeginEdit
(列，新宽度)
更改列宽事件
onAfterChangeColumnWidth
(数据)
显示数据事件。
onAfterShowData
(五)
编辑事件
onAfterSubmitEdit
(列，新宽度)
验证更改列宽是否通过。
onBeforeChangeColumnWidth
(选中，网格元素)
选择前置事件，可以通过返回false(全选/无)来阻止操作。
onBeforeCheckAllRow
(五)
编辑前的事件
onBeforeEdit
(数据)
显示数据之前的事件，操作可以被reutrn false阻止。
onBeforeShowData
(五)
验证编辑器结果是否通过。
onBeforeSubmitEdit
(五)
验证开始编辑已通过。
onBeginEdit
(五)
取消编辑事件
onCancelEdit
()
更改排序事件
onChangeSort
(选中，网格元素)
选择事件(选中所有/无复选框)
onCheckAllRow
(已选中，rowdata，rowindex，rowDomElement)
选择事件(复选框)
onCheckRow
(参数，e)
右键单击事件
onContextmenu
(rowdata，rowindex，rowDomElement)
双击线事件
onDblClickRow
(节点)
拖动列事件
onDragCol
()
错误事件
onError
()
完成加载功能
onLoaded
()
装载时间函数
onLoading
()
刷新事件，可以通过返回false来阻止操作。
onReload
(rowdata，rowindex，rowDomElement)
选择线路事件。
onSelectRow
()
提交前事件
onSubmit
()
成功事件
onSuccess
()
在第一页上，您可以通过返回false来停止操作。
onToFirst
()
切换列事件
onToggleCol
()
在最后一页，您可以通过返回false来停止操作。
onToLast
()
在下一页，您可以通过返回false来停止操作。
onToNext
()
在上一页中，您可以通过返回false来停止操作。
onToPrev
(rowdata，rowindex，rowDomElement)
选择行事件。
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开始；});方法
方法
参数
形容
例子
(行数据)
添加编辑行。
addEditRow
(rowdata，rowParm，isBefore，parentRow)
添加新行
addRow
(rowdataArr)
一次添加多行。
addRows
(rowData，targetRow，nearRow，isBefore)
附加行(树模式)
appendRow
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。