参数列表
| 参数名 | 类型 | 描述 | 默认值 |
| title | String | 表格标题 | null |
| width | String|Int | 宽度值,支持百分比 | 'auto' |
| height | String|Int | 高度值,支持百分比 | 'auto' |
| columnWidth | Int | 默认列宽度 | null |
| resizable | String | table是否可伸缩(暂不支持) | true |
| url | String | ajax url | null |
| data | Object | table data | null |
| usePager | Boolean | 是否分页 | true |
| page | Int | 默认当前页 | 1 |
| pageSize | Int | 每页默认的结果数 | 10 |
| pageSizeOptions | Array | 可选择设定的每页结果数 | [10, 20, 30, 40, 50] |
| parms | Object | ajax 参数 | [] |
| columns | Array | 列 | [] |
| minColToggle | Int | 最小显示的列数目 | 1 |
| dataAction | String | 提交数据的方式：本地(local)或(server),选择本地方式时将在客服端分页、排序 | 'server' |
| showTableToggleBtn | Bool | 是否显示'显示隐藏Grid'按钮 | false |
| switchPageSizeApplyComboBox | Bool | 切换每页记录数是否应用ligerComboBox | false |
| allowAdjustColWidth | Int | 是否允许调整列宽 | true |
| checkbox | Bool | 是否显示复选框 | false |
| allowHideColumn | Bool | 是否显示'切换列层'按钮 | true |
| enabledEdit | Bool | 是否允许编辑 | false |
| isScroll | Bool | 设置为false时将不会显示滚动条，高度自适应 | true |
| dateFormat | String | 默认时间显示格式 | 'yyyy-MM-dd' |
| inWindow | Bool | 是否以窗口的高度为准 height设置为百分比时可用 | true |
| statusName | String | 状态名 | '__status' |
| method | String | 服务器提交方式 | 'post' |
| async | Bool | 是否异步 | true |
| fixedCellHeight | Bool | 是否固定单元格的高度 | true |
| heightDiff | Int | 高度补差,当设置height:100%时，可能会有高度的误差，可以通过这个属性调整 | 0 |
| cssClass | String | 附加给Grid的类名 | null |
| root | String | 数据源字段名 | 'Rows' |
| record | String | 数据源记录数字段名 | 'Total' |
| pageParmName | String | 页索引参数名，(提交给服务器) | 'page' |
| pagesizeParmName | String | 页记录数参数名，(提交给服务器) | 'pagesize' |
| sortnameParmName | String | 页排序列名(提交给服务器) | 'sortname' |
| sortorderParmName | String | 页排序方向(提交给服务器) | 'sortorder' |
| allowUnSelectRow | Bool | 是否允许取消选择行 | false |
| alternatingRow | Bool | 是否附加奇偶行效果行 | false |
| mouseoverRowCssClass | String | 鼠标经过行时的样式 | 'l-grid-row-over' |
| enabledSort | Bool | 是否允许排序 | true |
| rowAttrRender | Function | 行自定义属性渲染器(包括style，也可以定义) | null |
| groupColumnName | String | 分组列名 | null |
| groupColumnDisplay | String | 分组列显示名字 | '分组' |
| groupRender | Function | 分组渲染器 | null |
| totalRender | String | 统计行(全部数据) | null |
| delayLoad | Bool | 初始化是是否不加载 | false |
| where | Function | 数据过滤查询函数,(参数一 data item，参数二 data item index) | null |
| selectRowButtonOnly | Bool | 复选框模式时，是否只允许点击复选框才能选择行 | false |
| whenRClickToSelect | Bool | 右击行时是否选中 | false |
| contentType | String | Ajax contentType参数 | null |
| checkboxColWidth | Int | 复选框列宽度 | 27 |
| detailColWidth | Int | 明细列宽度 | 29 |
| clickToEdit | Bool | 单元格编辑状态 | true |
| detailToEdit | Bool | 明细编辑状态 | false |
| minColumnWidth | Int | 最小列宽 | 80 |
| tree | Object | 树模式 | null |
| isChecked | Function | 初始化选择行 函数 | null |
| frozen | Bool | 冻结列状态 | true |
| frozenDetail | Bool | 明细按钮是否在固定列中 | false |
| frozenCheckbox | Bool | 复选框按钮是否在固定列中 | true |
| detailHeight | Int | 明细框的高度 | 260 |
| rownumbers | Bool | 是否显示行序号 | false |
| frozenRownumbers | Bool | 行序号是否在固定列中 | true |
| rownumbersColWidth | Int | 序号列宽 | 26 |
| colDraggable | Bool | 是否允许表头拖拽 | false |
| rowDraggable | Bool | 是否允许行拖拽 | false |
| rowDraggingRender | Object | 行拖动时渲染函数 | null |
| autoCheckChildren | Bool | 是否自动选中子节点 | true |
| rowHeight | Int | 行默认的高度 | 22 |
| headerRowHeight | Int | 表头行的高度 | 23 |
| toolbar | Object | 工具条,参数同 ligerToolbar的 | null |
| headerImg | String | 表格头部图标 | null |
| isSelected | Function | 是否选择的判断函数 | null |
| detail | Object | 明细 | null |
| isShowDetailToggle | Function | 是否显示展开/收缩明细的判断函数(rowdata) | null |
| toolbarShowInLeft | bool | 工具条显示在左边 | |
| unSetValidateAttr | Bool | 不设置validate | |
| editorTopDiff | Init | 编辑器位置误差调整 |
ColumnEditor
| 参数名 | 类型 | 描述 | 默认值 |
| onChange | Function | { record: rowdata, value: editValue, column: column, rowindex: rowIndex, grid: liger grid object } |
|
| type | 编辑器类型，包括text、checkbox、date、select、spinner|int|float (column) | ||
| data | 编辑器类型包olumn) | ||
| valueField | |||
| textField | |||
| minValue | |||
| maxValue | |||
| ext | |||
| onChanged | Function | { record: rowdata, value: editValue, column: column, rowindex: rowIndex, grid: liger grid object } |
Columns
| 参数名 | 类型 | 描述 | 默认值 |
| id | String | 列ID | |
| name | String | 表格列名 | |
| totalSummary | Object | 汇总 | |
| columns | Object | 多表头支持 | |
| isAllowHide | Bool | 是否允许隐藏,如果允许，将会出现在【显示/隐藏列右键菜单】 | |
| isSort | Bool | 是否允许排序 | |
| type | String | 排序类型,包括string、int、float、date | |
| width | Int | 表格列宽度 | |
| minWidth | Int | 表格列最小允许宽度(调整大小时将不允许小于这个值) | |
| format | String | 格式化 | |
| align | String | 左右对齐,left、right、center | |
| hide | String | 初始化隐藏 | |
| editor | Obect | 编辑器 | |
| render | Function | 单元格渲染器 | |
| display | String | 表格列标题 | |
| headerRender | Function | 头部单元格渲染器(column) |
Detail
| 参数名 | 类型 | 描述 | 默认值 |
| onShowDetail | Function | ||
| onExtend | Function | ||
| height | Int | 高度 | |
| onCollapse | Function |
rowAttrRender参数 示例：
1 $("#maingrid4").ligerGrid({
2 columns: [
3 {display: '主键', name: 'CustomerID', align: 'left', width: 120 } ,
4 { display: '公司名', name: 'CompanyName', minWidth: 60 },
5 { display: '联系名', name: 'ContactName', width: 50, align: 'left' },
6 { display: '联系名', name: 'ContactName', minWidth: 140 },
7 { display: '城市', name: 'City' }
8 ], data: CustomersData, pageSize: 20, sortName: 'CustomerID',
9 width: '100%', height: '99%', checkbox: false, rowAttrRender: function (rowdata,rowid)
10 {
11 if (rowdata.CustomerID.indexOf('A') == 0)
12 {
13 return "style='background:#F1D3F7;'";
14 }
15 return "";
16 }
17 });
groupColumnName参数 示例：
1 $("#maingrid4").ligerGrid({
2 columns: [
3 { display: '主键', name: 'CustomerID', align: 'left', width: 120 },
4 { display: '公司名', name: 'CompanyName', minWidth: 60 },
5 { display: '联系名', name: 'ContactName', width: 50, align: 'left' },
6 { display: '城市', name: 'City' }
7 ], pageSize:20,
8 data: CustomersData,
9 height:'100%',groupColumnName:'City',groupColumnDisplay:'城市'
10 });
groupRender参数 示例：
1 $("#maingrid4").ligerGrid({
2 columns: [
3 { display: '主键', name: 'CustomerID', align: 'left', width: 120 },
4 { display: '公司名', name: 'CompanyName', minWidth: 60 },
5 { display: '联系名', name: 'ContactName', width: 50, align: 'left' },
6 { display: '城市', name: 'City' }
7 ], pageSize: 20,
8 data: CustomersData,
9 height: '100%',
10 groupColumnName: 'City',
11 groupRender: function (city,groupdata)
12 {
13 return '城市 ' + city + '(Count=' + groupdata.length + ')';
14 }
15 });
totalRender参数 示例：
1 $(function () {
2 $("#maingrid").ligerGrid({
3 columns: [...], dataAction: 'local',
4 data: AllProductData, sortName: 'ProductID',
5 showTitle: false, totalRender: f_totalRender,
6 width: '100%', height: '100%',heightDiff:-10
7 });
8
9 $("#pageloading").hide();
10 });
11 function f_totalRender(data, currentPageData)
12 {
13 return "总仓库数量:"+data.UnitsInStockTotal;
14 }
detailToEdit参数 示例：
1 function f_initGrid()
2 {
3 $("#maingrid").ligerGrid({
4 columns: [
5 { display: '主键', name: 'ID', width: 50, type: 'int' },
6 { display: '名字', name: 'RealName',
7 editor: { type: 'text' }
8 },
9 { display: '性别', width: 50, name: 'Sex',type:'int',
10 editor: { type: 'select', data: sexData, valueField: 'Sex' },
11 render: function (item)
12 {
13 if (parseInt(item.Sex) == 1) return '男';
14 return '女';
15 }
16 },
17 { display: '年龄', name: 'Age', width: 50, type: 'int', editor: { type: 'int'} },
18 { display: '入职日期', name: 'IncomeDay', type: 'date', format: 'yyyy年MM月dd', width: 100, editor: { type: 'date'} },
19 { display: '部门', name: 'DepartmentID', width: 120, isSort: false,
20 editor: { type: 'select', data: DepartmentList, valueField: 'DepartmentID', textField: 'DepartmentName' }, render: function (item)
21 {
22 for (var i = 0; i < DepartmentList.length; i++)
23 {
24 if (DepartmentList[i]['DepartmentID'] == item.DepartmentID)
25 return DepartmentList[i]['DepartmentName']
26 }
27 return item.DepartmentName;
28 }
29 }
30 ],
31 onSelectRow: function (rowdata, rowindex)
32 {
33 $("#txtrowindex").val(rowindex);
34 },
35 enabledEdit: true, detailToEdit: true,
36 isScroll: false, frozen:false,
37 data:EmployeeData,
38 width: '100%'
39 });
40 }
rowDraggingRender参数 示例：
1 $("#maingrid").ligerGrid({
2 columns: [
3 { display: '部门名', name: 'name', width: 250, align: 'left' },
4 { display: '部门标示', name: 'id', id: 'id1', width: 250, type: 'int', align: 'left' },
5
6 { display: '部门描述', name: 'remark', width: 250, align: 'left' }
7 ], width: '100%', pageSizeOptions: [5, 10, 15, 20], height: '97%',
8 allowHideColumn: false, rownumbers: true, colDraggable: true, rowDraggable: true, checkbox: false,
9 data: TreeDeptData, alternatingRow: false, tree: { columnName: 'name' },
10 rowDraggingRender: function (rows)
11 {
12 return rows[0].name;
13 }
14 }
15 );
detail参数 示例：
1 <div class="liger-grid" id="grid1" data="CustomersData">
2 <ul class="columns">
3 <li name="CustomerID" width="200">客户</li>
4 <li name="CompanyName" width="200">公司</li>
5 <li display="地址">
6 <ul class="columns">
7 <li name="City" width="100">城市</li>
8 <li name="Address" width="100">地址</li>
9 <li name="PostalCode" width="100">PostalCode</li>
10 </ul>
11 </li>
12 </ul>
13 <div class= "detail" height="auto" onShowDetail="f_onShowDetail"></div>
14 </div>
15
16 <script>17 function f_onShowDetail(record, container, callback) {
18 var out = ['<div style="margin:10px">'];
19 out.push("<div>ContactTitle:"+ record.ContactTitle +"</div>");
20 out.push("<div>Phone:"+ record.Phone +"</div>");
21 out.push("</div>");
22 $(container).html(out.join(''));
23 }
24 </script>
1 <script type="text/javascript"> 2 var g;
3 $(function ()
4 {
5 f_showCustomers();
6 });
7 //显示顾客 8 function f_showCustomers()
9 {
10 g = $("#maingrid").ligerGrid({
11 columns: [
12 { display: '顾客', name: 'CustomerID', align: 'left',frozen:true },
13 { display: '公司名', name: 'CompanyName' },
14 { display: '联系人', name: 'ContactName' },
15 { display: '地址', name: 'Address' },
16 { display: '邮编', name: 'PostalCode' },
17 { display: '城市', name: 'City' }
18 ], isScroll: false, frozen: false,
19 pageSizeOptions: [3, 10, 20, 30, 40, 50, 100],
20 data: CustomersData,
21 showTitle: false,width:'90%',columnWidth:120,
22 detail: { onShowDetail: f_showOrder,height:'auto' }
23 });
24 }
25 function f_getOrdersData(CustomerID)
26 {
27 var data = { Rows: [] };
28 for (var i =0; i < AllOrdersData.Rows.length; i++)
29 {
30 if (AllOrdersData.Rows[i].CustomerID == CustomerID)
31 data.Rows.push(AllOrdersData.Rows[i]);
32 }
33 return data;
34 }
35 //显示顾客订单36 function f_showOrder(row, detailPanel,callback)
37 {
38 var grid = document.createElement('div');
39 $(detailPanel).append(grid);
40 $(grid).css('margin',10).ligerGrid({
41 columns:
42 [
43 { display: '订单序号', name: 'OrderID',type:'float' },
44 { display: '运费', name: 'Freight', width: 50,type:'float' },
45 { display: '收货人', name: 'ShipName' },
46 { display: '收货地址', name: 'ShipAddress' },
47 { display: '收货城市', name: 'ShipCity' },
48 { display: '收货国家', name: 'ShipCountry' }
49 ], isScroll: false, showToggleColBtn: false, width: '90%',
50 data: f_getOrdersData(row.CustomerID) , showTitle: false, columnWidth: 10051 , onAfterShowData: callback,frozen:false52 });
53 }
54 </script>
ColumnEditor onChanged参数 示例：
1 <div class="liger-grid" id="grid1" data-data="CustomersData" data-enabledEdit="true">
2 <ul class="columns">
3 <li data-name="CustomerID" data-width="200" data-display="客户">
4 <input class="editor" data-type="text"/>
5 </li>
6 <li data-display="国家" data-name="Country" data-width="200">
7 <input class="editor" data-type="select" data-data="getCountryData()" data-textField="Country" data-valueField="Country" data-onChanged="f_onCountryChanged"/>
8 </li>
9 <li data-display="城市" data-name="City" data-width="200">
10 <input class="editor" data-type="select" data-textField="City" data-valueField="City" data-ext="f_createCityData"/>
11 </li>
12 </ul>
13 </div>
14 <div id="message" style="margin:10px;"></div>
15 <script>16 //国家 改变事件：清空城市17 function f_onCountryChanged(e)
18 {
19 liger.get("grid1").updateCell('City', '', e.record);
20 }
21 //城市 下拉框 数据初始化,这里也可以改成 改变服务器参数( parms,url )22 function f_createCityData(e)
23 {
24 var Country = e.record.Country;
25 var options = {
26 data: getCityData(Country)
27 };
28 return options;
29 }
30 </script>
Columns totalSummary参数 示例：
1 $("#maingrid").ligerGrid({
2 columns: [
3 { display: '主键', name: 'ProductID', type: 'int', totalSummary:
4 {
5 type: 'count'
6 }
7 },
8 { display: '产品名', name: 'ProductName', align: 'left',width:200 },
9 { display: '单价', name: 'UnitPrice', align: 'right',type:'float',
10 totalSummary:
11 {
12 type: 'sum,max'
13 }
14 },
15 { display: '仓库数量', name: 'UnitsInStock', align: 'right', type: 'float',
16 totalSummary:
17 {
18 type: 'sum'
19 }
20 }
21 ], isScroll: false, data: data, sortName: 'ProductID',
22 groupColumnName:'SupplierID', groupColumnDisplay:'SupplierID'
23 });
Columns render参数 示例：
1 $("#maingrid").ligerGrid({
2 columns: [
3 { display: '标示', name: 'id', width: 250, type: 'int', align: 'left' },
4 { display: '金额', name: 'amount', width: 250, align: 'left', render: f_renderAmount, editor: { type: 'int'} }
5 ], width: '100%', pageSizeOptions: [5, 10, 15, 20], height: '97%',
6 data: TreeData, alternatingRow: false, tree: { columnName: 'id' },
7 enabledEdit: true
8 });
9 function f_renderAmount(rowdata, index, value)
10 {
11 if (!this.hasChildren(rowdata))
12 {
13 return value;
14 }
15 else
16 {
17 var children = this.getChildren(rowdata, true);
18 var sum = 0;
19 for (var i = 0, l = children.length; i < l; i++)
20 {
21 sum += children[i].amount || 0;
22 }
23 return sum;
24 }
25 }