LigerUi中Grid控件的相关属性
// ========================================= 【每一项的TYPE类型】
{ display: '主键', name: 'id', width: 50, type: 'int' }, // 整型
{ display: '生日', name: 'birthday', type: 'date', width: 100 }, // 日期型{ display: '主键', name: 'id', width: 50, type: 'Text' }, // 文本型
{display: "序号", name: "Sort", width: 50, type: "text", align: "left" },
//========================================== 【详细说明】
【display】 -- 标题内容 -- 【display: "序号"】 【name】 -- 对应字段名称 -- 【name: "Sort"】\
【width】 -- 宽度 -- 【width: 50】
【type】 -- 文本型、数值型、日期型 -- 【type: "text"，type: "int"，type: "Text"，type: "date",type:"float"】
【align】 -- 左对齐、右对齐、居中 -- 【align: "left" --left/center/right】
【minWidth: 140 】 --列的最小宽度-- 【minWidth: 140】
【hide】 -- 是否隐藏 -- 【hide: false】
【minWidth 】 -- 列的最小宽度 -- 【minWidth: 40】
【isSort】 -- 是否允许此列排序,默认为允许排序 -- 【isSort: true】
【sAllowHide】 -- 是否允许隐藏,如果允许，将会出现在【显示/隐藏列右键菜单】 -- 【isAllowHide: true】
【string】 -- 类型,用于排序 -- 【type: 'string'】
【editor】 -- 单元格编辑器 -- 所有的编辑器的构造的定义在$.ligerDefaults.Grid.editors，比如
editor: { type: 'text'}, // 【文本框】 editor: { type: 'select'}, // 【选择框】
[js] view plaincopy
editor: { type: 'spinner' }
将会使用$.ligerDefaults.Grid.editors['spinner'] 进行创建编辑器进行构建。
ligerGrid内置提供了 复选框、文本框、日期、数字调整器、下拉框 等编辑器。
【validate】 -- 验证控件 -- 【validate: { required: true, digits: true },】
validate: { required: true, // 是否必填项 digits: true // 是否是数值型或数字 maxlength: 50 // 最大长度
min:1 // 最小长度
},
【】 -- 最小值 -- 【】
【】 -- 最小值 -- 【】
【】 -- 最小值 -- 【】
// ==================================== 【表标头设置】
表格的列提供了很完整的接口可以扩展。无论是内容单元格或者是表头单元格都可以对内容、布局、大小进行自定义。
自定义表头
比如表头，我们可以把display直接设置一段html:
[js] view plaincopy
<span style="font-size:14px; line-height:25px"> </span> {
<span style="font-size:14px; line-height:25px"> </span> display: '<a href="javascript:void(0)">部门</a>', //表头列显示的文本,支持html
<span style="font-size:14px; line-height:25px"> </span> name: 'name',
<span style="font-size:14px; line-height:25px"> </span> align: 'left'
<span style="font-size:14px; line-height:25px"> </span> },
或者使用headerRender：
[js] view plaincopy
<span style="font-size:14px; line-height:25px"> </span>//表头内容自定义函数
<span style="font-size:14px; line-height:25px"> </span>headerRender: function (column)
[js] view plaincopy
<span style="font-size:14px; line-height:25px"> </span>{
<span style="font-size:14px; line-height:25px"> </span> return "<b>" + column.display + "</b>";
<span style="font-size:14px; line-height:25px"> </span>},
// =======================================================【表Grid的数据后和获取】和【排序】
url: rootPath + 'handle/Sys_Label_member.ashx?ajaxaction=Get_Sys_Label', // url
sortName: 'Sort', // 默认排序
enabledSort：true // 就否允许排序
dataAction: 'server' //提交数据的方式：本地(local)或(server),选择本地方式时将在客服端分页、排序
pageSize: 20 // 默认一行显示页数
width: '100%', height: '100%', // 自动根据窗口大小填充满屏 'auto'
checkbox: false // 启用 打对勾的多选框
enabledEdit: true, // 是否允许编辑
clickToEdit: false // 就否允许单击进入编辑
heightDiff: -10 // 高度补差,当设置height:100%时，可能会有高度的误差，可以通过这个属性调整
tree: { columnName: 'CustomProducts_Name' }, // 通过树显示模式，树字段显示名称
columnWidth:100 // 默认列宽度
showTitle：false //是否包含标题
// ---------------------------------------- // 双击执行事件
onDblClickRow : function (data, rowindex, rowobj)
{
selectdepartment();
},
dataAction: 'server', pageSize: 20, toolbar: {},
url: rootPath + 'handle/Sys_Label_member.ashx?ajaxaction=Get_Sys_Label', sortName: 'Sort',
width: '100%', height: '100%', heightDiff: -10, checkbox: false, enabledEdit: true, clickToEdit: false
// ===================================== 【复选框 - 记录多选框】
checkbox: false // 启用 打对勾的多选框
<div id="maingrid4" style="margin:0; padding:0"></div>
[javascript] view plaincopy
<pre><span style="font-size:14px;">$("#maingrid4").ligerGrid({
checkbox: true,
columns: [
{ display: '主键', name: 'CustomerID', align: 'left', width: 120 },
{ display: '公司名', name: 'CompanyName', minWidth: 60 },
{ display: '联系名', name: 'ContactName', width: 50,align:'left' },
{ display: '联系名', name: 'ContactName', minWidth: 140 },
{ display: '联系名', name: 'ContactName', minWidth: 140 },
{ display: '联系名', name: 'ContactName', minWidth: 140 },
{ display: '联系名', name: 'ContactName', minWidth: 140 },
{ display: '城市', name: 'City' }
], dataAction: 'server',pageSize:30,
url: "../../service/NwindDataHandler.ashx?View=Customers", sortName: 'CustomerID',
width: '100%',height:'100%'
});</span></pre><span style="font-size:18px"><br>
</span>
<pre></pre>
<pre></pre>
[javascript] view plaincopy
<span style="font-size:14px;">var grid;
$(function ()
{
grid = $("#maingrid4").ligerGrid({
checkbox: true,
columns: [
{ display: '主键', name: 'CustomerID', align: 'left', width: 120 },
{ display: '公司名', name: 'CompanyName', minWidth: 60 },
{ display: '联系名', name: 'ContactName', width: 50, align: 'left' },
{ display: '城市', name: 'City' }
], dataAction: 'server', pageSize: 30,
url: "../../service/NwindDataHandler.ashx?View=Customers", sortName: 'CustomerID',
width: '100%', height: '100%',
onCheckRow: function (checked,data,rowindex,rowobj)
{
checked && $.ligerDialog.alert('选择的是'+data.CustomerID);
}
});
$("#pageloading").hide();
});
function getCheckedData() // 获取选择的复选框记录
{
var rows = grid.getCheckedRows();
var str = "";
$(rows).each(function ()
{
str += this.CustomerID + ",";
});
$.ligerDialog.alert('选择的是' + str);
}</span>
[javascript] view plaincopy
var jsonObj = {};
jsonObj.Rows = [
{ id: 3, name: "林三", sex: "男", birthday: "1989-01-12" },
{ id: 43, name: "陈丽", sex: "女", birthday: "1989-01-12" },
{ id: 33, name: "啊三", sex: "男", birthday: "1981-12-12" },
{ id: 34, name: "表三", sex: "男", birthday: "1983-01-12" },
{ id: 43, name: "陈丽", sex: "女", birthday: "1989-01-12" },
{ id: 33, name: "成三", sex: "男", birthday: "1989-11-23" },
{ id: 34, name: "都三", sex: "女", birthday: "1989-04-12" },
{ id: 324, name: "鄂三", sex: "男", birthday: "1999-05-15" },
{ id: 344, name: "林三", sex: "男", birthday: "1969-02-21" },
{ id: 1, name: "王开", sex: "男", birthday: "1989-01-12" }
];
$("#maingrid").ligerGrid({
columns: [
{ display: '', width: 30, isAllowHide: false, name: 'checkbox', isSort: false,
render: function (row)
{
var html = '<input type="checkbox" rowid="' + row.id + '">';
return html;
},
headerRender: function (column)
{
var html = '<input type="checkbox" onclick="selectAll(this)">';
return html;
}
},
{ display: '主键', name: 'id', width: 50, type: 'int' },
{ display: '名字', name: 'name', width: 50 },
{ display: '性别', name: 'sex', width: 50, isSort: false
},
{ display: '生日', name: 'birthday', type: 'date', width: 100 },
{
display: '模板列', isAllowHide: false,
render: function (row)
{
var html = '<a href="#" onclick="onedit(' + row.id + ')">编辑</a>';
return html;
}
}
],width:'100%',
data: jsonObj,
url: "../Default.aspx", pkName: 'id',
pageSizeOptions: [5, 10, 15, 20],
onAfterShowData: function (grid)
{
if ($.fn.ligerCheckBox)
$(".l-grid-body input:checkbox,.l-grid-hd-cell input:checkbox", grid).ligerCheckBox({ css: { marginTop: 3} })
}
});
// ===================================== 【事件和方法】
事件
| 事件名 | 参数 | 描述 |
| 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) | 取消选择行事件 |
例子
[js] view plaincopy
var grid = $("#maingrid").ligerGrid({
columns:
[js] view plaincopy
[
{ 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 | () |
|
| getCheckedRows | () |
|
| getChidren | (rowParm) |
|
| getColumn | (columnpam) |
|
| getColumns | (columnLevel) |
|
| getColumnType | (columnname) |
|
| getData | (status, removeStatus) |
|
| getDeleted | () |
|
| getParent | (rowParm) |
|
| getRowObj | (rowParm) |
|
| getSelected | () |
|
| getSelectedRow | () |
|
| getSelectedRowObj | () |
|
| getSelectedRowObjs | () |
|
| getSelectedRows | () |
|
| getSelecteds | () |
|
| getUpdated | () |
|
| hasChildren | (rowParm) |
|
| isLeaf | (rowParm) |
|
| isTotalSummary | () |
|
| loadData | (loadDataParm) |
|
| loadServerData | (param, clause) |
|
| reRender | (e) |
|
| setColumnWidth | (columnparm, value) |
|
| setOptions | (parms) |
|
| SubmitEdit | (rowParm) |
|
| toggle | (targetRow) |
|
| toggleCol | (columnparm, visible) |
|
| updateCell | (cell, value, rowParm) |
|
| updateRow | (newRowData, rowDom) |
|
| upgrade | (targetRow) |
|
例子
[js] view plaincopy
<a class="l-button" href="javascript:selectRow(2)">选择行(3)</a>
<a class="l-button" href="javascript:getSelectRow()">获取选择</a>
[js] view plaincopy
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);
}
}
//自定义单元格渲染器
render : function (record, rowindex, value, column) {
//this 这里指向grid
//record 行数据
//rowindex 行索引
//value 当前的值，对应record[column.name]
//column 列信息
return value; //返回此单元格显示的HTML内容(一般根据value和row的内容进行组织)
},
//列汇总
totalSummary: {
align: 'center', //汇总单元格内容对齐方式:left/center/right
type: 'count', //汇总类型sum,max,min,avg ,count。可以同时多种类型
render: function (e) { //汇总渲染器，返回html加载到单元格
//e 汇总Object(包括sum,max,min,avg,count)
return "<div>总数：" + e.count + "</div>";
}
},
//多表头支持
columns: null
},