LigerUI API

参数列表

参数名	类型	描述	默认值
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         }