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

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

支持本地数据和服务器数据(配置data或者url)
支持排序和分页(包括Javascript排序和分页)
支持列的“显示/隐藏”
支持多表头
支持固定列
支持明细行
支持汇总行
支持单元格模板
支持编辑表格(三种编辑模式,单元格编辑、行编辑、明细编辑)
支持树表格
支持分组
代码
首先引入基本的css和js文件

自定义单元格函数
自定义单元格函数是指配置column的render。我们可以组织任意的html。

单元格编辑器
所有的编辑器的构造的定义在$.ligerDefaults.Grid.editors，比如

事件名	参数	描述
onAfterAddRow	(e)	增加行后事件
onAfterBeginEdit	(e)	开始编辑后事件
onAfterChangeColumnWidth	(column, newwidth)	改变列宽度事件
onAfterShowData	(data)	显示完数据事件
onAfterSubmitEdit	(e)	提交编辑 事件
onBeforeChangeColumnWidth	(column, newwidth)	验证 改变列宽度 是否通过
onBeforeCheckAllRow	(checked, grid element)	选择前事件，可以通过return false阻止操作(复选框 全选/全不选)
onBeforeEdit	(e)	编辑前事件
onBeforeShowData	(data)	显示数据前事件，可以通过reutrn false阻止操作
onBeforeSubmitEdit	(e)	验证编辑器结果是否通过
onBeginEdit	(e)	验证 开始编辑 是否通过
onCancelEdit	(e)	取消编辑 事件
onChangeSort	()	改变排序事件
onCheckAllRow	(checked, grid element)	选择事件(复选框 全选/全不选)
onCheckRow	(checked, rowdata, rowindex, rowDomElement)	选择事件(复选框)
onContextmenu	(parm, e)	右击事件
onDblClickRow	(rowdata, rowindex, rowDomElement)	双击行事件
onDragCol	(node)	拖动列事件
onError	()	错误事件
onLoaded	()	加载完函数
onLoading	()	加载时函数
onReload	()	刷新事件，可以通过return false来阻止操作
onSelectRow	(rowdata, rowindex, rowDomElement)	选择行事件
onSubmit	()	提交前事件
onSuccess	()	成功事件
onToFirst	()	第一页，可以通过return false来阻止操作
onToggleCol	()	切换列事件
onToLast	()	最后一页，可以通过return false来阻止操作
onToNext	()	下一页，可以通过return false来阻止操作
onToPrev	()	上一页，可以通过return false来阻止操作
onUnSelectRow	(rowdata, rowindex, rowDomElement)	取消选择行事件

例子

方法	参数	描述
addEditRow	(rowdata)	增加一个编辑行
addRow	(rowdata, rowParm, isBefore, parentRow)	增加新行
addRows	(rowdataArr)	一次性增加多行
appendRow	(rowData, targetRow, nearRow, isBefore)	附加新行(树模式)
beginEdit	(rowParm)	进入编辑状态
cancelEdit	(rowParm)	取消编辑
changeHeaderText	(columnparm, headerText)	改变表头文本
changePage	(ctype)	改变分页
changeSort	(columnName, sortOrder)	改变排序
collapse	(targetRow)	收缩(树模式)
collapseDetail	(rowParm)	收缩明细
deleteRow	(rowParm)	选择行
deleteSelectedRow	()	删除选择的行
demotion	(targetRow)	降级(树模式)
endEdit	(rowParm)	结束编辑
expand	(targetRow)	展开(树模式)
extendDetail	(rowParm)	展开明细
formatRecord	(record)	格式化数据,删除系统字段
getAdded	()	获取新增的数据
getCheckedRowObjs	()	获取选中的行 DOM对象集合
getCheckedRows	()	获取选中的行数据(复选框)
getChidren	(rowParm)	获取子节点数据(树模式)
getColumn	(columnpam)	获取列信息
getColumns	(columnLevel)	获取指定层级的Columns
getColumnType	(columnname)	根据列名获取列类型
getData	(status, removeStatus)	获取数据
getDeleted	()	获取删除过的数据
getParent	(rowParm)	获取父节点数据(树模式)
getRowObj	(rowParm)	行DOM转换为行数据
getSelected	()	获取选中的行数据(同getSelectedRow)
getSelectedRow	()	获取选中的行数据
getSelectedRowObj	()	获取选中的行 DOM对象
getSelectedRowObjs	()	获取选中的行 DOM对象集合
getSelectedRows	()	获取选中的行数据集合(支持Ctrl多选)
getSelecteds	()	获取选中的行数据集合(支持Ctrl多选)(同getSelectedRows)
getUpdated	()	获取修改过的数据
hasChildren	(rowParm)	是否包括子节点(树模式)
isLeaf	(rowParm)	是否叶节点(树模式)
isTotalSummary	()	是否包含汇总
loadData	(loadDataParm)	刷新数据
loadServerData	(param, clause)	加载数据(服务器)
reRender	(e)	重新加载html
setColumnWidth	(columnparm, value)	调整列宽
setOptions	(parms)	重新设置参数(同名方法set)
SubmitEdit	(rowParm)	提交编辑
toggle	(targetRow)	伸展/收缩节点(树模式)
toggleCol	(columnparm, visible)	显示/隐藏列
updateCell	(cell, value, rowParm)	更新单元格
updateRow	(newRowData, rowDom)	更新行
upgrade	(targetRow)	升级(树模式)

例子