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

支持本地数据和服务器数据(配置data或者url)
支持排序和分页(包括Javascript排序和分页)
支持列的“显示/隐藏”
支持多表头
支持固定列
支持明细行
支持汇总行
支持单元格模板
支持编辑表格(三种编辑模式,单元格编辑、行编辑、明细编辑)
支持树表格
支持分组
代码
首先引入基本的css和js文件
复制代码 代码如下:
<link href="http://
排序和分页
排序和分页也有两种方式。一种是本地排序和分页。一种是服务器排序和分页。这里只介绍本地的方式。
默认的情况。是启用排序和分页的。如果要取消分页功能，如下：
复制代码 代码如下:
usePager: false

效果图

事件和方法
事件
事件名参数描述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)取消选择行事件

例子
复制代码 代码如下:
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序号', width: 200 },
{ name: 'name', display: '名称', width: 300 }
],
data: { Rows: griddata },
onSelectRow: function (rowdata, rowindex) {
//行记录 对于数据行
//行索引 第几行,从0开始
alert(rowdata.name);
}
});
grid.bind('SelectRow', function (rowdata, rowindex) {
//this 这里的this都是指向grid

//行记录 对于数据行
//行索引 第几行,从0开始
alert(rowdata.name);
});

方法
方法参数描述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)

• 升级(树模式)

例子
复制代码 代码如下:
<a class="l-button" href="javascript:selectRow(2)">选择行(3)</a>
<a class="l-button" href="javascript:getSelectRow()">获取选择</a>

复制代码 代码如下:
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序号', width: 200 },
{ name: 'name', display: '名称', width: 300 }
]
});

grid.set({ data: { Rows: griddata} });

function selectRow(index) {
grid.select(index);
}
function getSelectRow() {
var rows = grid.getSelecteds();
for (var i in rows) {
alert(rows[i].name);
}
}