阅读目录

  • 获取最新代码
  • ligerUI是什么
  • 如何使用
  • 如何扩展

获取最新代码

可以到http://ligerui.googlecode.com下载最新代码。

简介

jQuery LigerUI 是基于jQuery的一系列UI控件组合，简单而又强大，致力于快速打造Web前端界面解决方案。 因为是前端控件，跟服务器无关，可以适合.net,jsp,php等等web服务器环境。目前全部插件的打包压缩JS只有150K左右,很轻巧。使用插件式的开发模式，以“简单”为原则的设计，每个插件尽量独立，并可依赖拓展。

回到顶部

ligerUI是什么

jQuery LigerUI控件丰富，包括基础、导航、布局、表单、表格、树形、窗口等

基础：Resizable、Drag、Tip

导航：Menu、MenuBar、ToolBar

布局：Layout、Tab

表单：Form、TextBox、Button、CheckBox、ComboBox、DateEditor、Radio、Spinner、ListBox、PopupEdit、CheckboxList、RadioList

表格：Grid

树形：Tree

窗口：Dialog、MessageBox、Window

回到顶部

如何使用

jQuery LigerUI是基于jQuery而设计的一系列插件集合。基本上每个插件都是相对独立的。但是彼此之间又紧密地关联着，合理地对插件进行组装，实现出现各种复杂的功能。 使用UI可以帮助你快速地创建友好的用户界面。

第一个例子

<head>
    <title></title>
    <link href="http://www.cnblogs.com/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="http://www.cnblogs.com/lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function ()
        {
            //我们将一个html文本框对象转换成ligerui文本框对象,并返回ligerui对象
var g = $("#txt1").ligerTextBox(
            {
                //如果没有输入时,会提示不能为空
                nullText: '不能为空'
            });

            /*
            如何获取属性
            */
            //方式一
            alert('方式一:' + g.get('disabled'));
            //方式二
            alert('方式二:' + $("#txt1").ligerTextBox('option', 'disabled'));

            /*
            如何设置属性
            */
            //方式一
            g.set('disabled', true);
            //方式二
            $("#txt1").ligerTextBox('option', 'disabled', false);

            /*
            如何调用方法
            */
            //方式一
            g.setDisabled();
            //方式二
            $("#txt1").ligerTextBox('setEnabled');

            /*
            如何设置事件
            */
            //这里给文本框绑定一个改变值的事件
//也可以设置onChangeValue参数
            g.bind('changeValue', function (value)
            {
                alert(value);

            });

        });
    </script>
</head>
<body style="padding:10px">
        <input type="text" id="txt1" value="" style="width:200px"/>
</body>

更多的参数和方法的设置可以查看API：http://www.ligerui.com/api/

上面是TextBox的使用范例，其他的插件使用方式类似。

如何使用ligerUI对象

我们应用完插件以后，是返回一个ligerui对象的，可以把这个对象保存在一个全局的变量里面。在后续的操作中可能会用到。如果因为变量作用域的限制等，没有及时保存起来。我们可以用其他方式获取。见如下：

保存到一个全局的javascript变量：

var g;
$(function ()
{
g = $("#txt1").ligerTextBox();
);

使用$.fn.ligerGetTextBoxManager

var g = $("#txt1").ligerGetTextBoxManager ();

使用$.ligerui.get方法

var g =  $.ligerui.get('txt1');
  • 第三个方式的是使用ligerui对象的id直接获取的，在传入参数没有指定id的情况下，对象的id将会使用html元素的id，如果html元素没有id，将会自动生成一个。所以在这里我们可以用html文本框的id来获取。
  • 如果没有指定html元素的id，可以用第一种方式或者第二种方式。
  • 其实第二种方式可以用第一种方式来替代，实则上ligerText是可以重复调用的，不同的是第二次以后调用都是直接放回ligerui对象。当我们不确定html元素是否已经应用了插件的情况下可以使用第二种方式。
  • 其他插件的命名跟TextBox类同

事件处理

事件处理有两种方式。一种是以参数的形式传入，一种是调用ligerui对象的bind方法。

            //方式一
            var g = $("#txt1").ligerTextBox(
            {
                onChangeValue : function(value){alert(value);}
            });

           //方式二
            g.bind('changeValue', function (value)
            {
                alert(value);
            });
  • 使用bind方法是没有带”on”的。
  • 事件监听是可以多次绑定的。
  • 对于某些事件，如果函数的返回值是false，那么后面还没有触发的函数将不会再执行
  • 第二种方式(bind)，是V1.1.3使用core机制以后引入的。

方法调用

使用ligerui的接口很方便。只需要调用ligerui对象的方法即可。

//这里设置文本框不能编辑
g.setDisabled();
//这里设置文本框可以编辑
g.setEnabled();

也可以使用这种方式

$(“#grid”).ligerGrid(‘setEnabled’);
  • 至于这个对象有哪些方法，可以查看API
  • 对象的方法是可以扩展的，后面会有一篇ligerui扩展的章节来介绍
  • 第二种方式是在V1.1.4加入的

获取参数值

每一个ligerui对象都会有get方法。可以获取参数值

var url = g.get(‘url’);

或者是：

var url = $(“#grid”).ligerGrid(‘option’,’url’);

动态设置参数

每一个ligerui对象都会有set方法。用于动态得设置参数。比如改变Grid的url，那么可以这样写：

g.set(‘url’,url);

或者是：

g.set({url:url});

也可以用插件的方式：

$(“#grid”).ligerGrid(‘option’,’url’,url);
  • 第二种方式是允许同时传入多个参数的。
  • Set方法是所有插件的统一设置属性的接口
  • Set方法是V1.1.3使用core机制以后引入的。
  • 插件传参的方式是V1.1.4引入的
回到顶部

如何扩展

Ligerui的默认参数、方法都是可以扩展的，这里我们定义了两个入口: $.ligerDefaults和$.ligerMethods。

比如要改变或者扩展Grid的默认参数，可以改变$.ligerDefaults.Grid

默认参数扩展

只需要扩展对象：$.ligerDefaults.{Plugin}

比如要改变表格默认的头部标题：

if($.ligerDefaults.Grid)
{
    $.ligerDefaults.Grid.title = "我的表格";
}

本地化支持扩展

只需要扩展对象：$.ligerDefaults.{Plugin}String

比如把表格“加载时”翻译成英文：

if($.ligerDefaults.GridString)
{
    $.ligerDefaults.GridString.loadingMessage = "loading...";
}

方法扩展

只需要扩展对象：$. ligerMethos.{Plugin}

这里给Grid ligerui对象增加一个alert方法：

$.extend($.ligerMethods.Grid,
            {
                alert : function ()
                {
                     //要注意到一点，这里的this就是ligerui对象
                    var rowdata = this.getSelectedRow();
                    if (!rowdata)
                        alert('空');
                    else
                        alert(rowdata.CustomerID);
                }
            }
        );

function show()
{
     //后面就可以这样使用
     Var g = $(“#maingrid”).ligerGrid();
     g.alert();
}


搜索


欢迎使用Liger UI框架

作者: 谢略

QQ: 175932810

交流QQ群1群: 71664111

交流QQ群2群：104842296

交流QQ群3群：153770480

交流QQ群4群：190391819

交流QQ群5群：37205343

交流QQ群6群：237634156

交流QQ群7群：262424299

交流QQ群7群：262424299

交流QQ群8群：427520658

API: http://api.ligerui.com/

演示地址:http://demo.ligerui.com/

官方论坛: http://bbs.ligerui.com/

源码: 源码托管

历史版本: 前往下载


uicomponent - jQuery LigerUI API

事件列表

事件名 | 参数 | 描述
onPropertyChanged | (name, value) | 属性改变事件
onRender | () | 渲染事件
onRendered | () | 渲染结束事件


uicomponent - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
bind(name, fn, context) | name:事件名 | 绑定
set(name, value) |  | 设置属性
trigger(name) |  | 触发事件
unbind(name) |  | 取消绑定
get(name) |  | 获取属性


Grid - jQuery LigerUI API

ligerGrid

描述:
  • 1,支持本地数据和服务器数据(配置data或者url)
  • 2,支持排序和分页(包括Javascript排序和分页)
  • 3,支持列的“显示/隐藏”
  • 4,支持明细行(表格内嵌)
  • 5,支持汇总行
  • 6,支持单元格模板
  • 7,支持编辑表格(ligerGrid的一个特色,需要其他表单插件的支持)
  • 8,支持树表格
  • 8,支持分组
  • 8,支持多表头

示例

 1 <div class="liger-treegrid" id="treegrid1" data="CustomersData" enabledEdit="true">
 2         <ul class="liger-treegrid-columns">
 3             <li name="CustomerID" width="200">CustomerID
 4                     <input class="liger-treegrid-editor" ltype="text" />
 5             </li>
 6             <li name="CompanyName" width="200">CompanyName
 7                     <input class="liger-treegrid-editor" ltype="date" data-property="type:'checkbox'" />
 8             </li>
 9             <li display="Address">
10                 <ul class="liger-treegrid-columns">
11                     <li name="City" width="100">City</li>
12                     <li name="Address" width="100">Address</li>
13                     <li name="PostalCode" width="100">PostalCode</li>
14                 </ul>
15             </li>
16         </ul>
17         <div class= "liger-treegrid-detail"></div>
18      </div>

截图


Grid - jQuery 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 | 是否附加奇偶行效果行 | 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 | 滚动时加载分页数据 |

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         }


Grid - jQuery LigerUI API

事件列表

事件名 | 参数 | 描述
onEndEdit | (editParm) |
onRowDragDrop | (editParm) {rows,parent,near,after} |
onDragCol |  | 拖动列事件
onToggleCol |  | 切换列事件
onChangeSort |  | 改变排序事件
onSuccess | (data, grid) | 成功获取服务器数据的事件
onDblClickRow | (data,rowid,rowdata) | 双击行事件
onSelectRow | (rowdata, rowid, rowobj) | 选择行事件
onUnSelectRow | (rowdata, rowid, rowobj) | 取消选择行事件
onBeforeCheckRow | (checked, data, rowid, rowdata) | 选择前事件，可以通过return false阻止操作(复选框)
onCheckRow | (checked,data,rowid,rowdata) | 选择事件(复选框)
onBeforeCheckAllRow | (checked,element) | 选择前事件
onCheckAllRow | (checked,element) | 选择事件(复选框 全选/全不选)
onBeforeShowData | (currentData) | 显示数据前事件
onAfterShowData | (currentData) | 显示完数据事件
onError | (XMLHttpRequest, textStatus, errorThrown) | 错误事件
onSubmit |  | 提交前事件
onReload | (grid) | 刷新事件
onToFirst | (element) | 第一页
onToPrev | (element) | 上一页
onToNext | (element) | 下一页
onToLast | (element) | 最后一页
onAfterAddRow | (rowdata) | 增加行后事件
onBeforeEdit | (editParm) | 编辑前事件
onBeforeSubmitEdit | (editParm) | 验证编辑器结果是否通过
onAfterEdit | (editParm) | 结束编辑后事件
onLoading |  | 加载时函数
onLoaded | (grid) | 加载完函数
onContextmenu | ({data,rowindex,row},e) | 右击事件
onBeforeCancelEdit |  | 取消编辑前事件
onAfterSubmitEdit | ({record,rowindex,newdata}) | 编辑后事件
onGroupExtend | () | 分组展开事件
onGroupCollapse | () | 分组收缩事件
onLoadData | () | 加载数据前事件
onBeforeSelectRow | () | 选择前事件
onHeaderCellBulid | () | 头部单元格创建事件

onDblClickRow事件 示例：

1  onDblClickRow : function (data, rowindex, rowobj)
2                 {
3                     $.ligerDialog.alert('选择的是' + data.CustomerID);
4                 }

onBeforeEdit事件 示例：

 1   <script type="text/javascript">
 2
 3         var DepartmentList = DepartmentData.Rows;
 4         var sexData = [{ Sex: 1, text: '男' }, { Sex: 2, text: '女'}];
 5         $(f_initGrid);
 6
 7         function f_initGrid()
 8         {
 9             $("#maingrid").ligerGrid({
10                 columns: [
11                 { display: '主键', name: 'ID', width: 50, type: 'int' },
12                 { display: '名字', name: 'RealName',
13                     editor: { type: 'text' }
14                 },
15                 { display: '性别', width: 50, name: 'Sex',
16                     editor: { type: 'select', data: sexData, valueField: 'Sex' },
17                     render: function (item)
18                     {
19                         if (parseInt(item.Sex) == 1) return '男';
20                         return '女';
21                     }
22                 },
23                 { display: '年龄', name: 'Age', width: 50, type: 'int', editor: { type: 'int'} },
24                 { display: '入职日期', name: 'IncomeDay', type: 'date', width: 100, editor: { type: 'date'} },
25                 {
26                     display: '部门', name: 'DepartmentID', width: 120, isSort: false, textField: 'DepartmentName',
27                 editor: { type: 'select', data: DepartmentList, valueField: 'DepartmentID', textField: 'DepartmentName' }
28                 },
29                 { display: '地址', name: 'Address',
30                     editor: { type: 'text' }, align: 'left', width: 300
31                 }
32                 ],
33                 enabledEdit: true, isScroll: false,
34                 onBeforeEdit: f_onBeforeEdit,
35                 onBeforeSubmitEdit: f_onBeforeSubmitEdit,
36                 onAfterEdit: f_onAfterEdit,
37                 data: EmployeeData,
38                 width: '100%'
39             });
40         }
41         //只允许编辑前3行
42         function f_onBeforeEdit(e)
43         {
44             if(e.rowindex<=2) return true;
45             return false;
46         }
47         //限制年龄
48         function f_onBeforeSubmitEdit(e)
49         {
50             if (e.columnname == "Age")
51             {
52                 if (e.value < 20 || e.value > 30) return false;
53             }
54             return true;
55         }
56         //编辑后事件
57         function f_onAfterEdit(e)
58         {
59             if (e.columnname == "Age")
60             {
61                 alert(e.value);
62             }
63         }
64         function getSelected()
65         {
66             var manager = $("#maingrid").ligerGetGridManager();
67             var row = manager.getSelectedRow();
68             if (!row) { alert('请选择行'); return; }
69             alert(JSON.stringify(row));
70         }
71         function getData()
72         {
73             var manager = $("#maingrid").ligerGetGridManager();
74             var data = manager.getData();
75             alert(JSON.stringify(data));
76         }
77     </script>

onContextmenu事件 示例：

 1  menu = $.ligerMenu({ width: 120, items:
 2             [
 3             { text: '增加', click: itemclick, icon: 'add' },
 4             { text: '修改', click: itemclick },
 5             { line: true },
 6             { text: '查看', click: itemclick }
 7             ]
 8             });
 9             grid = $("#maingrid4").ligerGrid({
10                 columns: [
11                 { display: '主键', name: 'CustomerID', align: 'left', width: 120 },
12                 { display: '公司名', name: 'CompanyName', minWidth: 60 },
13                 { display: '联系名', name: 'ContactName', minWidth: 140 },
14                 { display: '城市', name: 'City' }
15                 ], pageSize: 30, data: CustomersData, sortName: 'CustomerID',
16                 width: '100%', height: '100%', onRClickToSelect:true,
17                 onContextmenu : function (parm,e)
18                 {
19                     actionCustomerID = parm.data.CustomerID;
20                     menu.show({ top: e.pageY, left: e.pageX });
21                     return false;
22                 }
23             });


Grid - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
loadData(parm) | parm: 1,Function过滤函数,或者分页数 2,Bool是否加载服务器数据 3,Object data | 加载数据,同名方法reload()
loadServerData(param, clause) | parm:ajax参数 clause:过滤函数 | 加载服务器数据
toggleLoading(show) | show:显示或者隐藏 | 显示/隐藏加载层
beginEdit(rowParm) | rowParm:rowid或者rowdata | 进入编辑状态
cancelEdit(rowParm) | rowParm:rowid或者rowdata | 结束编辑
addEditRow(rowdata) |  | 新设一个编辑行
submitEdit(rowParm) |  | 提交编辑
endEdit(rowParm) |  | 结束编辑
setWidth(width) |  | 设置宽度
setHeight(height) |  | 设置高度
enabledCheckbox() |  | 是否启用复选框
enabledFrozen() |  | 是否冻结列
enabledDetailEdit() |  | 是否启用明细编辑
enabledDetail() |  | 是否启用明细
enabledGroup() |  | 是否分组
deleteSelectedRow() |  | 删除选择的行
removeRange(rowArr) |  | 移除行集合
remove(rowParm) |  | 移除
deleteRange(rowArr) |  | 删除行集合
deleteRow(rowParm) |  | 删除行
updateCell(arg, value, rowParm) | arg: column index、column name、column、单元格value: 值rowParm:rowindex或者rowdata | 更新单元格
addRows(rowdataArr, neardata, isBefore, parentRowData) |  | 增加行集合
move(from, to, isAfter) |  | 移动行
moveRange(from, to, isAfter) |  | 移动行集合
up(rowParm) |  | 上移
down(rowParm) |  | 下移
addRow(rowdata, neardata, isBefore, parentRowData) |  | 增加行
updateRow(rowDom, newRowData) |  | 更新行
setCellEditing(rowdata, column, editing) |  | 设置单元格为编辑状态
reRender(e) |  | 重新渲染
getData(status, removeStatus) |  | 获取数据
formatRecord(o, removeStatus) |  | 格式化数据
getUpdated() |  | 获取更新的数据
getDeleted() |  | 获取删除的数据
getAdded() |  | 获取新增的数据
getColumn() |  | 获取列
isTotalSummary() |  | 是否汇总
getColumns(columnLevel) |  | 获取列集合
changeSort(columnName, sortOrder) |  | 改变排序
changePage(ctype) | ctype:first|prev|next|last|input | 改变分页
getSelectedRow() |  | 获取选择行
getSelectedRows() |  | 获取选择行集合
getRow(rowid) |  | 获取行
toggleCol(columnparm, visible, toggleByPopup) | 显示隐藏列 | 切换列
setColumnWidth(columnparm, newwidth) |  | 设置列宽
changeHeaderText(columnparm, headerText) |  | 改变表头
changeCol(from, to, isAfter) |  | 改变列的位置
collapseDetail(rowParm) |  | 收缩明细框
extendDetail(rowParm) |  | 展开明细框
getParent(rowParm) |  | 获取父节点数据
getChildren(rowParm, deep) | rowParm:行参数,rowid或者rowdata deep:递归加载 | 获取子节点数据
isLeaf(rowParm) |  | 是否叶节点
hasChildren(rowParm) |  | 是否包括子节点
appendRange(rows, parentdata, neardata, isBefore) |  | 附加行集合
appendRow(rowdata, parentdata, neardata, isBefore) |  | 附加行
upgrade(rowParm) |  | 升级(树)
demotion(rowParm) |  | 降级(树)
collapse(rowParm) |  | 收缩(树)
expand(rowParm) |  | 展开(树)
toggle(rowParm) |  | 收缩/展开(树)
select(rowParm) |  | 选择行
unselect(rowParm) |  | 取消选择行
isSelected(rowParm) |  | 是否已经选择
enabledTotal() |  | 是否启用汇总
add() |  | 增加行(同addRow方法)
update() |  | 更新行(同updateRow方法)
append() |  | 附加行(同appendRow方法)
getSelected() |  | 获取选择行(同getSelectedRow方法)
getSelecteds() |  | 获取选择行集合 (同getSelectedRows方法)
reload() |  | 重新加载 (同loadData方法)
setParm(name,value) |  | 设置ajax参数
removeParm(name) |  | 移除ajax参数
getChanges() |  | 获取更改过的数据
collapseAll() |  | 收缩全部
expandAll() |  | 展开全部
showFilter() |  | 显示高级过滤
endEditToNext() |  | 编辑状态下进入下一个编辑位置
getColumnByName() |  | 根据column name 获取column

updateCell(arg, value, rowParm)方法 示例：

 1 function f_initGrid()
 2         {
 3             window['g'] =
 4             manager = $("#maingrid").ligerGrid({
 5                 columns: [
 6                 { display: '单价', name: 'UnitPrice', width: 100, type: 'float', editor: { type: 'int' } },
 7                { display: '数量', name: 'Quantity', width: 100, type: 'int', editor: { type: 'int'} },
 8                 { display: '金额', name: 'Price', width: 100, type: 'int'}
 9                 ],
10                 enabledEdit: true, usePager: false, isScroll: false, onAfterEdit: f_onAfterEdit,
11                 data: { Rows: data },
12                 width: '100%'
13             });
14         }
15         function f_onAfterEdit(e)
16         {
17             manager.updateCell('Price', e.record.UnitPrice * e.record.Quantity, e.record);
18         }

updateRow(rowDom, newRowData)方法 示例：

1  function updateRow()
2         {
3             var selected = manager.getSelected();
4             if (!selected) { alert('请选择行'); return; }
5             manager.updateRow(selected,{
6                 UnitPrice: 40,
7                 Quantity: parseInt($("#txtQuantity").val())
8             });
9         }

setColumnWidth(columnparm, newwidth)方法 示例：

1 var g = $("#maingrid4").ligerGrid(...);
2 g.setColumnWidth('City1', value);

add()方法 示例：

 1   manager.add({
 2                 DepartmentID: 3,
 3                 DepartmentName: '销售部',
 4                 RealName: "分为" + newrowid,
 5                 ID: newrowid++,
 6                 Sex : 1,
 7                 Age : 25,
 8                 IncomeDay: new Date(1306108800000),
 9                 Phone : "2343434",
10                 Address: "wwrere4"
11             }, row, document.getElementById("chkbefore").checked);

endEditToNext()方法 示例：

 1  <div id="navtab1" style="width: 900px; overflow: hidden; border: 1px solid #D3D3d3;" class="liger-tab">
 2         <div tabid="home" title="我的主页" lselected="true" style="height: 300px">
 3            <div id="maingrid2" style="margin: 10px; height: 300px;">我的主页</div>
 4         </div>
 5         <div title="我的主页3" showclose="true">
 6             <div id="Div1" style="margin: 10px; height: 300px;">我的主页3</div>
 7         </div>
 8         <div title="我的主页4" showclose="true">
 9             <div id="Div2" style="margin: 10px; height: 300px;">我的主页4</div>
10         </div>
11     </div>
12     <br />
13     <div class="liger-button" data-click="f_setHeader">改变标题</div>
14
15     <script>
16
17         function f_setHeader()
18         {
19             var tab = liger.get("navtab1");
20             tab.setHeader("home", "改变了文本");
21         }
22     </script>

getColumnByName()方法 示例：

 1  <div id="navtab1" style="width: 900px; overflow: hidden; border: 1px solid #D3D3d3;" class="liger-tab">
 2         <div tabid="home" title="我的主页" lselected="true" style="height: 300px">
 3            <div id="maingrid2" style="margin: 10px; height: 300px;">我的主页</div>
 4         </div>
 5         <div title="我的主页3" showclose="true">
 6             <div id="Div1" style="margin: 10px; height: 300px;">我的主页3</div>
 7         </div>
 8         <div title="我的主页4" showclose="true">
 9             <div id="Div2" style="margin: 10px; height: 300px;">我的主页4</div>
10         </div>
11     </div>
12     <br />
13     <div class="liger-button" data-click="f_setHeader">改变标题</div>
14
15     <script>
16
17         function f_setHeader()
18         {
19             var tab = liger.get("navtab1");
20             tab.setHeader("home", "改变了文本");
21         }
22     </script>


Tree - jQuery LigerUI API

ligerTree

树组件

示例

1  $("#tree1").ligerTree(
2             {
3                 url: 'tree.json',
4                 nodeWidth : 40,
5                 onBeforeExpand: onBeforeExpand,
6                 onExpand: onExpand
7             });

截图


Tree - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
url | String | url | null
data | Object | 数据 | null
checkbox | Bool | 是否复选框 | true
autoCheckboxEven | Bool | 复选框联动 | true
parentIcon | String | 父节点图标 | 'folder'
childIcon | String | 子节点图标 | 'leaf'
textFieldName | String | 文本字段名 | 'text'
attribute | Array | 预加载的属性名 | ['id', 'url']
treeLine | Bool | 是否显示连接线 | true
nodeWidth | Int | 节点宽度 | 90
statusName | String | 状态名 | '__status'
isLeaf | Function | 是否子节点的判断函数 | null
single | Bool | 是否单选 | false
idFieldName | String | ID字段名 | null
parentIDFieldName | String | 父节点字段 | 'pid'
topParentIDValue | String | 顶级节点 | 0
slide | Bool | 是否显示动画 | true
iconFieldName | String | 图标字段名 | 'icon'
nodeDraggable | Bool | 是否允许拖拽 | false
nodeDraggingRender | Function |  | null
btnClickToToggleOnly | Bool | 是否点击展开/收缩 按钮时才有效 | true
needCancel | Bool | 已选的是否需要取消操作 | null
ajaxType | String | 远程加载方式 | post
render | Function | 自定义函数 | null
selectable | Function | 可选择判断函数 | null
isExpand | Object | 是否展开 1,可以是true/false 2,也可以是数字(层次)N 代表第1层到第N层都是展开的，其他收缩 3,或者是判断函数 函数参数e(data,level) 返回true/false 优先级没有节点数据的isexpand属性高,并没有delay属性高 | null
delay | Object | 是否延迟加载 1,可以是true/false 2,也可以是数字(层次)N 代表第N层延迟加载 3,或者是字符串(Url) 加载数据的远程地址 4,如果是数组,代表这些层都延迟加载,如[1,2]代表第1、2层延迟加载 5,再是函数(运行时动态获取延迟加载参数) 函数参数e(data,level),返回true/false或者{url:...,parms:...} 优先级没有节点数据的delay属性高 |
idField | String | id字段 | 2
parentIDField | String | parent id字段，可用于线性数据转换为tree数据 | 2

parentIDFieldName参数 示例：

 1  var data = [];
 2
 3             data.push({ id: 1, pid: 0, text: '1' });
 4             data.push({ id: 2, pid: 1, text: '1.1' });
 5             data.push({ id: 4, pid: 2, text: '1.1.2' });
 6             data.push({ id: 5, pid: 2, text: '1.1.2' });
 7
 8             data.push({ id: 10, pid: 8, text: 'wefwfwfe' });
 9             data.push({ id: 11, pid: 8, text: 'wgegwgwg' });
10             data.push({ id: 12, pid: 8, text: 'gwegwg' });
11
12             data.push({ id: 6, pid: 2, text: '1.1.3', ischecked: true });
13             data.push({ id: 7, pid: 2, text: '1.1.4' });
14             data.push({ id: 8, pid: 7, text: '1.1.5' });
15             data.push({ id: 9, pid: 7, text: '1.1.6' });
16
17             $("#tree1").ligerTree({
18             data:data,
19             idFieldName :'id',
20             parentIDFieldName :'pid'
21             }
22             );

isExpand参数 示例：

 1  $("#tree1").ligerTree({
 2                 nodeWidth: 200,
 3                 data : createData(),
 4                 checkbox: true,
 5                 idFieldName: 'id',
 6                 isExpand: false,
 7                 slide: false
 8             });
 9
10
11             $("#tree2").ligerTree({
12                 nodeWidth: 200,
13                 data: createData(),
14                 checkbox: true,
15                 idFieldName: 'id',
16                 isExpand: true,
17                 slide: false
18             });
19
20             $("#tree3").ligerTree({
21                 nodeWidth: 200,
22                 data: createData(),
23                 checkbox: true,
24                 idFieldName: 'id',
25                 isExpand: 2,
26                 slide: false
27             });
28
29             $("#tree4").ligerTree({
30                 nodeWidth: 200,
31                 data: createData(),
32                 checkbox: true,
33                 idFieldName: 'id',
34                 isExpand: function (e)
35                 {
36                     var data = e.data;
37                     return data.index % 2 == 0;
38                 },
39                 slide: false
40             });
41
42             var data5 = createData();
43             data5[2].isExpand = true;
44             $("#tree5").ligerTree({
45                 nodeWidth: 200,
46                 data: data5,
47                 checkbox: true,
48                 idFieldName: 'id',
49                 isExpand: false,
50                 slide: false
51             });

delay参数 示例：

 1    $("#tree2").ligerTree({
 2                 nodeWidth: 200,
 3                 data: createData(),
 4                 checkbox: true,
 5                 idFieldName: 'id',
 6                 delay: true,
 7                 slide: false
 8             });
 9
10             $("#tree3").ligerTree({
11                 nodeWidth: 200,
12                 data: createData(),
13                 checkbox: true,
14                 idFieldName: 'id',
15                 delay: 2,
16                 slide: false
17             });
18
19             $("#tree4").ligerTree({
20                 nodeWidth: 200,
21                 data: createData(),
22                 checkbox: true,
23                 idFieldName: 'id',
24                 delay: function (e)
25                 {
26                     var data = e.data;
27                     return data.index % 2 == 0;
28                 },
29                 slide: false
30             });
31
32             var data5 = createData();
33             data5[0].delay = true;
34             $("#tree5").ligerTree({
35                 nodeWidth: 200,
36                 data: data5,
37                 checkbox: true,
38                 idFieldName: 'id',
39                 delay: false,
40                 slide: false
41             });
42
43  $("#tree1").ligerTree({
44                 nodeWidth: 300,
45                 url: 'treeDeptData.ashx?type=company',
46                 isLeaf : function(data)
47                 {
48                     if (!data) return false;
49                     return data.type == "employee";
50                 },
51                 delay: function(e)
52                 {
53                     var data = e.data;
54                     if (data.type == "company")
55                     {
56                         return { url: 'treeDeptData.ashx?type=deptment&prev=' + data.id }
57                     }
58                     if (data.type == "deptment")
59                     {
60                         return { url: 'treeDeptData.ashx?type=employee&prev=' + data.id }
61                     }
62                     return false;
63                 },
64                 checkbox: true,
65                 idFieldName: 'id',
66                 slide: false
67             });


Tree - jQuery LigerUI API

事件列表

事件名 | 参数 | 描述
onBeforeExpand | ({data,target}) | 展开前事件
onContextmenu | ({data,target}) | 右击事件
onExpand | ({data,target}) | 展开事件
onBeforeCollapse | ({data,target}) | 收缩前事件
onCollapse | ({data,target}) | 收缩事件
onBeforeSelect | ({data,target}) | 选择前事件
onSelect | ({data,target}) | 选择事件
onBeforeCancelSelect | ({data,target}) | 取消选择前事件
onCancelselect | ({data,target}) | 取消选择事件
onCheck | ({data,target},checked) | 选择事件
onSuccess | (data) | 加载成功事件
onError | (XMLHttpRequest, textStatus, errorThrown) | 加载错误事件
onClick | ({data,target}) | 点击事件
onBeforeAppend | (parentNode, newdata) | 追加数据前事件
onAppend | (parentNode, newdata) | 追加数据事件
onAfterAppend | (parentNode, newdata) | 追加数据后事件

onContextmenu事件 示例：

 1  menu = $.ligerMenu({ top: 100, left: 100, width: 120, items:
 2             [
 3             { text: '增加', click: itemclick, icon: 'add' },
 4             { text: '修改', click: itemclick },
 5             { line: true },
 6             { text: '查看', click: itemclick }
 7             ]
 8             });
 9
10             $("#tree1").ligerTree({ onContextmenu: function (node, e)
11             {
12                 actionNodeID = node.data.text;
13                 menu.show({ top: e.pageY, left: e.pageX });
14                 return false;
15             }
16             });


Tree - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
setData(data) |  | 设置数据
getData() |  | 获取数据
hasChildren(nodedata) |  | 是否包括子节点
getParent(treenode, level) |  | 获取父节点
getParentTreeItem(treenode, level) |  | 获取父节点
getChecked() |  | 获取选择
getSelected() |  | 获取选择
upgrade(treeNode) |  | 升级
demotion(treeNode) |  | 降级
collapseAll() |  | 收缩全部
expandAll() |  | 展开全部
loadData(node, url, param) |  | 加载数据
clear(node) | node:指定节点,可选 | 清除
getNodeDom (nodeParm) | [treeNode] dom节点(li)、节点数据 或者节点 dataindex | 获取节点Dom
remove(treeNode) | [treeNode] dom节点(li)、节点数据 或者节点 dataindex | 移除
update(domnode, newnodedata) | [domnode] dom节点(li)、节点数据 或者节点 dataindex | 升级节点
append(parentNode, newdata, nearNode, isAfter) | //增加节点集合 //@parm [newdata] 数据集合 Array //@parm [parentNode] dom节点(li)、节点数据 或者节点 dataindex //@parm [nearNode] 附加到节点的上方/下方(非必填) //@parm [isAfter] 附加到节点的下方(非必填) | 追加节点
cancelSelect(nodeParm) | [nodeParm] dom节点(li)、节点数据 或者节点 dataindex | 取消选择
selectNode(selectNodeParm) | 选择节点(参数：条件函数、Dom节点或ID值) | 选择节点
getTextByID(id) |  | 获取节点文本
getDataByID(id) |  | 获取数据
arrayToTree(data, id, pid) |  | 将ID、ParentID这种数据格式转换为树格式
refreshTree() |  | 刷新树
reload() |  | 刷新
reloadNode(node,data) | node:节点数据或者dom data:数据源(url or data) | 刷新节点


ComboBox - jQuery LigerUI API

ligerComboBox

复杂的下拉框组件，适应不同类型的下拉框，包括：

  • 表单select元素
  • 单选、多选下拉框
  • 多列下拉框
  • 分页表格下拉框(包括搜索)
  • 树下拉框
  • 自动完成

示例

 1 var columns = [
 2                 { header: 'ID', name: 'id', width: 80 },
 3                 { header: '名字', name: 'name', width: 170 },
 4                 { header: '描述', name: 'desc', width: 170 }
 5             ];
 6
 7             $("#txt1").ligerComboBox(
 8                 {
 9                     url: '../../data/net/ComboBoxData.ashx',
10                     valueField : 'id',
11                     textField: 'name',
12                     columns: columns,
13                     selectBoxWidth: 400,
14                     autocomplete: true,
15                     width: 400
16                 }
17             );

截图


ComboBox - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
resize | Bool | 是否调整大小 | false
isMultiSelect | Bool | 是否多选 | false
isShowCheckBox | Bool | 是否显示复选框 | false
columns | Array | 表格参数 | null
selectBoxWidth | Int | 下拉框宽度 | null
selectBoxHeight | Int | 下拉框高度 | null
initValue | String | 初始化值 | null
initText | String | 初始化文本 | null
valueField | String | 值字段名 | 'id'
textField | String | 文本字段名 | 'text'
valueFieldID | String | 隐藏域元素的ID | null
slide | Bool | 是否以动画的形式显示 | true
split | String | 分隔符 | ;
data | Object | 数据源 | null
tree | Object | 同树参数 | null
treeLeafOnly | Bool | 只对树叶节点有效 | true
grid | Object | 同表格参数 | null
hideOnLoseFocus | Bool | 失去焦点时隐藏 | true
url | String | 数据源URL(需返回JSON) | null
render | Object | 文本框渲染函数 | null
absolute | Bool | 选择框是否在附加到body,并绝对定位 | true
condition | Object | 条件同表单参数 | null
cancelable | Bool | 是否取消选择 | false
css | String | 附加className | null
parms | Object | 异步数据请求参数 | null
renderItem | Function | 项自定义html函数 | null
autocomplete | Bool | 自动完成 | false
readonly | Bool | 是否只读 | false
ajaxType | String | ajax Type | 'post'
valueFieldCssClass | String | 隐藏域css | NULL
hideGridOnLoseFocus | Bool | 失去焦点(表格)时隐藏 | false
alwayShowInTop | Bool | 下拉框总是显示在上方 | false
emptyText | String | 空行的数据项 | '(空)'
addRowButton | String | 新增按钮的显示文本 | '新增'
addRowButtonClick | Function | 新增按钮的点击事件，如果为空将不会出现新增按钮 | null
triggerIcon | String | 右侧图标图片 | null
highLight | Bool | 自动完成是否匹配字符高亮显示 | false
selectBoxPosYDiff | Int | 下拉框位置y左边调整 | -3
dataParmName | String | 列表数据字段名 | null
ajaxComplete | Function | ajax OnComplete事件定义 | null
ajaxBeforeSend | Function | ajax OnBeforeSend事件定义 | null
ajaxContentType | Function | ajax contentType定义 | null
dataGetter | Function | 列表数据获取函数 | null
urlParms | Object | url附带参数(可以是函数) | null
selectBoxRender | Function | 自定义下拉框的内容 | null
selectBoxRenderUpdate | Function | 自定义下拉框(发送值改变) | null
detailEnabled | Bool | 启用明细数据 | true
detailUrl | String | 明细数据URL | true
detailPostIdField | String | 提交数据id字段名 | true
detailDataParmName | String | 返回数据data字段名 |
detailParms | String | 明细数据请求附带参数 | null
detailDataGetter | Function | 明细数据请求返回数据获取显示数据函数 | null
delayLoad | Bool | 是否延时加载 | false
triggerToLoad | Bool | 是否在点击下拉按钮时加载 | false
autocompleAllowEmpty | Bool | 是否允许空值搜索 | false
isRowReadonly | Function | 选项是否只读的判定函数 | null
rowClsRender | String | 选项行class name 自定义函数 | null
keySupport | Bool | 按键支持 | false
conditionSearchClick | Function | 下拉框表格搜索按钮自定义函数 |

columns参数 示例：

 1 var dataGrid = [
 2                 { id: 1, name: '李三', sex: '男' },
 3                 { id: 2, name: '李四', sex: '女' },
 4                 { id: 3, name: '赵武', sex: '女' },
 5                 { id: 4, name: '陈留', sex: '女' }
 6                 ];
 7             $("#txtGrid").ligerComboBox({
 8                 data: dataGrid,
 9                 textField: 'name',
10                 columns: [
11                 { header: 'ID', name: 'id', width: 20 },
12                 { header: '名字', name: 'name' },
13                 { header: '性别', name: 'sex' }
14                 ],
15                 selectBoxWidth: 200
16             });

tree参数 示例：

1 $("#txt3").ligerComboBox({
2                 width: 180,
3                 selectBoxWidth: 200,
4                 selectBoxHeight: 200, valueField: 'text',
5                 tree: { url: '../tree/tree.json' }
6             });

grid参数 示例：

 1 $("#txt1").ligerComboBox({
 2                 width: 250, slide: false,
 3                 selectBoxWidth: 500, selectBoxHeight: 240,
 4                 valueField: 'CustomerID', textField: 'CustomerID',
 5                 grid: {
 6                     columns: [
 7                     { display: '顾客', name: 'CustomerID', align: 'left', width: 100, minWidth: 60 },
 8                     { display: '电话', name: 'Phone', width: 100 },
 9                     { display: '城市', name: 'City', width: 100 },
10                     { display: '国家', name: 'Country', width: 100 }
11                     ], switchPageSizeApplyComboBox: false,
12                     data: $.extend({}, CustomersData),
13                     pageSize: 30,
14                     checkbox: true
15                 }
16             });

condition参数 示例：

 1 $("#txt1").ligerComboBox({
 2                 width: 250,
 3                 slide: false,
 4                 selectBoxWidth: 500,
 5                 selectBoxHeight: 240,
 6                 valueField: 'CustomerID',
 7                 textField: 'CustomerID',
 8                 grid: getGridOptions(true),
 9                 condition: { fields: [{ name: 'CompanyName', label: '客户', width: 90 }] }
10             });

addRowButtonClick参数 示例：

 1 var dialog = null, combobox;
 2         $(function ()
 3         {
 4             combobox = $("#test1").ligerComboBox({
 5                 data: [
 6                     { text: '张三', id: '1' },
 7                     { text: '李四', id: '2' },
 8                     { text: '赵武', id: '44' }
 9                 ],
10                 emptyText: '（空）',            //空行
11                 addRowButton: '新增',           //新增按钮
12                 addRowButtonClick: function ()  //新增事件
13                 {
14                     combobox.clear();
15                     dialog = $.ligerDialog.open({
16                         height: 300,
17                         width: 400,
18                         title: '打开窗口提示',
19                         url: 'addNew.htm',
20                         showMax: false,
21                         showToggle: true,
22                         showMin: false,
23                         isResize: true,
24                         slide: false,
25                         data: {
26                             callback: afterSave
27                         }
28                     });
29                 }
30             });
31         });
32         function afterSave(data)
33         {
34             dialog.close();
35             combobox.addItem(data);
36             combobox.setValue(data.id, data.text);
37         }
38
39
40
41 addNew.html:
42
43   <script type="text/javascript">
44         var dialog = frameElement.dialog; //调用页面的dialog对象(ligerui对象)
45
46         function f_save()
47         {
48             var form = liger.get("form1");
49             var dialogData = dialog.get('data');
50
51             var data = form.getData();
52             data.id = 1001; //这里虚拟这个是保存后返回的
53             dialogData.callback(data);
54         }
55
56     </script>
57
58 </head>
59 <body style="padding:10px">
60   <div id="form1" class="liger-form">
61         <div class="fields">
62             <input data-type="text" data-label="标题" data-name="text" />
63             <input data-type="textarea" data-label="备注" data-name="remark" />
64         </div>
65     </div>
66   <div class="liger-button" data-click="f_save" data-width="150">保存</div>


ComboBox - jQuery LigerUI API

事件列表

事件名 | 参数 | 描述
onBeforeSelect | (value,text) | 选择前事件
onSelected | (value,text) | 选择事件
onStartResize | () | 下拉框编辑前事件
onEndResize | () | 下拉框编辑后事件
onSuccess | (data) | 加载完事件
onError | (XMLHttpRequest, textStatus) | 错误事件
onBeforeOpen | () | 打开前事件
onButtonClick | () | 右侧图标按钮事件
onAfterSetData | () | 设置完数据事件
onBeforeSetData | () | 设置数据前事件
onTextBoxKeyDown | () | 当焦点位于文本框时按键Down事件
onTextBoxKeyEnter | () | 当焦点位于文本框时按键Enter事件

onBeforeSelect事件 示例：

 1  var proData =
 2             [{ id: 1, text: '广东' },
 3             { id: 2, text: '福建'}];
 4             $("#txtPro").ligerComboBox({ data: proData, isMultiSelect: false,
 5                 onBeforeSelect: function (newvalue)
 6                 {
 7                     alert('要选择的是' + newvalue);
 8                     return confirm('onBeforeSelect事件可以阻止选择，是否继续');
 9                 },
10                 onSelected: function (newvalue)
11                 {
12                     alert('选择的是' + newvalue);
13                 }
14             });

onSelected事件 示例：

 1  var proData =
 2             [{ id: 1, text: '广东' },
 3             { id: 2, text: '福建'}];
 4             var cityData =
 5             [{ id: 1, text: '潮州', pid: 1 },
 6             { id: 2, text: '福州', pid: 1 },
 7             { id: 3, text: '广州', pid: 2 },
 8             { id: 4, text: '厦门', pid: 2}];
 9             $("#pro").ligerComboBox({
10                 data: proData, isMultiSelect: false,
11                 onSelected: function (newvalue)
12                 {
13                     var newData = new Array();
14                     for (i = 0; i < cityData.length; i++)
15                     {
16                         if (cityData[i].pid == newvalue)
17                         {
18                             newData.push(cityData[i]);
19                         }
20                     }
21                     liger.get("city").setData(newData);
22                 }
23             });
24             $("#city").ligerComboBox({ data: null, isMultiSelect: true, isShowCheckBox: true });

onButtonClick事件 示例：

 1  var proData =
 2             [{ id: 1, text: '广东' },
 3             { id: 2, text: '福建'}];
 4             $("#txtPro").ligerComboBox({ data: proData, isMultiSelect: false,
 5                 onBeforeSelect: function (newvalue)
 6                 {
 7                     alert('要选择的是' + newvalue);
 8                     return confirm('onBeforeSelect事件可以阻止选择，是否继续');
 9                 },
10                 onSelected: function (newvalue)
11                 {
12                     alert('选择的是' + newvalue);
13                 }
14             });


ComboBox - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
findTextByValue(value) |  | 获取文本
findValueByText(text) |  | 获取值
removeItem(item) |  | 移除项(未完成)
insertItem(item) |  | 插入项(未完成)
addItem(item) |  | 新增项(未完成)
selectValue(value) |  | 选择值
getValue() |  | 获取值
updateStyle() |  | 刷新控件
setValue(value) |  | 设置值
setEnabled(value) |  | 设置可用
setDisabled(value) |  | 设置不可用
getGridHeight() |  | 获取下拉表格的高度
getText() |  | 获取显示文本
setText(value) |  | 设置显示文本
reload() |  | 重新加载数据
getSelected() |  | 获取选择数据


Drag - jQuery LigerUI API

ligerDrag

拖动组件

示例

  1   <script type="text/javascript">
  2
  3         function changeZIndex(obj)
  4         {
  5             $(obj).css("z-index", 2).siblings("div").css("z-index", 1);
  6         }
  7         $(function ()
  8         {
  9             //            $('#rr1,#rr3').ligerDrag({
 10             //                onStartDrag: function (current)
 11             //                {
 12             //                    changeZIndex(current.target[0]);
 13             //                }
 14             //            });
 15
 16             //拖动时不使用代理
 17             var d = $('#rr1').ligerDrag({ proxy: false });
 18
 19             //使用头部,使用默认代理
 20             $('#rr2').ligerDrag({ handler: '#rr2h' });
 21             //使用自定义代理
 22             $('#rr3').ligerDrag({ proxy: function ()
 23             {
 24                 var div = $("<div class='proxy'>proxy</div>");
 25                 div.width($(this).width());
 26                 div.height(30);
 27                 div.appendTo('body');
 28                 return div;
 29             }
 30             });
 31             //使用副本代理
 32             $('#rr4').ligerDrag({ proxy: 'clone' });
 33
 34             //使用副本代理,并归位
 35             var drag5 = $('#rr5').ligerDrag({ proxy: 'clone', revert: true });
 36
 37             //其实这里可以写成：
 38             //var drag5 = new $.ligerui.controls.Drag({ proxy: 'clone', revert: true, target: $('#rr5')[0] });
 39
 40             //绑定一个事件，改变拖动时的鼠标图标,也可以把onStartDrag作为参数传入,用bind的好处是可以多次绑定
 41             drag5.bind('StartDrag', function ()
 42             {
 43                 //这里this就是drag5,组件管理器,类型为$.ligerui.controls.Drag
 44
 45                 //drag5.cursor = 'not-allowed';
 46                 this.cursor = 'not-allowed';
 47             });
 48
 49
 50             //这里利用receive属性定义了一个接收区域
 51             var drag6 = $('#rr6').ligerDrag({ proxy: 'clone', revert: true
 52             , receive: '#receive'
 53             });
 54             drag6.bind('StartDrag', function ()
 55             {
 56                 this.cursor = 'not-allowed';
 57             });
 58             //当进入区域时
 59             drag6.bind('DragEnter', function (receive, source, e)
 60             {
 61                 drag6.cursor = "pointer";
 62                 $(receive).find(".message").html("进入区域");
 63             });
 64             //在区域移动
 65             drag6.bind('DragOver', function (receive, source, e)
 66             {
 67                 $(receive).find(".message").html("在区域移动 " + e.pageX + ":" + e.pageY);
 68             });
 69             //离开区域
 70             drag6.bind('DragLeave', function (receive, source, e)
 71             {
 72                 this.cursor = "not-allowed";
 73                 $(receive).find(".message").html("离开区域");
 74             });
 75             //在区域释放
 76             drag6.bind('Drop', function (receive, source, e)
 77             {
 78                 source.hide();
 79                 $(receive).find(".txt").val(source.find(".txt").val());
 80                 $(receive).find(".message").html("在区域释放");
 81             });
 82
 83         });
 84
 85     </script>
 86     <style type="text/css">
 87         .proxy
 88         {
 89             border: 1px splid #333;
 90             position: absolute;
 91             z-index: 4;
 92             background: #f1f1f1;
 93         }
 94         .box
 95         {
 96             width: 80px;
 97             height: 80px;
 98             border: 1px solid #ddd;
 99         }
100         .txt
101         {
102             margin: 2px;
103             width: 60px;
104             border: 1px solid #333;
105         }
106     </style>
107 </head>
108 <body style="padding: 10px">
109     <div id="rr1" class="box" style="top: 100px; background: #A6DBD8; position: absolute;"></div>
110     <div id="rr2" class="box" style="top: 100px; left: 100px; background: #AFCCF1; position: absolute;">
111         <div id="rr2h" style="width: 100%; height: 30px; background: #95BBEC; line-height: 30px;">
112         </div>
113     </div>
114     <div id="rr3" class="box" style="top: 100px; left: 200px; background: #DA9188; position: absolute;">
115     </div>
116     <div id="rr4" class="box" style="top: 100px; left: 300px; background: #9CD88A; position: absolute;">
117     </div>
118     <div id="rr5" class="box" style="top: 100px; left: 400px; background: #D09CC5; position: absolute;">
119     </div>
120     <div id="rr6" class="box" style="top: 100px; left: 500px; background: #E2DC6B; position: absolute;">
121         <input type="text" class="txt" value="内容" />
122     </div>
123     <div id="receive" style="top: 300px; left: 100px; position: absolute; width: 200px;
124         height: 200px; padding: 10px; border: 1px solid #888;" onSelectStart= "return false">
125         <p><input type="text" class="txt" value="" /></p>
126         <p>第6个例子 可以拖动到这里，试试</p>
127         <p class="message"></p>
128     </div>
129     <div id="message">
130     </div>
131     <div style="display: none">
132     </div>
133 </body>

截图


Drag - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
handler | String | handler | null
proxy | Object | 代理 拖动时的主体,可以是'clone'或者是函数,返回jQuery 对象 | true
revert | Bool | revert | false
animate | Bool | 动画效果 | true
receive | Bool | receive | false
disabled | Bool | disabled | false
proxyX | Int | 代理相对鼠标指针的位置,如果不设置则对应target的left | null
proxyY | Int | 代理相对鼠标指针的位置,如果不设置则对应target的top | null
clickDelay | Int | 鼠标按下再弹起，如果中间的间隔小于[dragDelay]毫秒，那么认为是点击，不会进行拖拽操作 | 100


Drag - jQuery LigerUI API

事件列表

事件名 | 参数 | 描述
onStartDrag | (current,e) | 开始拖放事件
onDrag | (current,e) | 拖动事件
onStopDrag | (current,e) | 结束拖动事件
onRevert | (current,e) |
onEndRevert | (current,e) |
onDragEnter | (obj,target,e) |
onDragOver | (obj,target,e) |
onDragLeave | (obj,target,e) |
onDrop | (obj,target,e) |


Resizable - jQuery LigerUI API

ligerResizable

调整大小组件

示例

1             $('#rr1').ligerResizable({ handles: 'w, sw, nw' });
2             $('#rr2').ligerResizable({ handles: 's, se, sw' });
3             $('#rr3').ligerResizable();

截图


Resizable - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
handles | string | 调整的位置 | 'n, e, s, w, ne, se, sw, nw'
maxWidth | Int | 最大宽度 | 2000
maxHeight | Int | 最多高度 | 2000
minWidth | Int | 最小宽度 | 20
minHeight | Int | 最小高度 | 20
scope | Int | scope | 3
animate | Bool | 动画效果 | false

handles参数 示例：

1  $('#rr1').ligerResizable({ handles: 'w, sw, nw' });
2             $('#rr2').ligerResizable({ handles: 's, se, sw' });


Resizable - jQuery LigerUI API

事件列表

事件名 | 参数 | 描述
onStartResize | (current,e) | 开始调整大小
onResize | (current,e) | 调整大小
onStopResize | (current,e) | 停止调整大小
onEndResize | (current,e) | 结束调整大小


Filter - jQuery LigerUI API

ligerFilter

过滤器（自定义查询组件）

示例

 1  var fields = [
 2                 { display: '主键', name: 'CustomerID' },
 3                 { display: '公司名', name: 'CompanyName', editor: { type: 'string'} },
 4                 { display: '加入时间', name: 'AddTime', editor: { type: 'date', options: { showTime: true}} },
 5                 { display: '金额', name: 'Amount', type: 'number', editor: { type: 'number', options: { type: 'float'}} }
 6             ];
 7
 8
 9             var filter = $("#filter").ligerFilter({ fields: fields });
10
11             $("#Button1").click(function ()
12             {
13                 var group = filter.getData();
14                 $("#txtGroup").val($.ligerui.toJSON(group));
15             });

截图


Filter - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
fields | Object | 字段列表 | null
operators | Object | 字段类型 - 运算符 的对应关系 | null
editors | Object | 自定义输入框(如下拉框、日期) | null
buttonCls | String | 按钮样式 | null


Filter - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
setData(data) |  | 设置值
getData() |  | 获取数据
getField() |  | 获取字段


Form - jQuery LigerUI API

ligerForm

  • 自定义表单：根据指定的字段列表创建表单(支持自定义字段类型、宽度等)
  • 将表单元素转换为自定义的控件(默认提供了ligerui内置的表单控件集合，你也可以自己定义)

示例

 1    <div id="form1" class="liger-form">
 2         <div class="fields">
 3             <input data-type="text" data-label="标题" data-name="Title" />
 4             <input data-type="date" data-label="入职日期" data-name="addDate" data-newline="false"/>
 5             <div data-type="select" data-label="国家" data-name="Country" >
 6                 <input class="editor"  data-data="getCountryData()" data-onSelected="f_onCountryChanged" data-textField="Country" data-valueField="Country"/>
 7             </div>
 8             <div data-type="select" data-label="城市" data-name="City">
 9                 <input class="editor"  data-textField="City" data-valueField="City"/>
10             </div>
11         </div>
12     </div>
13     <script>
14         //国家 改变事件：清空城市,重新绑定数据
15         function f_onCountryChanged(value)
16         {
17             var combo = liger.get('City');
18             var data = getCityData(value);
19             combo.clear();
20             combo.set('data', data);
21         }
22     </script>

截图


Form - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
inputWidth | Int | 控件宽度 | 180
labelWidth | Int | 标签宽度 | 90
space | Int | 间隔宽度 | 40
rightToken | String | rightToken | '：'
labelAlign | String | 标签对齐方式 | 'left'
align | String | 控件对齐方式 | 'left'
fields | Array | 字段 | []
appendID | String | 创建的表单元素是否附加ID |
prefixID | String |  | null
toJSON | Function | json解析函数 | $.ligerui.toJSON
editorBulider |  |  |
labelCss | String | label Css ClassName | null
fieldCss | String | field Css ClassName | null
spaceCss | String | space Css ClassName | null
buttons | Array | 按钮组 | null
readonly | Bool | 是否只读 | false
editors | Object | 编辑器集合,使用同$.ligerDefaults.Grid.editors | {}
validate | Object | 验证设置 | null
unSetValidateAttr | Bool | 不设置validate | null
width | Int | 宽度 | 0
tab | Object | 页签 | 0

Fields

参数名 | 类型 | 描述 | 默认值
name | String | 字段name | null
textField | String | 文本框name | null
type | String | 元素类型 | null
edtior | Object | 编辑器扩展参数 | null
label | String | 标签 | null
labelInAfter | Bool | label是否后置 | false
afterContent | String | 后置内容 | null
beforeContent | String | 前置内容 | null
hideSpace | Bool | 隐藏空隙部分 | false
hideLabel | Bool | 隐藏标签部分 | false
rightToken | String | 标签后内容 |
attrRender | Function | 自定义字段html属性 |
style | String | 自定义字段css |
containerCls | String | 自定义字段css类名 |
newline | Bool | 是否换行显示 |
validate | Object | 验证支持 |

fields参数 示例：

 1 //创建表单结构
 2             $("form").ligerForm({
 3                 inputWidth: 170, labelWidth: 90, space: 40,
 4                 fields: [
 5                 { name: "ProductID", type: "hidden" },
 6                 { display: "产品名称", name: "ProductName", newline: true, type: "text" , group: "基础信息", groupicon: groupicon},
 7                 { display: "供应商", name: "SupplierID", newline: false, type: "select", comboboxName: "CompanyName", options: { valueFieldID: "SupplierID" } },
 8                 { display: "类别 ", name: "CategoryID", newline: true, type: "select", comboboxName: "CategoryName", options: { valueFieldID: "CategoryID" }, width: 240 },
 9                 { display: "日期 ", name: "AddTime", newline: true, type: "date"  },
10                 { display: "折扣", name: "QuantityPerUnit", newline: false, type: "number" },
11                 { display: "单价", name: "UnitPrice", newline: true,  type: "number" },
12                 { display: "库存量", name: "UnitsInStock", newline: true, type: "digits", group: "库存", groupicon: groupicon },
13                 { display: "订购量", name: "UnitsOnOrder", newline: false, type: "digits" },
14                 { display: "备注", name: "Remark", newline: true, type: "text" ,width:470 }
15                 ]
16             });

tab参数 示例：

form = $("#form2").ligerForm({
                inputWidth: 170, labelWidth: 90, space: 40,
                validate : true,
                fields: [
                { name: "ProductID", type: "hidden" },
                { display: "日期 ", name: "AddTime", newline: true, type: "date" ,validate:{required:true } },
                { display: "折扣", name: "QuantityPerUnit", newline: true, type: "number",validate:{required:true } },
                { display: "单价", name: "UnitPrice", newline: true,  type: "number",validate:{required:true } }
                ],
                tab: {
                    items : [
                        {
                            title: '第一个页签', fields: [
                                   { display: "库存量", name: "UnitsInStock", newline: true, type: "digits"  },
                                    { display: "订购量", name: "UnitsOnOrder", newline: false, type: "digits" }
                            ]
                        },
                        {
                            title: '第二个页签(备注)(隐藏label)', fields: [
                                    { display: "备注", name: "Remark", newline: true, type: "textarea", width: 470, validate: {   }, hideLabel: true }
                            ]
                        }
                    ]
                }
            });


Form - jQuery LigerUI API

事件列表

事件名 | 参数 | 描述
onAfterSetFields | () | 设置字段后事件


Form - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
getField() |  | 获取字段集合
toConditions() |  | 组织条件
getData() |  | 获取数据
setData(data) | data:表单数据 | 设置数据
selectTab(index) |  | 选择页签
setEnabled(args,isEnabled) | args:可以是字符串，也可以是字符串数组 isEnalbed:是否有效 | 设置表单元素可用
setVisible(args,isVisible) | args:可以是字符串，也可以是字符串数组 isVisible:是否显示 | 设置表单元素显示/隐藏
showFieldError(name,errorText) | name:field name errorText:错误信息 | 手工显示字段错误
hideFieldError(name) | name:field name | 手工隐藏字段错误
setFieldValidate(name,validate,messages) | name:field name validate:验证信息 messgees:验证提示信息 | 动态设置字段验证


Radio - jQuery LigerUI API

ligerRadio

单选框组件

示例

1  $("#d1 input:radio").ligerRadio();

截图


Radio - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
disabled | Bool | 是否禁用 | false
readonly | Bool | 是否只读 | false


Radio - jQuery LigerUI API

事件列表

事件名 参数 描述


Radio - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
setValue(value) |  | 设置值
getValue() |  | 获取值
setEnabled(value) |  | 设置可用
setDisabled(value) |  | 设置不可用
updateStyle() |  | 刷新控件


CheckBox - jQuery LigerUI API

ligerCheckBox

复选框组件

示例

1  <input type="checkbox" checked class="liger-checkbox" />

截图


CheckBox - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
disabled | Bool | 是否禁用 | false
readonly | Bool | 是否只读 | false


CheckBox - jQuery LigerUI API

事件列表

事件名 参数 描述


CheckBox - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
updateStyle() |  | 刷新控件
setValue(value) |  | 设置值
getValue() |  | 获取值
setEnabled(value) |  | 设置可用
setDisabled(value) |  | 设置不可用
setValue(value) |  | 设置值
setEnabled() |  | 设置可用
setDisabled() |  | 设置不可用
resize(width,height) |  | 调整大小


Spinner - jQuery LigerUI API

ligerSpinner

数字调整编辑器

示例

1      $("#txt1").ligerSpinner({ height: 28});
2                $("#txt2").ligerSpinner({ height: 28, type: 'int' });
3                $("#txt3").ligerSpinner({ height: 28, type: 'int',isNegative:false });

截图


Spinner - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
type | String | 类型 float:浮点数 int:整数 time:时间 | 'float'
isNegative | Bool | 是否负数 | true
decimalplace | Number | 小数位 type=float时起作用 | 2
step | Number | 每次增加的值 | 0.1
interval | Number | 间隔，毫秒 | 50
minValue | Number | 最小值 | null
maxValue | Number | 最大值 | null
disabled | Bool | 禁用 | false
readonly | bool | 是否只读 | false


Spinner - jQuery LigerUI API

事件列表

事件名 | 参数 | 描述
onChangeValue | (value) | 改变值事件


Spinner - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
setValue(value) |  | 设置值
getValue() |  | 获取值
setEnabled(value) |  | 设置可用
setDisabled(value) |  | 设置不可用
updateStyle() |  | 刷新控件


TextBox - jQuery LigerUI API

ligerTextBox

文本框组件

示例

1   <input type="text" value="测试文本框" class="liger-textbox" />

截图


TextBox - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
width | Int | 宽度 | null
disabled | Bool | 禁止 | null
value | Int | 值 | null
nullText | String | 空文本时提示文本 | null
digits | Bool | 是否限定为数字输入框 | false
number | Bool | 是否限定为浮点数格式输入框 | false
text | String | 显示成文本效果 | null
currency | Bool | 是否显示货币格式 | false
initSelect | Bool | 初始化是否全选 | false
precision | Int | 保留小数位(仅currency时有效) | 2


TextBox - jQuery LigerUI API

事件列表

事件名 | 参数 | 描述
onChangeValue | (value) | 改变值事件
onMouseOver | () | MouseOver
onMouseOut | () | MouseOut
onBlur | () | Blur
onFocus | () | Focus


TextBox - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
checkValue() |  | 检查值
checkNotNull() |  | 检查是否非空
updateStyle() |  | 刷新控件
setValue(value) |  | 设置值
getValue() |  | 获取值
setEnabled(value) |  | 设置可用
setDisabled(value) |  | 设置不可用


DateEditor - jQuery LigerUI API

ligerDateEditor

日期编辑框

示例

1 $("#txt1").ligerDateEditor({ showTime: true, label: '带时间', labelWidth: 100, labelAlign: 'left' });

截图


DateEditor - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
format | String | 格式化 | "yyyy-MM-dd hh:mm"
showTime | Bool | 是否显示时间部分 | false
absolute | Bool | 选择框是否在附加到body,并绝对定位 | true
cancelable | Bool | 是否可以取消选择 | true
readonly | Bool | 是否只读 | false

format参数 示例：

1 $("#txt3").ligerDateEditor(
2                 {
3
4                     format: "MM/dd/yyyy",
5                     label: '格式化日期',
6                     labelWidth: 100,
7                     labelAlign: 'center',
8                     cancelable : false
9             });


DateEditor - jQuery LigerUI API

事件列表

事件名 | 参数 | 描述
onChangeDate | (value) | 改变值事件


DateEditor - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
updateStyle() |  | 刷新控件
setEnabled() |  | 设置可用
setDisabled() |  | 设置不可用
setValue(value) |  | 设置值
getValue() |  | 获取值


PopupEdit - jQuery LigerUI API

ligerPopupEdit

弹出编辑框组件

示例

 1 <body style="padding:10px">
 2
 3    <input type="text" id="popTxt"/>
 4
 5     <br />
 6
 7     <div id="btn1"></div>
 8
 9         <script type="text/javascript">
10
11             $("#btn1").ligerButton({
12                 text: '获取值',
13                 click: function () {
14                     var value = $.ligerui.get("popTxt").getValue();
15                     alert(value);
16                 }
17             });
18
19
20             $("#popTxt").ligerPopupEdit({
21                 condition: {
22                     fields: [{ name: 'CompanyName', label: '客户' }]
23                 },
24                 grid: getGridOptions(true),
25                 valueField: 'CustomerID',
26                 textField: 'CustomerID',
27                 width: 600
28             });
29
30             function getGridOptions(checkbox) {
31                 var options = {
32                     columns: [
33                     { display: '顾客', name: 'CustomerID', align: 'left', width: 100, minWidth: 60 },
34                     { display: '公司名', name: 'CompanyName', minWidth: 120, width: 100 },
35                     { display: '联系名', name: 'ContactName', minWidth: 140, width: 100 },
36                     { display: '电话', name: 'Phone', width: 100 },
37                     { display: '城市', name: 'City', width: 100 },
38                     { display: '国家', name: 'Country', width: 100 }
39                     ], switchPageSizeApplyComboBox: false,
40                     data: $.extend({}, CustomersData),
41                     pageSize: 10,
42                     checkbox: checkbox
43                 };
44                 return options;
45             }
46         </script>
47 </body>
48

截图


PopupEdit - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
valueFieldID | String | 值保存表单隐藏域 | null
css | String | 附加class name | null
nullText | String | 空值时显示的值 | null
disabled | String | 是否无效 | null
cancelable | Bool | 是否允许取消 | null
width | Int | 高度 | null
heigth | Int | 宽度 | null
render | Function | 自定义函数 | null
split | String | 分隔符 | null
grid | Object | 同表格参数 | null
condition | Object | 同表单参数 | null
valueField | String | 值成员字段名 | null
textField | String | 显示成员字段名 | null
readonly | Bool | 是否只读 | false
valueFieldCssClass | String | 隐藏域css | NULL
parms | Object | 异步数据请求参数 | null


PopupEdit - jQuery LigerUI API

事件列表

事件名 | 参数 | 描述
onButtonClick | () | 点击事件

onButtonClick事件 示例：

 1  <input type="text" id="popTxt" class="liger-popupedit" onbuttonclick="f_buttonclick"/>
 2
 3         <script type="text/javascript">
 4             function f_buttonclick() {
 5                 alert('弹出框，然后选择项，调用setValue和setText方法');
 6                 var pop = this;
 7                 this.setValue('1');
 8                 this.setText('弹出框选取的值');
 9             }
10         </script>


PopupEdit - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
clear() |  | 清除
getValue() |  | 获取值
getText() |  | 获取文本
setValue(value) |  | 设置值
setText(text) |  | 设置显示文本
addValue(value) |  | 增加值
removeValue(value) |  | 移除值
setEnabled() |  | 设置可用
setDisabled() |  | 设置不可用
updateStyle() |  | 刷新
resize(width,height) |  | 调整大小


ListBox - jQuery LigerUI API

ligerListBox

列表框组件

示例

 1   <script type="text/javascript">
 2         $(function ()
 3         {
 4             $("#listbox1,#listbox2").ligerListBox({
 5                 isShowCheckBox: true,
 6                 isMultiSelect: true,
 7                 height: 140
 8             });
 9
10             var data = [
11                     { text: '张三', id: '1' },
12                     { text: '李四', id: '2' },
13                     { text: '赵武2', id: '3' },
14                     { text: '赵武3', id: '4' },
15                     { text: '赵武4', id: '5' },
16                     { text: '赵武5', id: '6' },
17                     { text: '赵武6', id: '7' },
18                     { text: '赵武7', id: '8' }
19             ];
20             liger.get("listbox1").setData(data);
21         });
22         function moveToLeft()
23         {
24             var box1 = liger.get("listbox1"), box2 = liger.get("listbox2");
25             var selecteds = box2.getSelectedItems();
26             if (!selecteds || !selecteds.length) return;
27             box2.removeItems(selecteds);
28             box1.addItems(selecteds);
29         }
30         function moveToRight()
31         {
32             var box1 = liger.get("listbox1"), box2 = liger.get("listbox2");
33             var selecteds = box1.getSelectedItems();
34             if (!selecteds || !selecteds.length) return;
35             box1.removeItems(selecteds);
36             box2.addItems(selecteds);
37         }
38         function moveAllToLeft()
39         {
40             var box1 = liger.get("listbox1"), box2 = liger.get("listbox2");
41             var selecteds = box2.data;
42             if (!selecteds || !selecteds.length) return;
43             box1.addItems(selecteds);
44             box2.removeItems(selecteds);
45         }
46         function moveAllToRight()
47         {
48             var box1 = liger.get("listbox1"), box2 = liger.get("listbox2");
49             var selecteds = box1.data;
50             if (!selecteds || !selecteds.length) return;
51             box2.addItems(selecteds);
52             box1.removeItems(selecteds);
53
54         }
55     </script>
56     <style type="text/css">
57         .middle input {
58             display: block;width:30px; margin:2px;
59         }
60     </style>
61 </head>
62 <body style="padding:10px">
63      <div style="margin:4px;float:left;">
64          <div id="listbox1"></div>
65      </div>
66      <div style="margin:4px;float:left;" class="middle">
67          <input type="button" onclick="moveToLeft()" value="<" />
68           <input type="button" onclick="moveToRight()" value=">" />
69           <input type="button" onclick="moveAllToLeft()" value="<<" />
70          <input type="button" onclick="moveAllToRight()" value=">>" />
71      </div>
72     <div style="margin:4px;float:left;">
73         <div id="listbox2"></div>
74     </div>
75 </body>

截图


ListBox - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
isMultiSelect | Bool | 是否多选 | null
isShowCheckBox | Bool | 是否显示复选框 | null
columns | Array | 列 | null
width | Int | 宽度 | 200
height | Int | 高度 | 100
valueField | String | 值成员字段名 | 'id'
textField | String | 显示成员字段名 | 'text'
valueFieldID | String | 值保存表单隐藏域 | null
split | String | 分隔符 | null
data | Object | 数据 | null
parms | Object | 异步数据请求参数 | null
url | String | 异步数据请求地址 | null
render | Function | 自定义html函数 | null
css | String | 附加class name | null
value | String | 初始化值 | null
valueFieldCssClass | String | 隐藏域css | NULL
urlParms | String | url传承(支持函数) | null
ajaxContentType | String | ajax contentType | null

columns参数 示例：

 1 var dataGrid = [
 2                 { id: 1, name: '李三', sex: '男' },
 3                 { id: 2, name: '李四', sex: '女' },
 4                 { id: 3, name: '赵武', sex: '女' },
 5                 { id: 4, name: '陈留', sex: '女' },
 6                 { id: 5, name: '陈留2', sex: '女' },
 7                 { id: 7, name: '陈留3', sex: '女' },
 8                 { id: 6, name: '陈留4', sex: '女' }
 9                 ];
10             var dataGridColumns = [
11                 { header: 'ID', name: 'id', width: 20 },
12                 { header: '名字', name: 'name' },
13                 { header: '性别', name: 'sex' }
14             ];
15             $("#listBox1").ligerListBox({
16                 data: dataGrid,
17                 textField: 'name',
18                 columns: dataGridColumns,
19                 isMultiSelect: true,
20                 isShowCheckBox: true,
21                 width: 200,height:140
22             });


ListBox - jQuery LigerUI API

事件列表

事件名 参数 描述


ListBox - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
clear() |  | 清楚
findTextByValue(value) |  | 找显示文本
indexOf(item) |  | 获取索引
removeItems(items) |  | 移除项集合
removeItem(item) |  | 移除项
insertItem(item,index) |  | 插入项
addItems(items) |  | 增加项集合
addItem(item) |  | 增加项
getSelectedItems() |  | 获取选择项
setValue(value) |  | 设置值
setUrl(url) |  | 设置地址
setParm(name,value) |  | 设置参数
clearContent() |  | 清除内容
setData() |  | 设置数据
refresh() |  | 刷新
getValue() |  | 获取值
updateStyle() |  | 刷新样式
setEnabled() |  | 设置可用
setDisabled() |  | 设置不可用
resize(width,height) |  | 调整大小
selectAll() |  | 选择所有数据
getDataByValue(value) |  | 获取值


RadioList - jQuery LigerUI API

ligerRadioList

单选框列表

示例

 1   <script type="text/javascript">
 2         $(function ()
 3         {
 4             var dataGrid = [
 5                 { id: 1, name: '李三', sex: '男' },
 6                 { id: 2, name: '李四', sex: '女' },
 7                 { id: 3, name: '赵武', sex: '女' },
 8                 { id: 4, name: '陈留', sex: '女' },
 9                 { id: 5, name: '陈留2', sex: '女' },
10                 { id: 7, name: '陈留3', sex: '女' },
11                 { id: 6, name: '陈留4', sex: '女' }
12                 ];
13             $("#radiolist1").ligerRadioList({
14                 data: dataGrid,
15                 textField: 'name'
16             });
17         });
18
19         function getValue()
20         {
21             var value = liger.get("radiolist1").getValue();
22             alert(value);
23         }
24         function setValue()
25         {
26             liger.get("radiolist1").setValue("2");
27         }
28         function setDisabled()
29         {
30             liger.get("radiolist1").set('disabled', true);
31         }
32         function setEnabled()
33         {
34             liger.get("radiolist1").set('disabled', false);
35         }
36     </script>
37 </head>
38 <body style="padding:10px">
39   <div id="radiolist1"></div>
40     <br />
41      <div class="liger-button" data-click="getValue" style="margin-top:9px;">获取值</div>
42  <div class="liger-button" data-click="setValue" style="margin-top:4px;">设置值(2)</div>
43
44  <div class="liger-button" data-click="setDisabled" style="margin-top:4px;">设置不可用</div>
45
46  <div class="liger-button" data-click="setEnabled" style="margin-top:4px;">设置可用</div>
47 </body>

截图


RadioList - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
rowSize | Int | 每行显示表单数 | 4
valueField | String | 值成员字段名 | 'id'
textField | String | 显示成员字段名 | 'text'
valueFieldID | String | 值保存表单隐藏域 | null
name | String | 单选框表单名 | null
data | Object | 数据源 | null
parms | Object | 异步数据请求参数 | null
url | String | 异步数据请求地址 | null
css | String | 附加的class name | null
value | String | 初始化值 | null
valueFieldCssClass | String | 隐藏域css | NULL

data参数 示例：

 1  var dataGrid = [
 2                 { id: 1, name: '李三', sex: '男' },
 3                 { id: 2, name: '李四', sex: '女' },
 4                 { id: 3, name: '赵武', sex: '女' },
 5                 { id: 4, name: '陈留', sex: '女' },
 6                 { id: 5, name: '陈留2', sex: '女' },
 7                 { id: 7, name: '陈留3', sex: '女' },
 8                 { id: 6, name: '陈留4', sex: '女' }
 9                 ];
10             $("#radiolist1").ligerRadioList({
11                 data: dataGrid,
12                 textField: 'name'
13             });


RadioList - jQuery LigerUI API

事件列表

事件名 | 参数 | 描述
OnSelect | () | 选择事件


RadioList - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
clear() |  | 清除
indexOf(item) |  | 获取索引
removeItems(items) |  | 移除项集合
removeItem(item) |  | 移除项
insertItem(item,index) |  | 插入项
addItems(items) |  | 增加项集合
addItem(item) |  | 增加项
setValue(value) |  | 设置值
setUrl(url) |  | 设置地址
setParm(name,value) |  | 设置参数
clearContent() |  | 清除内容
setData(data) |  | 设置数据
refresh() |  | 刷新
getValue() |  | 获取值
updateStyle() |  | 刷新
setEnabled() |  | 设置可用
setDisabled() |  | 设置不可用
resize(width,height) |  | 调整大小


CheckBoxList - jQuery LigerUI API

ligerCheckBoxList

复选框列表组件

示例

 1  <script type="text/javascript">
 2         $(function ()
 3         {
 4             var dataGrid = [
 5                 { id: 1, name: '李三', sex: '男' },
 6                 { id: 2, name: '李四', sex: '女' },
 7                 { id: 3, name: '赵武', sex: '女' },
 8                 { id: 4, name: '陈留', sex: '女' },
 9                 { id: 5, name: '陈留2', sex: '女' },
10                 { id: 7, name: '陈留3', sex: '女' },
11                 { id: 6, name: '陈留4', sex: '女' }
12                 ];
13             $("#checkboxlist1").ligerCheckBoxList({
14                 data: dataGrid,
15                 textField: 'name'
16             });
17         });
18
19         function getValue()
20         {
21             var value = liger.get("checkboxlist1").getValue();
22             alert(value);
23         }
24         function setValue()
25         {
26             liger.get("checkboxlist1").setValue("2;4");
27         }
28         function setDisabled()
29         {
30             liger.get("checkboxlist1").set('disabled', true);
31         }
32         function setEnabled()
33         {
34             liger.get("checkboxlist1").set('disabled', false);
35         }
36     </script>
37 </head>
38 <body style="padding:10px">
39   <div id="checkboxlist1"></div>
40     <br />
41      <div class="liger-button" data-click="getValue" style="margin-top:9px;">获取值</div>
42  <div class="liger-button" data-click="setValue" style="margin-top:4px;">设置值(2;4)</div>
43
44  <div class="liger-button" data-click="setDisabled" style="margin-top:4px;">设置不可用</div>
45
46  <div class="liger-button" data-click="setEnabled" style="margin-top:4px;">设置可用</div>
47 </body>

截图


CheckBoxList - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
rowSize | Int | 每行显示表单数 | 4
valueField | String | 值成员字段名 | 'id'
textField | String | 显示成员字段名 | 'text'
valueFieldID | String | 值保存表单隐藏域 | null
name | String | 复选框name | null
split | String | 分隔符 | ';'
data | Object | 数据 | null
parms | Object | 异步数据请求参数 | null
url | String | 异步数据请求地址 | null
css | String | 附加className | null
value | String | 初始化值 | null
valueFieldCssClass | String | 隐藏域css | NULL

data参数 示例：

 1 var dataGrid = [
 2                 { id: 1, name: '李三', sex: '男' },
 3                 { id: 2, name: '李四', sex: '女' },
 4                 { id: 3, name: '赵武', sex: '女' },
 5                 { id: 4, name: '陈留', sex: '女' },
 6                 { id: 5, name: '陈留2', sex: '女' },
 7                 { id: 7, name: '陈留3', sex: '女' },
 8                 { id: 6, name: '陈留4', sex: '女' }
 9                 ];
10             $("#checkboxlist1").ligerCheckBoxList({
11                 data: dataGrid,
12                 textField: 'name'
13             });


CheckBoxList - jQuery LigerUI API

事件列表

事件名 参数 描述


CheckBoxList - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
clear() |  | 清除值
indexOf(item) | item:value或者object | 获取值索引，找不到返回-1
removeItems(items) |  | 移除项集合
removeItem(item) |  | 移除项
insertItem(item,index) |  | 插入项
addItems(items) |  | 增加项集合
addItem(item) |  | 增加项
setValue(value) |  | 设置值
setUrl(url) |  | 设置url
setParm(name,value) |  | 设置参数
clearContent() |  | 清楚内容
setData(data) |  | 设置数据
refresh() |  | 刷新组件
getValue() |  | 获取值
updateStyle() |  | 刷新
setEnabled() |  | 设置可用
setDisabled() |  | 设置不可用
resize(width,height) |  | 调整大小
refresh() |  | 刷新
getText() |  | 获取选择项(文本模式)


Layout - jQuery LigerUI API

ligerLayout

布局组件

示例

1 $("#layout1").ligerLayout({ leftWidth: 200 });

截图


Layout - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
topHeight | Int | top Height | 50
bottomHeight | Int | bottom Height | 50
leftWidth | Int | left Width | 110
centerWidth | Int | center Width | 300
rightWidth | Int | right Width | 170
InWindow | Bool | 是否以窗口的高度为准 height设置为百分比时可用 | true
heightDiff | Int | 高度补差 | 0
height | String | 高度 | '100%'
isLeftCollapse | Bool | 初始化时 左边是否隐藏 | false
isRightCollapse | Bool | 初始化时 右边是否隐藏 | false
allowLeftCollapse | Bool | 是否允许 左边可以隐藏 | true
allowRightCollapse | Bool | 是否允许 右边可以隐藏 | true
allowLeftResize | Bool | 是否允许 左边可以调整大小 | true
allowRightResize | Bool | 是否允许 右边可以调整大小 | true
allowTopResize | Bool | 是否允许 头部可以调整大小 | true
allowBottomResize | Bool | 是否允许 底部可以调整大小 | true
space | Int | 间隔 | 3
minLeftWidth | Int | 调整左侧宽度时的最小允许宽度 | 80
minRightWidth | Int | 调整右侧宽度时的最小允许宽度 | 80
centerBottomHeight | Int |  | 100
allowCenterBottomResize | Bool | 是否允许调整大小 | true


Layout - jQuery LigerUI API

事件列表

事件名 | 参数 | 描述
onHeightChanged | （e) e:{layoutHeight,diff,middleHeight} | 高度改变事件
onEndResize | (parm,e) parm:{direction,diff} | 结束调整大小事件


Layout - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
setLeftCollapse(isCollapse) |  | 收缩/展开左侧
setRightCollapse(isCollapse) |  | 收缩/展开右侧


Accordion - jQuery LigerUI API

ligerAccordion

LG.submitForm(mainform, function (data) {
                var win = parent || window;
                if (data.IsError) {
                    win.LG.showError('错误:' + data.Message);
                }
                else {
                    win.LG.showSuccess('保存成功', function () {
            if(parent && parent.homepage)
                        {
                            win.LG.closeAndReloadParent(null, "Plugin");
                        }
                        else
                        {
                            LG.closeCurrentDetailPage(true);
                        }
                    });
                }
            });

示例

1 <div id="accordion1" class="liger-accordion" height="300" style="width:160px;">
2     <div title="功能列表1"></div>
3     <div title="功能列表2"></div>
4     <div title="功能列表3"></div>
5 </div>

截图


Accordion - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
height | Int | 高度 | null
speed | String | 动画速度 | 'normal'
changeHeightOnResize | Bool | 自适应高度 | false
heightDiff | Int | 高度补差 | 0

height参数 示例：

1  $("#accordion1").ligerAccordion(
2                 {
3                     height: 300
4                 });


Accordion - jQuery LigerUI API

事件列表

事件名 参数 描述


Accordion - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
onResize() |  | 窗口大小调整刷新
setHeight(height) |  | 设置高度
setHeight(height) |  | 设置高度


Tab - jQuery LigerUI API

ligerTab

Tab组件

示例

 1     <div id="navtab1" style="width: 900px; overflow: hidden; border: 1px solid #D3D3d3;" class="liger-tab">
 2         <div tabid="home" title="我的主页" lselected="true" style="height: 300px">
 3            <div id="maingrid2" style="margin: 10px; height: 300px;">我的主页</div>
 4         </div>
 5         <div title="我的主页2" showclose="true">
 6
 7              <iframe src="form2.htm"></iframe>
 8         </div>
 9         <div title="我的主页3" showclose="true">
10             <div id="Div1" style="margin: 10px; height: 300px;">我的主页3</div>
11         </div>
12         <div title="我的主页4" showclose="true">
13             <div id="Div2" style="margin: 10px; height: 300px;">我的主页4</div>
14         </div>
15     </div>

截图


Tab - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
height | Int | 高度 | null
heightDiff | Int | 高度补差 | 0
changeHeightOnResize | Bool | 自适应高度 | false
contextmenu | Bool | 右键菜单 | true
dblClickToClose | Bool | 双击关闭 | false
dragToMove | Bool | 是否允许拖动时改变tab项的位置 | false
showSwitch | Bool | 显示切换窗口按钮 | null
ShowSwitchInTab | Bool | 切换窗口按钮显示在最后一项 | null


Tab - jQuery LigerUI API

事件列表

事件名 | 参数 | 描述
onBeforeOverrideTabItem | (targettabid) | 覆盖前事件
onAfterOverrideTabItem | (targettabid) | 覆盖后事件
onBeforeRemoveTabItem | (targettabid) | 移除前事件
onAfterRemoveTabItem | (targettabid) | 移除后事件
onBeforeAddTabItem | (targettabid) | 增加前事件
onAfterAddTabItem | (targettabid) | 增加后事件
onBeforeSelectTabItem | (targettabid) | 选择前事件
onAfterSelectTabItem | (targettabid) | 选择后事件
onCloseOther | (targettabid) | 关闭其他事件
onCloseAll |  | 关闭全部事件
onClose | (targettabid) | 关闭事件
onReload |  | 刷新事件
onSwitchRender | () | 当切换窗口层构件时的事件


Tab - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
moveTabItem(fromTabItemID, toTabItemID) |  | 移动
getTabItemCount() |  | Tab的数目
getSelectedTabItemID() |  | 获取选择项ID
removeSelectedTabItem() |  | 移除选择项
overrideSelectedTabItem(options) |  | 覆盖选择的tabitem
overrideTabItem(targettabid, options) |  | 覆盖
selectTabItem(tabid) |  | 选中tab项
isTabItemExist(tabid) |  | 判断tab是否存在
addTabItem(options) |  | 增加一个tab
removeTabItem(tabid) |  | 移除tab项
addHeight(heightDiff) |  | 设置高度
setHeight(height) |  | 设置高度
setContentHeight() |  | 设置内容高度
getNewTabid() |  | 创建一个新的tabid
getTabidList(notabid, noclose) | //notabid 过滤掉tabid的 //noclose 过滤掉没有关闭按钮的 | 获取tabid集合
removeOther(tabid) |  | 关闭其他
reload(tabid) |  | 重新加载
removeAll() |  | 移除全部
onResize() |  | 重新调整大小
setHeader(item,text) |  | 设置项标题
getTabItemTitle(tabid) |  | 获取项标题
setTabItemTitle(tabid,title) |  | 设置项标题
getTabItemSrc(tabid) |  | 获取项URL
setTabItemSrc(tabid,title) |  | 设置项URL
hideTabItem(tabid) |  | 隐藏项
showTabItem(tabid) |  | 显示项

setHeader(item,text)方法 示例：

 1  <div id="navtab1" style="width: 900px; overflow: hidden; border: 1px solid #D3D3d3;" class="liger-tab">
 2         <div tabid="home" title="我的主页" lselected="true" style="height: 300px">
 3            <div id="maingrid2" style="margin: 10px; height: 300px;">我的主页</div>
 4         </div>
 5         <div title="我的主页3" showclose="true">
 6             <div id="Div1" style="margin: 10px; height: 300px;">我的主页3</div>
 7         </div>
 8         <div title="我的主页4" showclose="true">
 9             <div id="Div2" style="margin: 10px; height: 300px;">我的主页4</div>
10         </div>
11     </div>
12     <br />
13     <div class="liger-button" data-click="f_setHeader">改变标题</div>
14
15     <script>
16
17         function f_setHeader()
18         {
19             var tab = liger.get("navtab1");
20             tab.setHeader("home", "改变了文本");
21         }
22     </script>

getTabItemTitle(tabid)方法 示例：

 1  <div id="navtab1" style="width: 900px; overflow: hidden; border: 1px solid #D3D3d3;" class="liger-tab">
 2         <div tabid="home" title="我的主页" lselected="true" style="height: 300px">
 3            <div id="maingrid2" style="margin: 10px; height: 300px;">我的主页</div>
 4         </div>
 5         <div title="我的主页3" showclose="true">
 6             <div id="Div1" style="margin: 10px; height: 300px;">我的主页3</div>
 7         </div>
 8         <div title="我的主页4" showclose="true">
 9             <div id="Div2" style="margin: 10px; height: 300px;">我的主页4</div>
10         </div>
11     </div>
12     <br />
13     <div class="liger-button" data-click="f_setHeader">改变标题</div>
14
15     <script>
16
17         function f_setHeader()
18         {
19             var tab = liger.get("navtab1");
20             tab.setHeader("home", "改变了文本");
21         }
22     </script>

setTabItemTitle(tabid,title)方法 示例：

 1  <div id="navtab1" style="width: 900px; overflow: hidden; border: 1px solid #D3D3d3;" class="liger-tab">
 2         <div tabid="home" title="我的主页" lselected="true" style="height: 300px">
 3            <div id="maingrid2" style="margin: 10px; height: 300px;">我的主页</div>
 4         </div>
 5         <div title="我的主页3" showclose="true">
 6             <div id="Div1" style="margin: 10px; height: 300px;">我的主页3</div>
 7         </div>
 8         <div title="我的主页4" showclose="true">
 9             <div id="Div2" style="margin: 10px; height: 300px;">我的主页4</div>
10         </div>
11     </div>
12     <br />
13     <div class="liger-button" data-click="f_setHeader">改变标题</div>
14
15     <script>
16
17         function f_setHeader()
18         {
19             var tab = liger.get("navtab1");
20             tab.setHeader("home", "改变了文本");
21         }
22     </script>

getTabItemSrc(tabid)方法 示例：

 1  <div id="navtab1" style="width: 900px; overflow: hidden; border: 1px solid #D3D3d3;" class="liger-tab">
 2         <div tabid="home" title="我的主页" lselected="true" style="height: 300px">
 3            <div id="maingrid2" style="margin: 10px; height: 300px;">我的主页</div>
 4         </div>
 5         <div title="我的主页3" showclose="true">
 6             <div id="Div1" style="margin: 10px; height: 300px;">我的主页3</div>
 7         </div>
 8         <div title="我的主页4" showclose="true">
 9             <div id="Div2" style="margin: 10px; height: 300px;">我的主页4</div>
10         </div>
11     </div>
12     <br />
13     <div class="liger-button" data-click="f_setHeader">改变标题</div>
14
15     <script>
16
17         function f_setHeader()
18         {
19             var tab = liger.get("navtab1");
20             tab.setHeader("home", "改变了文本");
21         }
22     </script>

setTabItemSrc(tabid,title)方法 示例：

 1  <div id="navtab1" style="width: 900px; overflow: hidden; border: 1px solid #D3D3d3;" class="liger-tab">
 2         <div tabid="home" title="我的主页" lselected="true" style="height: 300px">
 3            <div id="maingrid2" style="margin: 10px; height: 300px;">我的主页</div>
 4         </div>
 5         <div title="我的主页3" showclose="true">
 6             <div id="Div1" style="margin: 10px; height: 300px;">我的主页3</div>
 7         </div>
 8         <div title="我的主页4" showclose="true">
 9             <div id="Div2" style="margin: 10px; height: 300px;">我的主页4</div>
10         </div>
11     </div>
12     <br />
13     <div class="liger-button" data-click="f_setHeader">改变标题</div>
14
15     <script>
16
17         function f_setHeader()
18         {
19             var tab = liger.get("navtab1");
20             tab.setHeader("home", "改变了文本");
21         }
22     </script>


Panel - jQuery LigerUI API

ligerPanel

面板，可收缩，可自定义内容，允许加载远程页面

示例

1  $("#panel2").ligerPanel({
2                 title: '表单',
3                 width: 700,
4                 height : 500,
5                 url : '../form/form3.htm'
6             });

截图


Panel - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
height | Int | 高度 | 300
width | Int | 宽度 | 400
title | String | 标题 | 'Panel'
content | String | 内容 | null
url | String | 远程内容Url | null
frameName | String | 创建iframe时 作为iframe的name和id | null
data | Object | 可用于传递到iframe的数据 | null
showClose | Bool | 是否显示关闭按钮 | null
showToggle | Bool | 是否显示收缩按钮 | null
icon | String | 左侧按钮 | null
urlParms | String | url传承(支持函数) | null
showRefresh | Bool | 显示刷新按钮 | false


Panel - jQuery LigerUI API

事件列表

事件名 | 参数 | 描述
onClose | () | 关闭前事件
onClosed | () | 关闭后事件
onLoaded | () | url模式 加载完事件


Panel - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
collapse() |  | 收缩
expand() |  | 展开
toggle() |  | 收缩/展开
close() |  | 关闭
show() |  | 显示


Portal - jQuery LigerUI API

ligerPortal

主要功能：

  1. 允许以多行、多列的方式自由得组合出Portal(基于Panel)
  2. 支持各种API方法：新增或删除Panel、加载远程数据等
  3. 支持加载远程数据加载Portal
  4. 支持记忆模式

示例

 1 $("#portalMain").ligerPortal({
 2                 draggable : true,
 3                 columns: [{
 4                     width: 400,
 5                     panels: [{
 6                         title: '行1-列1-模块1',
 7                         width: '100%',
 8                         height: 200,
 9                         url: 'frameContent.htm',
10                         showClose: true
11                     },
12                     {
13                         title: '行1-列1-模块2',
14                         width: '100%',
15                         height: 200,
16                         content: '内容。。。'
17                     }
18                     ]
19                 }, {
20                     width: 400,
21                     panels: [{
22                         title: '行1-列3-模块1',
23                         width: '100%',
24                         height: 200,
25                         content: '内容。。。'
26                     }
27                     ]
28                 }]
29             });

截图


Portal - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
width | Int | 宽度 | null
rows | Object | 列元素： 组件将认为只存在一个row(块), 这一块 允许自定义N个列(column),结构同上 | null
columns | Object | 行元素：组件允许以纵向方式分割为几块 每一块(行)允许自定义N个列(column) 每一列允许自定义N个Panel(最小元素) rows:[ {columns:[ { width : '50%', panels : [{width:'100%',content:'内容'},{width:'100%',url:@url1}] },{ width : '50%', panels : [{width:'100%',url:@url2}] } ]} ] | null
url | string | portal结构定义URL | null
method | string | 获取数据http方式 | null
parms | Object | 提交到服务器的参数 | null
draggable | Bool | 是否允许拖拽 | false


Portal - jQuery LigerUI API

事件列表

事件名 | 参数 | 描述
onLoaded | () | url模式 加载完事件


Portal - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
remove(e) | e:rowIndex、columnIndex、index rowIndex:行序号 columnIndex:列序号 index:Panel序号 | 移出Panel
add(e) | e:rowIndex、columnIndex、index、panel rowIndex:行序号 columnIndex:列序号 index:panel序号 panel:同panel参数 | 增加panel
getPanels() | 数据结构： rowIndex: rowIndex, columnIndex: columnIndex, index: index, panel : ligerUI Panel Object, jpanel : jQuery panel Object | 获取Panels
getPanel(e) | e:rowIndex、columnIndex、index rowIndex:行序号 columnIndex:列序号 index:Panel序号 | 获取指定位置Panel
collapseAll() |  | 收缩全部
expandAll() |  | 展开全部

remove(e)方法 示例：

  g.remove({
                rowIndex: 0,
                columnIndex: 0,
                index:1
            });

add(e)方法 示例：

 1 g.add({
 2                 rowIndex: 0,
 3                 columnIndex: 0,
 4                 panel: {
 5                     title: '行1-列1-新Panel',
 6                     width: '100%',
 7                     height: 100,
 8                     content: '内容XXX'
 9                 }
10             });


Menu - jQuery LigerUI API

ligerMenu

菜单组件

示例

 1    menu = $.ligerMenu({ top: 100, left: 100, width: 120, items:
 2             [
 3             { text: '增加', click: onclick11,icon:'add' },
 4             { text: '修改', click: onclick11  },
 5             { line: true },
 6             { text: '查看', click: onclick11, children:
 7             [
 8             { text: '报表', click: onclick11 },
 9             { text: '导出', children: [{ text: 'Excel', click: onclick11 }, { text: 'Word'}]
10             }
11             ] },
12             { text: '关闭', click: onclick112 }
13             ]
14             });
15             $(document).bind("contextmenu", function (e)
16             {
17                 menu.show({ top: e.pageY, left: e.pageX });
18                 return false;
19             });

截图


Menu - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
width | Int | 宽度 | 120
top | Int | top | 0
left | Int | left | 0
items | Array | items | null
shadow | Bool | 阴影 | true
cls | String | css类名 | null

Items

参数名 | 类型 | 描述 | 默认值
id |  | ID |
text |  | 显示名 |
icon |  | 图标(liger css) |
img |  | 图片路径 |
disable |  | 是否禁用 |
children |  | 子项 |
click | Function | 点击事件 |
dblclick | Function | 双击事件 |

items参数 示例：

 1 menu = $.ligerMenu({ top: 100, left: 100, width: 120, items:
 2             [
 3             { text: '增加', click: onclick11,icon:'add' },
 4             { text: '修改', click: onclick11  },
 5             { line: true },
 6             { text: '查看', click: onclick11, children:
 7             [
 8             { text: '报表', click: onclick11 },
 9             { text: '导出', children: [{ text: 'Excel', click: onclick11 }, { text: 'Word'}]
10             }
11             ] },
12             { text: '关闭', click: onclick112 }
13             ]
14             });
15             $(document).bind("contextmenu", function (e)
16             {
17                 menu.show({ top: e.pageY, left: e.pageX });
18                 return false;
19             });


Menu - jQuery LigerUI API

事件列表

事件名 参数 描述


Menu - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
hide(menu) |  | 隐藏
toggle() |  | 显示/隐藏
removeItem(itemid) |  | 删除
setEnabled(itemid) |  | 设置可用
setDisabled(itemid) |  | 设置不可用
isEnable(itemid) |  | 是否可用
getItemCount() |  | 获取项集合数
addItem(item, menu) |  | 增加项
hideAllSubMenu(menu) |  | 隐藏所有子节点
setEnable(itemid) |  | 设置可用
setDisable(itemid) |  | 设置不可用
setMenuText(itemid,text) |  | 设置项文本


ToolBar - jQuery LigerUI API

ligerToolBar

工具条组件

示例

1  $("#toptoolbar").ligerToolBar({ items: [
2                 { text: '增加', click: itemclick , icon:'add'},
3                 { line:true },
4                 { text: '修改', click: itemclick },
5                 { line:true },
6                 { text: '删除', click: itemclick }
7             ]
8             });

截图


ToolBar - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
items | Array |  |

items参数 示例：

 1  $("#toptoolbar").ligerToolBar({ items: [
 2                 {
 3                     text: '增加', click: function (item)
 4                     {
 5                         alert(item.text);
 6                     }, icon:'add'},
 7                 { line:true },
 8                 { text: '修改', click: itemclick },
 9                 { line:true },
10                 { text: '删除', click: itemclick }
11             ]
12             });


ToolBar - jQuery LigerUI API

事件列表

事件名 参数 描述


ToolBar - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
addItem(item) |  | 增加项
removeItem(item) |  | 移除项
setEnabled() |  | 设置可用
setDisabled() |  | 设置不可用
isEnable() |  | 是否可用


Dialog - jQuery LigerUI API

ligerDialog

弹出框

示例

 1  switch (type)
 2              {
 3                  case "success":
 4                      $.ligerDialog.success('提示内容');
 5                      break;
 6                  case "warn":
 7                      $.ligerDialog.warn('提示内容');
 8                      break;
 9                  case "question":
10                      $.ligerDialog.question('提示内容');
11                      break;
12                  case "error":
13                      $.ligerDialog.error('提示内容');
14                      break;
15                  case "confirm":
16                      $.ligerDialog.confirm('提示内容', function (yes)
17                      {
18                          alert(yes);
19                      });
20                      break;
21                  case "warning":
22                      $.ligerDialog.warning('提示内容', function (type)
23                      {
24                          alert(type);
25                      });
26                      break;
27                  case "prompt":
28                      $.ligerDialog.prompt('提示内容', function (yes, value)
29                      {
30                          if (yes) alert(value);
31                      });
32                      break;
33                  case "prompt2":
34                      $.ligerDialog.prompt('提示内容','初始化值', function (yes, value)
35                      {
36                          if (yes) alert(value);
37                      });
38                      break;
39                  case "prompt3":
40                      $.ligerDialog.prompt('提示内容', true, function (yes, value)
41                      {
42                          if (yes) alert(value);
43                      });
44                      break;
45                  case "prompt4":
46                      $.ligerDialog.prompt('提示内容', '初始化多选框值', true, function (yes, value)
47                      {
48                          if (yes) alert(value);
49                      });
50                      break;
51                  case "waitting":
52                      $.ligerDialog.waitting('正在保存中,请稍候...');
53                      setTimeout(function ()
54                      {
55                          $.ligerDialog.closeWaitting();
56                      }, 2000);
57                      break;
58                  case "waitting2":
59                      var manager = $.ligerDialog.waitting('正在保存中2,请稍候...');
60                      setTimeout(function ()
61                      {
62                          manager.close();
63                      }, 1000);
64                      break;
65              }

截图

静态方法

方法 | 参数 | 描述
$.ligerDialog.open(options) |  | 打开一个自定义对话框
$.ligerDialog.close() |  | 关闭对话框
$.ligerDialog.show(options) |  | 显示或者打开一个对话框
$.ligerDialog.hide() |  | 隐藏所有的对话框
$.ligerDialog.tip(options) |  | 打开一个提示框
$.ligerDialog.alert(content, title, type, callback) |  |
$.ligerDialog.confirm(content, title, callback) |  | 确认框
$.ligerDialog.warning(content, title, callback) |  | 等待提示框
$.ligerDialog.waitting(title) |  | 等待提示框
$.ligerDialog.closeWaitting() |  | 关闭等待提示框
$.ligerDialog.success(content, title, onBtnClick) |  | 成功提示框
$.ligerDialog.error(content, title, onBtnClick) |  | 失败提示框
$.ligerDialog.warn(content, title, onBtnClick) |  | 警告提示框
$.ligerDialog.question(content, title, onBtnClick) |  | 问题提示框
$.ligerDialog.prompt(title, value, multi, callback) |  | 输入提示框


Dialog - jQuery LigerUI API

参数列表

参数名 | 类型 | 描述 | 默认值
cls | String | 给dialog附加css class | null
id | String | 给dialog附加id | null
buttons | Array | 按钮集合 | null
isDrag | Bool | 是否拖动 | true
width | Int | 宽度 | 280
height | Int | 高度 | null
content | String | 内容 | ''
target | Object | 目标对象，指定它将以appendTo()的方式载入 | null
url | String | 标页url，默认以iframe的方式载入目 | null
load | String | 是否以load()的方式加载目标页的内容 | false
type | String | 类型 warn、success、error、question | 'none'
left | Int | 相对窗口left | null
top | Int | 相对窗口top | null
modal | Bool | 是否模态对话框 | true
name | String | 创建iframe时 作为iframe的name和id | null
isResize | Bool | 是否调整大小 | false
allowClose | Bool | 允许关闭 | false
opener | Object | 引用opener到dialog对象 | null
timeParmName | String | 是否给URL后面加上值为new Date().getTime()的参数，如果需要指定一个参数名即可 | null
closeWhenEnter | Bool | 回车时是否关闭dialog | null
isHidden | Bool | 关闭对话框时是否只是隐藏，还是销毁对话框 | null
show | Bool | 初始化时是否马上显示 | true
title | String | 标题 | '提示'
showMax | Bool | 是否显示最大化 | false
showToggle | Bool | 是否显示收缩 | false
showMin | Bool | 是否显示最小化 | false
slide | Bool | 动画效果 | $.browser.msie ? false : true
fixedType | String | 在固定的位置显示, 可以设置的值有n, e, s, w, ne, se, sw, nw | null
showType | String | 显示类型,可以设置为slide(固定显示时有效) | null
contentCls | String | 设置内层div的样式 | null
urlParms | Object | url参数 | null
layoutMode | Int | 布局方式 1 九宫布局, 2 上中下布局 | null


Dialog - jQuery LigerUI API

事件列表

事件名 | 参数 | 描述
onLoaded | () | 加载完事件
onExtend | () | 展开事件
onExtended | () | 展开完事件
onCollapse | () | 收缩事件
onCollapseed | () | 收缩完事件
onContentHeightChange | (height) | 内容区域高度改变事件
onClose | () | 关闭前事件
onClosed | () | 关闭后事件
onStopResize | () | 窗口大小停止调整前事件


Dialog - jQuery LigerUI API

方法列表

方法 | 参数 | 描述
doMax(slide) | slide:是否动画效果 | 最大化
max() |  | 最大化
recover() |  | 恢复
min() |  | 最小化
active() |  | 置于最前方
toggle() |  | 展开/收缩
collapse() |  | 收缩
extend() |  | 展开
enter() |  | 确定
esc() |  | 取消
close() |  | 关闭
hidden() |  | 隐藏
show() |  | 显示
setUrl(url) |  | 设置页面URL
hide() |  | 隐藏 同hidden方法
mask() |  | 加上遮罩
unmask() |  | 取消遮罩