Grid - jQuery LigerUI API

jQuery LigerUI

previous page next page

参数列表

参数名 类型 描述 默认值
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 是否附加奇偶行效果行 true
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 编辑器位置误差调整  
editorLeftDiff Init 编辑器位置误差调整  
editorHeightDiff Init 编辑器高度误差调整  
urlParms Object url带参(支持函数) null
hideLoadButton Bool 是否隐藏刷新按钮 false
pageRender Function 分页栏自定义函数 null
isSingleCheck Bool 复选框选择的时候是否单选模式 false
rowClsRender Function 行自定义css类名函数 null
selectable Bool 是否可选择 true
rowSelectable Bool 是否可选择 true
scrollToPage Bool 滚动时加载分页数据  
scrollToAppend Bool 滚动时分页 是否追加分页的形式  

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: 100
51                  , onAfterShowData: callback,frozen:false
52             });  
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         }

previous page start next page