参数列表

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

LigerUI API的更多相关文章

  1. ligerUI实现分页

    在公司实习看到公司框架里使用了ligerUI的grid进行分页,个人感觉挺好用的,自己摸索着实现了一遍记录下来 简单来说,liger grid 就是提交准备好的数据到指定的目标请求数据,拿到数据以后, ...

  2. Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页

    1.关于LigerUI: LigerUI 是基于jQuery 的UI框架,其核心设计目标是快速开发.使用简单.功能强大.轻量级.易扩展.简单而又强大,致力于快速打造Web前端界面解决方案,可以应用于. ...

  3. LigerUI之Grid使用详解(一)——显示数据

    目录: 一.概述 二.Grid使用步骤 三.使用Grid展示数据 四.源码下载 一.概述 在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏 ...

  4. jQuery LigerUI V1.2.3 (包括API和全部源码) 发布

    前言 这次版本主要是增加了Panel和Portal组件,并增加了一套皮肤,并解决了部分兼容性的问题,添加了几个功能点. 欢迎使用反馈. 相关链接 API:         http://api.lig ...

  5. jQuery LigerUI V1.2.2 (包括API和全部源码) 发布

    前言 这次版本主要对树进行了加载性能上面的优化,并解决了部分兼容性的问题,添加了几个功能点. 欢迎使用反馈. 相关链接 API:         http://api.ligerui.com/ 演示地 ...

  6. ligerui多选动态下拉框

    今天下午要求做一个支持多选的,并且插件用ligerui的,当时有点小懵了,因为没用过ligerui啊!而且按照API的介绍,我做得也很好啊,可是为什么就是显示不出来?据说有位小神比较厉害,请教来之,两 ...

  7. [xUI] ligerUI开发框架简介和搭建

    ligerUI开发者:谢略,网名daomi API:         http://api.ligerui.com/ 演示地址:  http://demo.ligerui.com/ 源码下载:  ht ...

  8. (转)jQuery LigerUI 插件介绍及使用之ligerTree

    一,简介  ligerTree的功能列表: 1,支持本地数据和服务器数据(配置data或者url) 2,支持原生html生成Tree 3,支持动态获取增加/修改/删除节点 4,支持大部分常见的事件 5 ...

  9. 从后台绑定数据到ligerui 的comboBox下拉框组件

    这次来记录一下ligerUI的comboBox下拉框组件,ligerUI的API里也有相关描写叙述,上面都是前台写死数据,然后显示在组件中,我这次要说的是将后台的数据绑定到下拉框组件中,废话不多说. ...

随机推荐

  1. uvalive 3938 "Ray, Pass me the dishes!" 线段树 区间合并

    题意:求q次询问的静态区间连续最大和起始位置和终止位置 输出字典序最小的解. 思路:刘汝佳白书 每个节点维护三个值 pre, sub, suf 最大的前缀和, 连续和, 后缀和 然后这个题还要记录解的 ...

  2. 在win7的虚拟机中LINUX与winxp两客户机互通问题

    本人实际操作:两个虚拟机都选Host-Onl,查看主机VirtualBox Host-Only Network ip地址为192.168.56.1,那我让linux,windowsxp都让为该网址19 ...

  3. Installing your app on your Windows RT device

    Alright… so my app is almost finished and I want to install it for real on my Surface tablet. How do ...

  4. 8-14-Exercise(博弈:HDU 1846 & HDU 1527 )

    B.HDU 1846    Brave Game 算是最简单的入门博弈题吧...... 呃......我用的......算是不是方法的方法吧——找规律~ 可以发现:X-M为奇数时,先手会输:而为偶数的 ...

  5. [二]Ajax基本实现

    <script text="text/javascript"> function ajax(){ var httpRequest; if(windows.httpReq ...

  6. Linux下OpenSSL 安装

    安装环境:  操作系统:CentOs6.3 OpenSSL Version:openssl-1.0.0e.tar.gz 目前版本最新的SSL地址为http://www.openssl.org/sour ...

  7. (二)如何在.net中使用Redis

    Step1:使用NuGet工具安装Redis C# API,这里有多个API我们可以使用其中一个:

  8. Android模拟器如何加载本机地址及访问本机服务器

    首先获取本机ip地址: 在cmd 命令窗口中输入 ipconfig 查看本地电脑ip地址如下: 获取服务器上的Json数据,并返回结果,部分代码如下: 注:StreamUtils是自定义的一个工具类, ...

  9. C#基础知识学习手记1

    这篇随笔主要用来记录我在C#学习过程做的笔记,算作是一门课程中的小知识点吧. 1. 变量和表达式                         1.1 如何在输出带有引号(英文双引号.英文单引号)以 ...

  10. scrollTop 值为 0

    由scrollTop兼容问题引起: 在 Firefox 和 IE 中,使用 document.documentElement.scrollTop 获取: 在 Chrome 中,使用 document. ...