参数列表
| 参数名 | 类型 | 描述 | 默认值 |
| 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', 120 } , 4 { display: '公司名', name: 'CompanyName', minWidth: 60 }, 5 { display: '联系名', name: 'ContactName', 50, align: 'left' }, 6 { display: '联系名', name: 'ContactName', minWidth: 140 }, 7 { display: '城市', name: 'City' } 8 ], data: CustomersData, pageSize: 20, sortName: 'CustomerID', 9 '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', 120 }, 4 { display: '公司名', name: 'CompanyName', minWidth: 60 }, 5 { display: '联系名', name: 'ContactName', 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', 120 }, 4 { display: '公司名', name: 'CompanyName', minWidth: 60 }, 5 { display: '联系名', name: 'ContactName', 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 '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', 50, type: 'int' }, 6 { display: '名字', name: 'RealName', 7 editor: { type: 'text' } 8 }, 9 { display: '性别', 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', 50, type: 'int', editor: { type: 'int'} }, 18 { display: '入职日期', name: 'IncomeDay', type: 'date', format: 'yyyy年MM月dd', 100, editor: { type: 'date'} }, 19 { display: '部门', name: 'DepartmentID', 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 '100%' 39 }); 40 }
rowDraggingRender参数 示例：
1 $("#maingrid").ligerGrid({ 2 columns: [ 3 { display: '部门名', name: 'name', 250, align: 'left' }, 4 { display: '部门标示', name: 'id', id: 'id1', 250, type: 'int', align: 'left' }, 5 6 { display: '部门描述', name: 'remark', 250, align: 'left' } 7 ], '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,'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', 50,type:'float' }, 45 { display: '收货人', name: 'ShipName' }, 46 { display: '收货地址', name: 'ShipAddress' }, 47 { display: '收货城市', name: 'ShipCity' }, 48 { display: '收货国家', name: 'ShipCountry' } 49 ], isScroll: false, showToggleColBtn: false, '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',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', 250, type: 'int', align: 'left' }, 4 { display: '金额', name: 'amount', 250, align: 'left', render: f_renderAmount, editor: { type: 'int'} } 5 ], '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 }