博客园_leo's Space

通用权限管理设计之数据权限

2012-03-20T13:04:00Z

阅读目录

前言
初步分析
通用查询机制
数据权限规则
实际应用
结语

前言

前一篇文章《通用权限管理设计之数据库设计方案》介绍了【主体】- 【领域】 - 【权限】( who、what、how问题原型 ) 的设计思想

本文将对这种设计思想作进一步的扩展，介绍数据权限的设计方案。

权限控制可以理解，分为这几种：

【功能权限】：能做什么的问题，如增加产品。
【数据权限】：能看到哪些数据的问题，如查看本人的所有订单。
【字段权限】：能看到哪些信息的问题，如供应商账户，看不到角色、部门等信息。

上面提到的那种设计就是【功能权限】，这种设计有一定的局限性，对于主体，只能明确地指定。对于不明确的，在这里可能就没办法处理。比如下面这几种情况：

数据仅当前部门及上级可见
数据仅当前用户(本人)可见

类似这样的就需要用到上面提的数据权限。

上一篇文章我用一个表五个字段完成了【功能权限】的设计思路
本文我将介绍如何利用一个表两个字段完成这个【数据权限】的设计思路

初步分析

【数据权限】是在【功能权限】的基础上面进一步的扩展，比如可以查看订单属于【功能权限】的范围，但是可以查看哪些订单就是【数据权限】的工作了。

在设计中，我们规定好如果没有设置了数据权限规则，那么视为允许查看全部的数据。
几个概念
【资源】：数据权限的控制对象，业务系统中的各种资源。比如订单单据、销售单等。属于上面提到的【领域】中的一种
【主体】：用户、部门、角色等。
【条件规则】：用于检索数据的条件定义
【数据规则】：用于【数据权限】的条件规则

应用场景
1，订单，可以由本人查看
2，销售单，可以由本人或上级领导查看
3，销售单，销售人员可以查看自己的，销售经理只查看销售金额大于100,000的。

我们能想到直接的方法，在访问数据的入口加入SQL Where条件来实现，组织sql语句：

1，where UserID = {CurrentUserID}
2，where UserID = {CurrentUserID} or {CurrentUserID} in (领导)
3，where UserID = {CurrentUserID} or ({CurrentUserID} in (销售经理) and 销售金额 > 100000)

这些一个一个的"条件"，本文简单理解为一个【数据规则】，通常会与原来我们前台的业务过滤条件合并再检索出数据。

这是一种最直接的实现方式，在【资源】上面加一个【数据规则】（比如上面的三点）。这样设计就是

【资源】 - 【数据规则】

我又觉得不同的人应该对应不同的规则，那么也可以理解为，一个用户对应不同的角色，每一个角色有不一样的【数据规则】，那么设计就变成

【资源】 - 【主体】 - 【数据规则】

根据提供者的不同，准备不同的权限应对策略。

这里可以简单地介绍一下，这个方案至少需要2张表，一个是【资源，主体，规则关系表】、一个是【数据规则表】

关系表不能直接保存角色，因为你不确定什么时候业务需要按照【部门】或者【分公司】来定义数据规则
于是可以用 Master、MasterKey 类似这样的两个字段来确定一个【主体】

用XML方式的话是这样配置的(放在数据库也类似)：

<?xml version="1.0" encoding="utf-8"?>
<settings>
<rule view="订单" role="销售人员">
销售员 = {CurrentUserID}
</rule>
<rule view="订单" role="总销售经理">
销售金额 > 100000
</rule>
<rule view="订单" role="区域销售经理">
销售金额 > 100000 and 区域 = {当前用户所属区域}
</rule>
</settings>

对于这种方式有兴趣的朋友也可以试一下，两种方式的【数据规则】是一样的，但是本文没有采用第二种设计方式，因为它多了一层处理逻辑，我以为应该设计越简单越好，就采用第一种方式：

【资源】 - 【数据规则】

当然，上面是用SQL的方式来确定条件规则的，我们当然不会这么做。SQL虽然灵活，但是我们很难去维护，也不知道SQL在我们的界面UI上面如何体现。难不成直接用一个文本框来显示。这样对应一个开发人员来说不是问题，可是对应系统管理员，很容易出问题。所以我们需要有另一方式来确定这一规则，并最终可以转换成我们的SQL语句。

我们的设计关键在于如何规范好这些【数据规则】，这个规则必须是对前端友好的，而且是对后台友好的，JSON显然是很好的方式。

规则说明：
1，数据权限规则总是：｛属性条件允许值｝
2，数据权限规则可以合并。比如（ {当前用户属于销售人员} and {订单销售员等于当前用户} ) Or {当前用户属于销售经理}
3，最终我们会用JSON格式

在检索数据时会先判断有没有注册了某某【资源】的【条件规则】，如果有，那么加载这个【条件规则】并合并到我们前台的【搜索条件】（你的业务界面应该有一个搜索框吧）

如下图定义了客户信息的搜索框，我们搜索客户ID包括AN，我们组织成的规则将会是：

{"rules":[{"field":"CustomerID","op":"like","value":"AN","type":"string"}],"op":"and"}

为了更好地理解【数据规则】，这里介绍一下【通用查询机制】

【通用查询机制】

权限控制总离不开一些条件的限制(比如查看当前部门的单据)，如果没有完善的通用查询规则机制，那么在做权限条件过滤的时候你会觉得很别扭。这里介绍一个通用查询方案，然后再介绍如何实现【数据规则】。

早些时候我写过一篇关于ligerGrid结合.net设计通用处理类的文章《 jQuery liger ui ligerGrid 打造通用的分页排序查询表格(提供下载) 》。里面提到的过滤信息是直接的SQL语句。这是不可靠，而且不安全的。
在前端传输给后台的过滤信息不应该是直接的SQL，而应该是一组过滤规则。在ligerui V1.1.8 已经加入了一个条件过滤器插件，这个插件组成的规则数据才是我受推荐的：
比如如下

{"rules":
[
{"field":"OrderDate","op":"less","value":"2012-01-01"},
{"field":"CustomerID","op":"equal","value":"VINET"}
]
,"op":"and"}

规则描述：
查找顾客VINET所有订单时间小于2011-01-01的单据

这样的数据是安全的，而且是通用的(你甚至可以再加一个OR子查询)。无论是在前端还是后台，无论你使用什么样的组件，都可以很好地利用。

通用后台的翻译，就可以生成这样SQL的参数：

Text:
([OrderDate] < @p1 and [CustomerID] = @p2)
Parameters:
p1:2012-01-01
p2:VINET

下面来点复杂的：查找顾客VINET或者TOMSP，所有订单时间小于2011-01-01的单据

{
"rules":[{"field":"OrderDate","op":"less","value":"2012-01-01"}],
"groups":[
{"rules":[{"field":"CustomerID","op":"equal","value":"VINET"}, {"field":"CustomerID","op":"equal","value":"TOMSP"}],"op":"or"}
],
"op":"and"
}

翻译结果：

Text:([OrderDate] < @p1 and ([CustomerID] = @p2 or [CustomerID] = @p3))
Parameters:
p1:2012-01-01
p2:VINET
p3:TOMSP

这个过滤规则分为三个部分：【分组】、【规则】(字段、值、操作符)、【操作符】(and or)，而自身就是一个分组。
这种简单的结构就可以满足全部的情况。

当然，上面提到的这些条件都是在前台定义(可能是用户在搜索框自己输入的)的，而在后台，我们可能会定义一下【隐藏条件】，比如说【员工只能查看自己的】，要怎么做呢，其实很简单，只需要在后台接收到这个过滤条件(前台toJSON，后台解析JSON)以后，再加上一个过滤规则(隐藏条件)：

{field:'EmployeeID',op:'equal',value:5}

可以将原来的过滤规则当做一个分组加入进行：

{op:'and',groups:[

{"rules":[{"field":"OrderDate","op":"less","value":"2012-01-01"}],
"groups":[
{"rules":[{"field":"CustomerID","op":"equal","value":"VINET"},{"field":"CustomerID","op":"equal","value":"TOMSP"}],"op":"or"}
],"op":"and"}

],rules:[{field:'EmployeeID',op:'equal',value:5}]
}

翻译如下：

Text:
([EmployeeID] = @p1 and ([OrderDate] < @p2 and ([CustomerID] = @p3 or [CustomerID] = @p4)))
Parameters:
p1:5
p2:2012-01-01
p3:VINET
p4:TOMSP

这样的【条件规则】才是我们想要的，不仅在前端可以很好地解析，也可以在后台进行处理。在后台我们会定义跟这种数据结构对应的类，那么再定义一个翻译成SQL的类：

数据权限规则

说了这些，可以开始介绍如何实现【数据规则】了：

上面提到的【隐藏条件】，就是我介绍的【数据规则】
试想一些，这样前台的过滤规则，再加上我们之间定义好的【数据权限】控制过滤条件。不就达到目的了吗。
先看看我们在数据库里保存的这些【数据规则】：

看不明白？那来个清楚一点的：

规则描述
订单：【订单管理员和演示角色可以查看所有的】，【订单查看员】只能查看自己的
产品：【基础信息录入员和演示角色可以查看所有的】，【供应商】只能查看自己的
{CurrentEmployeeID}表示当前的员工。
实质上，我们还可以根据当前用户信息定义需要的参数，比如：
{CurrentUserID} 当前用户Id ，对应表【CF_User】
{CurrentRoleID} 当前角色Id ，对应表【CF_Role】
{CurrentDeptID} 当前用户部门Id，对应表【CF_Department】
{CurrentEmployeeID} 当前用户员工Id，对应表【Employees】(CF_User.EmployeeID)
{CurrentSupplierID} 当前用户供应商Id，对应表【Suppliers】(CF_User.SupplierID)

在数据库中我们直接保存这些用户参数，在“翻译”规则成为SQL时，会替换掉：

比如查看订单，我们得到的SQL，可能是这样的：

Text: SELECT * FROM (SELECT TOP 20 * FROM (SELECT TOP 40 * FROM [Orders] WHERE ( 1=1 and ((@p1 in (@p2,@p3)) or (@p4 = @p5 and [EmployeeID] = @p6))) ORDER BY OrderID ASC) AS tmptableinner ORDER BY OrderID DESC) AS tmptableouter ORDER BY OrderID ASC
Parameters:
@p1[Int32] = 7
@p2[Int32] = 2
@p3[Int32] = 6
@p4[Int32] = 7
@p5[Int32] = 7
@p6[Int32] = 1

{CurrentRuleID} 替换为 7
{CurrentEmployeeID} 替换为1

下图是我们设计【数据权限】的界面，可以选择所有的字段，包括几个用户信息：

这些字段不仅仅只是在文本框中输入值，那么可以自定义数据来源：

var fieldEditors = {};
fieldEditors['Orders'] = {
'ShipCity': { type: 'combobox',
options: {
width: 200,
url: "../handler/select.ashx?view=Orders&idfield=ShipCity&textfield=ShipCity&distinct=true"
}
}
};

效果界面：

实际应用

既然是数据权限控制，如果有一个统一的数据接收入口，我们倒是可以利用这个入口做一些工作。

比如【ligerRM权限管理系统】统一使用 grid.ashx 这个数据处理程序作为列表数据的接收入口。

有了统一的接口，方便做权限的控制，使用过 ligerGrid Javascript表格，或者类似插件的朋友，应该比较清楚服务器的交互原理。
在grid.ashx中，我们会通过
【视图/表名】、【排序信息】、【分页信息】、【过滤信息】
这几个指标来获取指定的数据。

而在实际的业务中，可能会引入权限的控制。比如某某【资源】，只能由当前用户自身才能查看，或者只能由当前用户部门及上级部门才能查看。对于这些控制，我们采用对这些可能做权限控制的【资源】注册一组【条件规则】的方式来进行。

我们将找到view定义好的【数据权限规则】，然后和用户在前台搜索框输入的【搜索规则】合并：

上面的代码就是数据条件合并的例子，这样便得到了我们最终需要的过滤规则。

结语

本文提出了数据权限的一种实现思路，只是本人在做一个web应用时构思的方案，谈不上规范，欢迎提出你的建议意见。

可以在http://case.ligerui.com体验实际的应用效果。

本文链接

分享一个基于ligerui的系统应用案例ligerRM V2(权限管理系统)(提供下载)

2012-03-18T13:49:00Z

阅读目录

简介
系统特色
系统介绍 - 首页
系统介绍 - 列表页
系统介绍 - 明细页(表单)
系统介绍 - 菜单/按钮
系统介绍 - 权限中心
系统介绍 - 数据权限
系统介绍 - 字段权限
系统介绍 - 下拉框应用细节
结语

简介

ligerRM V2是基于 ligerui的web应用系统。以权限管理作为设计重点，引入Northwind作为主要的数据演示模块。权限方面，在上一个版本的基础上面加多了数据权限控制。后台方面采用dot net 3.5框架开发。

系统演示：http://case.ligerui.com
前台插件：jQuery、jQuery.ligerui、jQuery.form.js、jquery.validation
数据交互：liger.Data（一个小型的ORM组件）
源码下载：ligerRMV2

演示账户：

账户	名字	头衔	密码
test3	录入员1	基础数据录入员1	1
test2	录入员2	客户数据录入员2	1
test1	高级演示账号1	高级演示账号1	1
test4	订单查看员1	订单查看员1 - Sales Representative	1
test5	供应商1	供应商1 - Exotic Liquids44	1

系统特色

1，不采用code-behind机制，不使用任何服务器控件，全面将工作放在前台实现，后台只处理数据部分。页面还是用aspx后缀，继承于统一的页面基类(为了方便权限的控制)。

2，极大得避免代码冗余。无论是列表页面还是明细页面，你看到的代码都是极其简洁的，就算是表单，甚至不需要任何的html代码，而是定义【有用的信息】，对【布局】、【数据】有用的【数据结构】，当然表格、搜索框都是如此。

3，统一的数据提交/接收接口，所有的数据请求通过ajax实现，经过 handler/*.ashx处理，针对前台数据请求类型的不同，一共有6个：

ajax.ashx ---- 通用的数据请求入口（表单提交入口、表单加载入口、常用的数据加载入口等等)
grid.ashx ---- 通用的ligerGrid表格数据加载入口
treegrid.ashx ---- 通用的ligerGrid表格树格式数据加载入口
tree.ashx ---- 通用的ligerTree树格式数据加载入口
select.ashx ---- 通用的ligerComboBox数据加载入口
validate.ashx ---- 通用的验证数据验证入口(针对jQuery.validation remote验证)

4，完善的数据权限控制机制。除了基本的 (用户角色) => (模块功能) 这类的功能权限控制，还在数据请求入口做了一点小动作，根据【当前的用户信息】和【配置好的数据权限规则】筛选过滤数据。

5，自动的搜索框、自动的表单。表单和搜索框不再需要一堆复杂冗余的html，而是定义好字段的信息(字段名、宽度、类型等)就可以自动完成页面的构造。

6，自动的表格，同样地表格也只是需要一些配置信息，就可以自动完成。并利用过滤器插件，拥有高级自定义查询功能，和历史查询功能。

系统介绍 - 首页

带权限控制的模块

加载首页时，系统会根据用户的信息加载权限许可的菜单模块：

系统介绍 - 列表页(配置的搜索框、表格、动态的按钮(权限控制))

搜索框、表格不再是一堆html拼出来，而是只定义了与【布局】和【数据】配置信息的。

操作按钮是根据当前页面的权限控制，加载有权限许可的操作按钮。

具体的做法是判断页面的MenuNo(菜单唯一编码)，根据MenuNo和当前用户信息加载权限许可的按钮,MenuNo的获取规则：
优先级一：如果页面定义了ID为“MenuNo”的隐藏域，那么读取这个隐藏域的值，比如：<ipnut type="hidden" id="MenuNo" value="OrderManageOrders" />
优先级二：根据页面URL的QueryString，Name为MenuNo的值
优先级三：根据页面URL进行匹配，/OrderManage/Orders.aspx，MenuNo就是OrderManageOrders

界面效果：

jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细

2012-03-18T10:31:00Z

阅读目录

复选框
多表头
分组
汇总
明细

复选框

grid可以设置复选框模式进行多选，只需要简单的配置

checked:true

获取选中行

如果要获取选中的行，可以用getSelecteds方法：

var rows = g.getSelecteds();
alert(rows.length);

默认选中

有的时候我们想让某一些行初始化的时候就选中，可以用isChecked参数，这是一个函数，使用例子：

$("#maingrid4").ligerGrid({
checkbox: true,
columns: [
{ display: '主键', name: 'CustomerID', align: 'left', width: 120 },
{ display: '公司名', name: 'CompanyName', minWidth: 60 },
{ display: '联系名', name: 'ContactName', width: 50,align:'left' }
{ display: '城市', name: 'City' }
], pageSize:30,
data: CustomersData,
width: '100%', height: '100%', isChecked: f_isChecked
});
function f_isChecked(rowdata)
{
if (rowdata.CustomerID.indexOf('AN') == 0)
return true;
return false;
}

锁定列

如果启动了固定列功能，frozen:true。那么复选框列默认是锁定的，可以通过设置frozenCheckbox参数来解除

frozenCheckbox:false

相关事件

如果你不知道事件如何使用，可以参考

jQuery LigerUI 使用教程入门篇

jQuery LigerUI 使用教程表格篇(1)

多表头

将columns配置为树的格式就可以变成多表头。比如:

columns: [
{ display: '公司信息', columns:
[

{ display: '公司名', name: 'CompanyName', minWidth: 60,width:300 }
]
},
{ display: '个人信息', columns:
[
{ display: '主键', name: 'CustomerID', align: 'left', width: 120 },
{ display: '联系名', name: 'ContactName', width: 50, align: 'left' },
{ display: '城市', name: 'City', headerText: '44444' }
]
}
]

columns可以无限级扩展，也就是说可以三级多表头，也可以是四级多表头，只要你愿意。

分组

分组只需要简单得配置一个参数groupColumnName，插件就可以自动完成。配置groupColumnDisplay可以用于显示分组时的名字：

也可以自定义分组显示的格式：

汇总

汇总有两种方式，一种是针对全部数据的汇总，一直是针对当前页进行汇总

1，全部数据的汇总：一般你绑定的表格数据有Rows和Total属性，你可以增加其他的属性，用于统计使用，比如加上 SumAmount。

totalRender: f_totalRender

function f_totalRender(data, currentPageData)
{
return "总金额数量:"+data.SumAmount;
}

2，当前页数据/分组数据的汇总，针对某一列进行配置，只需要设置totalSummary的type：

也可以自定义汇总单元格的格式：

可以和分组一起工作，只汇总分组的数据：

明细

明细的工作原理很简单，就是在点击明细展开/收缩按钮的时候，会创建一个空白的行(下图代码中得detailPanel)，并获取当前行的数据。我们会根据当前行数据进行一些工作，比如获取明细表的数据，或者是展开当前列表并未列出的一些信息，像图片之类的，也可以展开当前行的编辑行。

明细编辑行：

本文链接

jQuery LigerUI 使用教程表格篇(2) 服务器数据交互

2012-03-18T07:17:00Z

阅读目录

使用远程数据
使用远程数据排序
使用远程数据分页

使用远程数据

ligerGrid允许指定一个url来加载数据，并且支持排序和分页。对于数据格式是有一定的限制的，比如

{
"Rows":[],"Total":0
}

我们需要将要显示的数据放在Rows里面(数组的形式)，将记录数放在Total

Rows和Total这两个字段名不是固定的，可以通过参数进行修改：
root: 'Rows', //数据源字段名
record: 'Total', //数据源记录数字段名

使用远程数据排序

排序在首次加载数据的时候，会判断有没有设置了sortName参数，如果有会往服务器传输排序的信息：

string sortname = context.Request["sortname"];
string sortorder = context.Request["sortorder"];

我们在表头点击的时候，也有可能触发服务器排序的操作：

通常我们会指定默认排序的字段，比如 sortName: 'OrderID'：

sortname和sortorder参数名是可以改变的：

使用远程数据分页

liger grid自带了分页，如果使用本地数据，分页可以不用关心，不过如果用到远程加载数据，那么需要你自己来完成这个分页的操作，根据分页的信息返回相应的数据。

组件会往服务器传输几个分页有用的参数：

服务器端根据这二个参数进行分页处理：

string _pagenumber = context.Request["page"];
string _pagesize = context.Request["pagesize"];

我们需要返回json格式的字符串：

如果还有什么不明白的可以参考：

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

jQuery liger ui ligerGrid 打造通用的分页排序查询表格(提供下载)

或者到论坛提问：

http://bbs.ligerui.com

本文链接

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

2012-03-06T05:58:00Z

阅读目录

准备工作。创建MVC项目，拷贝LIGERUI库到Web程序中。
增加视图和Action，引入jQuery库和ligerUI库的引用，模板页中增加视图的链接
准备数据结构(ligerGrid的调用) 和数据源(增加一个Action,返回JSON格式)
如何分页和排序
源码下载

准备工作。创建MVC项目，拷贝LIGERUI库到Web程序中。

一，准备工作

使用开发工具：Microsoft Visual Studio 2010

使用插件版本： jQuery 1.4.1 、 jQuery LigerUI 1.1.7

二，创建MVC项目

三，下载最新版的ligerui，并拷贝到web的根目录

下载地址：http://ligerui.googlecode.com/

增加视图和Action，引入jQuery库和ligerUI库的引用，模板页中增加视图的链接

一，增加视图

二，增加Action

三，引入jQuery库和ligerui的引用

四：模板页增加视图的链接

准备数据结构(ligerGrid的调用) 和数据源(增加一个Action,返回JSON格式)

一，编写JS代码调用ligerGrid

这里要注意一下URL的格式： /Home/GetData

二，准备数据源(增加一个Action，返回JSON格式)

三，效果

如何分页和排序。

一，ligerGrid服务器端分页的原理

可以利用firebug来调试，可以查看到grid加载分页数据的时候，会往服务器传几个数据：

那么在后台我们需要根据这几个参数返回grid适合的数据：

二，如何使用MVC Action接收并返回数据：

1 public ActionResult GetData2()
2 {
3 //排序的字段名
4 string sortname = Request.Params["sortname"];
5 //排序的方向
6 string sortorder = Request.Params["sortorder"];
7 //当前页
8 int page = Convert.ToInt32(Request.Params["page"]);
9 //每页显示的记录数
10 int pagesize = Convert.ToInt32(Request.Params["pagesize"]);
11
12 IList<Node> list = new List<Node>();
13 var total = 1000;
14 for (var i = 0; i < total; i++)
15 {
16 list.Add(new Node()
17 {
18 id = i,
19 name = "部门" + i,
20 time = DateTime.Now
21 });
22 }
23 //这里模拟排序操作
24 if (sortorder == "desc")
25 list = list.OrderByDescending(c => c.id).ToList();
26 else
27 list = list.OrderBy(c => c.id).ToList();
28
29 IList<Node> targetList = new List<Node>();
30 //这里模拟分页操作
31 for (var i = 0; i < total; i++)
32 {
33 if (i >= (page - 1) * pagesize && i < page * pagesize)
34 {
35 targetList.Add(list[i]);
36 }
37 }
38 var griddata = new { Rows = targetList, Total = total };
39 return Json(griddata);
40 }

三，前台调用

四，效果

源码下载

下载地址：GridMvcApp.7z

本文链接

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

2012-02-05T01:13:00Z

前言
上个版本的发布。有些朋友提出框架图片太大的问题，在这个版本做出了解决。并对树和表格增强了拖拽能力。另外，对Dialog插件也加强了一番。具体的更新可以下载来细看：
jQuery LigerUI V1.1.6.rar

V1.1.6更新记录

基础
[需求]全面优化框架图片
[需求]整理简化皮肤Silvery,需要依赖默认的Aqua

表格
[BUG]修复隐藏列后再次加载数据，隐藏的列会再次显示的问题
[BUG]修复存在行序号时,汇总行错位的问题
[需求]重写列调整,需要依赖ligerResizable
[需求]支持动态设置columns
[需求]支持行移位、表头拖拽

窗口/对话框
[需求]支持最小化、最大化、可收缩

对话框
[需求]支持右下角的提示框

树
[需求]增加节点图标
[需求]增加节点拖拽
本文链接

jQuery LigerUI 使用教程表格篇(1)

2012-01-17T13:11:00Z

阅读目录

第一个例子
数据结构
两种绑定数据的方式
配置column
自定义表头
自定义单元格
排序与分页
事件与方法

第一个例子

简介

ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等。

支持本地数据和服务器数据(配置data或者url)
支持排序和分页(包括Javascript排序和分页)
支持列的“显示/隐藏”
支持多表头
支持固定列
支持明细行
支持汇总行
支持单元格模板
支持编辑表格(三种编辑模式,单元格编辑、行编辑、明细编辑)
支持树表格
支持分组
支持行移位、表头拖拽(新加入)

代码

首先引入基本的css和js文件

1 <link href="http://www.cnblogs.com/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
2 <script src="http://www.cnblogs.com/lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
3 <script src="http://www.cnblogs.com/lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script>

然后就可以使用liger Grid了

1 <div id="maingrid"></div>
2 <script type="text/javascript">
3 var griddata = [
4 { id: '01', name: '部门01' },
5 { id: '02', name: '部门02' },
6 { id: '03', name: '部门03' },
7 { id: '04', name: '部门04' },
8 { id: '05', name: '部门05' },
9 { id: '06', name: '部门06' },
10 { id: '07', name: '部门07' }
11 ];
12
13 var grid = $("#maingrid").ligerGrid({
14 columns: [
15 { name: 'id', display: '序号', width: 200 },
16 { name: 'name', display: '名称', width: 300 }
17 ],
18 data: { Rows: griddata }
19 });
20 </script>

效果

数据结构

表格数据结构

表格数据有两个属性,一个是Rows，一个是Total。其中Rows是一个数据数组，Total是记录的总数。

实则是Total在使用本地数据的时候是不需要提供的。我们使用本地数据的格式可以这样：

1 {
2 Rows: [
3 { id: '01', name: '部门01' },
4 { id: '02', name: '部门02' },
5 { id: '03', name: '部门03' },
6 { id: '04', name: '部门04' },
7 { id: '05', name: '部门05' },
8 { id: '06', name: '部门06' },
9 { id: '07', name: '部门07' }
10 ]
11 }

id、name都是记录的属性,这里是可以任意自定义的,而在配置columns的时候，并不一定要配置相应的列，只需要配置相应显示的列。在后续的操作中，这些属性都可以取得。比如方法getSelected()。自定义单元格函数render。

树形表格数据结构

树形结构师在表格数据的基础上多了一个children的参数，比如：

1 {
2 Rows: [
3 { id: '01', name: '部门01', children: [
4 { id: '0101', name: '部门0101' },
5 { id: '0102', name: '部门0102' },
6 { id: '0103', name: '部门0103' }
7 ]
8 },
9 { id: '02', name: '部门02' },
10 { id: '03', name: '部门03' },
11 { id: '04', name: '部门04' },
12 { id: '05', name: '部门05' },
13 { id: '06', name: '部门06' },
14 { id: '07', name: '部门07' }
15 ]
16 }

两种绑定数据的方式

ligerGrid绑定数据有两种方式，一是使用本地数据，一是使用服务器数据。

在第一个例子中，我们配置了data参数，这种方式是本地方式。另一种方式是配置url参数，使用远程数据。

配置column

表格显示了多少个列,列宽，列单元格要显示的内容都是由columns属性配置，下面是column的配置参数：

1 {
2 display: '序号', //表头列显示的文本,支持html
3 //表头内容自定义函数
4 headerRender: function (column) {
5 return "<b>" + column.display + "</b>";
6 },
7 name: 'id', //单元格映射的行数据属性
8 align: 'center', //单元格内容对齐方式:left/center/right
9 hide: false, //是否隐藏
10 width: 100, //列的宽度
11 minWidth: 50, //列的最小宽度
12 isSort: true, //是否允许此列排序,默认为允许排序
13 isAllowHide: true, //是否允许隐藏,如果允许，将会出现在【显示/隐藏列右键菜单】
14 type: 'string', //类型,用于排序
15 //自定义单元格渲染器
16 render : function (record, rowindex, value, column) {
17 //this 这里指向grid
18 //record 行数据
19 //rowindex 行索引
20 //value 当前的值，对应record[column.name]
21 //column 列信息
22 return value; //返回此单元格显示的HTML内容(一般根据value和row的内容进行组织)
23 },
24 //列汇总
25 totalSummary: {
26 align: 'center', //汇总单元格内容对齐方式:left/center/right
27 type: 'count', //汇总类型sum,max,min,avg ,count。可以同时多种类型
28 render: function (e) { //汇总渲染器，返回html加载到单元格
29 //e 汇总Object(包括sum,max,min,avg,count)
30 return "<div>总数：" + e.count + "</div>";
31 }
32 },
33 //单元格编辑器
34 editor: {
35 type: 'text'
36 },
37 //多表头支持
38 columns: null
39 },

表格的列提供了很完整的接口可以扩展。无论是内容单元格或者是表头单元格都可以对内容、布局、大小进行自定义。

自定义表头

比如表头，我们可以把display直接设置一段html:

1 {
2 display: '<a href="javascript:void(0)">部门</a>', //表头列显示的文本,支持html
3 name: 'name',
4 align: 'left'
5 },

或者使用headerRender：

1 //表头内容自定义函数
2 headerRender: function (column) {
3 return "<b>" + column.display + "</b>";
4 },

效果图

自定义单元格

column的name是定义单元格链接到行数据哪一个属性。比如说上面例子的第一行，把name配置为id，那么显示出来应该就是 "01"，如果配置成name，那么显示出来就是 "部门01"。还有align参数，是确定单元格的对齐方式。

如果没有配置render，那么单元格显示的内容将由name确定。

1 { name: 'id', display: '序号', width: 200 },
2 { name: 'name', display: '名称', width: 300 }

上面介绍的是单元格的默认显示方式。除了这种方式，还可以用格式器和自定义函数。

单元格内容的显示规则：
1，如果配置了render，使用render
2，如果column的type参数扩展了对应的格式化器，那么使用格式化器进行渲染。比如定义了货币格式的格式化器
3，最后才是使用默认显示方式

格式化器

通过扩展$.ligerDefaults.Grid.formatters['columntype']来实现，columntype是column配置的type参数。比如现在要格式化一个货币格式的：

1 $.ligerDefaults.Grid.formatters['currency'] = function (num, column) {
2 //num 当前的值
3 //column 列信息
4 if (!num) return "$0.00";
5 num = num.toString().replace(/\$|\,/g, '');
6 if (isNaN(num))
7 num = "0.00";
8 sign = (num == (num = Math.abs(num)));
9 num = Math.floor(num * 100 + 0.50000000001);
10 cents = num % 100;
11 num = Math.floor(num / 100).toString();
12 if (cents < 10)
13 cents = "0" + cents;
14 for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
15 num = num.substring(0, num.length - (4 * i + 3)) + ',' +
16 num.substring(num.length - (4 * i + 3));
17 return "$" + (((sign) ? '' : '-') + '' + num + '.' + cents);
18 };

这样只要column的type配置为currency。都会使用这个函数来自定义单元格内容

1 { display: '单价', name: 'UnitPrice', align: 'right' ,type:'currency' }

效果图

自定义单元格函数

自定义单元格函数是指配置column的render。我们可以组织任意的html。

1 var grid = $("#maingrid").ligerGrid({
2 columns: [
3 { name: 'id', display: '序号', width: 100,
4 render: function (record, rowindex, value, column) {
5 //this 这里指向grid
6 //record 行数据
7 //rowindex 行索引
8 //value 当前的值，对应record[column.name]
9 //column 列信息
10 return "<a href='edit.htm?id=" + value + "'>编辑</a>";
11 }
12 },
13 { name: 'id', display: '序号', width: 120,
14 render: function (record, rowindex, value, column) {
15 return '<input type="button" value="Add"/><input type="button" value="Edit"/><input type="button" value="Delete"/>';
16 }
17 },
18 { name: 'name', display: '名称', width: 300 }
19 ],
20 data: { Rows: griddata }
21 });

效果图

单元格编辑器

所有的编辑器的构造的定义在$.ligerDefaults.Grid.editors，比如

1 editor: { type: 'spinner' }

将会使用$.ligerDefaults.Grid.editors['spinner'] 进行创建编辑器进行构建。

ligerGrid内置提供了复选框、文本框、日期、数字调整器、下拉框等编辑器。

效果图

column的参数很多,这里不作一一列举，只介绍了几个常用的参数
更多的可以查看api: http://api.ligerui.com

排序和分页

排序和分页也有两种方式。一种是本地排序和分页。一种是服务器排序和分页。这里只介绍本地的方式。

默认的情况。是启用排序和分页的。如果要取消分页功能，如下：

1 usePager: false

效果图

事件和方法

事件

事件名	参数	描述
onAfterAddRow	(e)	增加行后事件
onAfterBeginEdit	(e)	开始编辑后事件
onAfterChangeColumnWidth	(column, newwidth)	改变列宽度事件
onAfterShowData	(data)	显示完数据事件
onAfterSubmitEdit	(e)	提交编辑事件
onBeforeChangeColumnWidth	(column, newwidth)	验证改变列宽度是否通过
onBeforeCheckAllRow	(checked, grid element)	选择前事件，可以通过return false阻止操作(复选框全选/全不选)
onBeforeEdit	(e)	编辑前事件
onBeforeShowData	(data)	显示数据前事件，可以通过reutrn false阻止操作
onBeforeSubmitEdit	(e)	验证编辑器结果是否通过
onBeginEdit	(e)	验证开始编辑是否通过
onCancelEdit	(e)	取消编辑事件
onChangeSort	()	改变排序事件
onCheckAllRow	(checked, grid element)	选择事件(复选框全选/全不选)
onCheckRow	(checked, rowdata, rowindex, rowDomElement)	选择事件(复选框)
onContextmenu	(parm, e)	右击事件
onDblClickRow	(rowdata, rowindex, rowDomElement)	双击行事件
onDragCol	(node)	拖动列事件
onError	()	错误事件
onLoaded	()	加载完函数
onLoading	()	加载时函数
onReload	()	刷新事件，可以通过return false来阻止操作
onSelectRow	(rowdata, rowindex, rowDomElement)	选择行事件
onSubmit	()	提交前事件
onSuccess	()	成功事件
onToFirst	()	第一页，可以通过return false来阻止操作
onToggleCol	()	切换列事件
onToLast	()	最后一页，可以通过return false来阻止操作
onToNext	()	下一页，可以通过return false来阻止操作
onToPrev	()	上一页，可以通过return false来阻止操作
onUnSelectRow	(rowdata, rowindex, rowDomElement)	取消选择行事件

例子

1 var grid = $("#maingrid").ligerGrid({
2 columns: [
3 { name: 'id', display: '序号', width: 200 },
4 { name: 'name', display: '名称', width: 300 }
5 ],
6 data: { Rows: griddata },
7 onSelectRow: function (rowdata, rowindex) {
8 //行记录对于数据行
9 //行索引第几行,从0开始
10 alert(rowdata.name);
11 }
12 });
13 grid.bind('SelectRow', function (rowdata, rowindex) {
14 //this 这里的this都是指向grid
15
16 //行记录对于数据行
17 //行索引第几行,从0开始
18 alert(rowdata.name);
19 });

方法

方法	参数	描述
addEditRow	(rowdata)	增加一个编辑行
addRow	(rowdata, rowParm, isBefore, parentRow)	增加新行
addRows	(rowdataArr)	一次性增加多行
appendRow	(rowData, targetRow, nearRow, isBefore)	附加新行(树模式)
beginEdit	(rowParm)	进入编辑状态
cancelEdit	(rowParm)	取消编辑
changeHeaderText	(columnparm, headerText)	改变表头文本
changePage	(ctype)	改变分页
changeSort	(columnName, sortOrder)	改变排序
collapse	(targetRow)	收缩(树模式)
collapseDetail	(rowParm)	收缩明细
deleteRow	(rowParm)	选择行
deleteSelectedRow	()	删除选择的行
demotion	(targetRow)	降级(树模式)
endEdit	(rowParm)	结束编辑
expand	(targetRow)	展开(树模式)
extendDetail	(rowParm)	展开明细
formatRecord	(record)	格式化数据,删除系统字段
getAdded	()	获取新增的数据
getCheckedRowObjs	()	获取选中的行 DOM对象集合
getCheckedRows	()	获取选中的行数据(复选框)
getChidren	(rowParm)	获取子节点数据(树模式)
getColumn	(columnpam)	获取列信息
getColumns	(columnLevel)	获取指定层级的Columns
getColumnType	(columnname)	根据列名获取列类型
getData	(status, removeStatus)	获取数据
getDeleted	()	获取删除过的数据
getParent	(rowParm)	获取父节点数据(树模式)
getRowObj	(rowParm)	行DOM转换为行数据
getSelected	()	获取选中的行数据(同getSelectedRow)
getSelectedRow	()	获取选中的行数据
getSelectedRowObj	()	获取选中的行 DOM对象
getSelectedRowObjs	()	获取选中的行 DOM对象集合
getSelectedRows	()	获取选中的行数据集合(支持Ctrl多选)
getSelecteds	()	获取选中的行数据集合(支持Ctrl多选)(同getSelectedRows)
getUpdated	()	获取修改过的数据
hasChildren	(rowParm)	是否包括子节点(树模式)
isLeaf	(rowParm)	是否叶节点(树模式)
isTotalSummary	()	是否包含汇总
loadData	(loadDataParm)	刷新数据
loadServerData	(param, clause)	加载数据(服务器)
reRender	(e)	重新加载html
setColumnWidth	(columnparm, value)	调整列宽
setOptions	(parms)	重新设置参数(同名方法set)
SubmitEdit	(rowParm)	提交编辑
toggle	(targetRow)	伸展/收缩节点(树模式)
toggleCol	(columnparm, visible)	显示/隐藏列
updateCell	(cell, value, rowParm)	更新单元格
updateRow	(newRowData, rowDom)	更新行
upgrade	(targetRow)	升级(树模式)

例子

1 <a class="l-button" href="javascript:selectRow(2)">选择行(3)</a>
2 <a class="l-button" href="javascript:getSelectRow()">获取选择</a>

1 var grid = $("#maingrid").ligerGrid({
2 columns: [
3 { name: 'id', display: '序号', width: 200 },
4 { name: 'name', display: '名称', width: 300 }
5 ]
6 });
7
8 grid.set({ data: { Rows: griddata} });
9
10 function selectRow(index) {
11 grid.select(index);
12 }
13 function getSelectRow() {
14 var rows = grid.getSelecteds();
15 for (var i in rows) {
16 alert(rows[i].name);
17 }
18 }

本文链接

jQuery LigerUI 使用教程入门篇

2012-01-16T15:40:00Z

阅读目录

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

获取最新代码

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

简介

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

回到顶部

ligerUI是什么

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

基础：Resizable、Drag、Tip
导航：Menu、MenuBar、ToolBar
布局：Layout、Tab
表单：Form、TextBox、Button、CheckBox、ComboBox、DateEditor、Radio、Spinner
表格：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();
}

本文链接

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

2012-01-15T16:22:00Z

前言
2个月前以博文的形式发布了V1.1.0,到现在已经更新了5个版本,V1.1.3引入了core机制,提供了ligerui内置事件处理机制、属性动态设置机制等等,搭建了ligerui系列插件的基础。并在下一个版本进一步做了补充。
V1.1.5主要是对表格进行进一步地加强,目前已经支持固定列、完美的多表头,并对表格的编辑能力优化了一番,支持行编辑模式和明细编辑模式,用户可以自己定义编辑器,比如使用外部的日期第三方控件,都可以引入到ligerGrid里面来。
发布的版本将提供chm版本的api,方便用户查看。

V1.1.5更新记录

表格
[需求]固定列
[需求]多表头支持跨行合并
[需求]增加行编辑模式
[需求]增加明细编辑模式
[需求]增加扩展接口：排序、格式化器,优化扩展接口：编辑器
[需求]选择行支持Ctrl选择
[需求]明细框可以设置高度(detail参数增加onExtend、onCollapse 和height)
[需求]参数移除renderDate、dblClickToEdit 方法移除stringToDate、getFormatDate
[需求]增加参数detailToEdit、frozen、frozenDetail、frozenCheckbox、detailHeight、rownumbers、frozenRownumbers、rownumbersColWidth；
增加方法beginEdit、SubmitEdit、cancelEdit、reRender、addEditRow、extendDetail、collapseDetail、getSelectedRows(支持Ctrl)、getSelected、getSelecteds、getSelectedRowObjs；
增加事件onBeforeChangeColumnWidth、onAfterChangeColumnWidth、onBeginEdit、onAfterBeginEdit、onCancelEdit、onBeforeSubmitEdit、onAfterSubmitEdit

表单
[需求]combobox 增加事件onToggle、onShow、onHide

树
[BUG]修复右键菜单不触发的问题

V1.1.4更新记录

核心
[需求]增加方法的调用方式：liger{Plugin}(method)
[需求]增加获取属性的调用方式：liger{Plugin}("option",name)
[需求]增加设置属性的调用方式：liger{Plugin}("option",name,value)

综合
[BUG]修复V1.1.3部分插件没有触发事件的BUG

表单
[BUG]修复V1.1.3验证出现的气泡没有消失的BUG

布局
[需求]Tab控件增加双击关闭页签
[需求]Tab控件增加拖动页签功能

V1.1.3更新记录

核心
[需求]引入core/base.js,每一个插件都需要依赖这个文件,其提供了ligerui内置事件处理机制、属性动态设置机制等等
[需求]每一个插件拥有get、set、bind、trigger的方法

基础
[优化]优化了ligerResizable和ligerDrag
[需求]ligerDrag增加副本模式
[需求]ligerDrag增加指定区域释放拖动(Drop)的支持

V1.1.2更新记录

综合
[需求]给每一个插件提供onRender和onRendered接口

表格
[需求]为表格编辑器提供扩展接口
[需求]参数onRClickToSelect(右击行时是否选中)改名whenRClickToSelect
[需求]增加参数clickToEdit、minColumnWidth
[需求]增加事件onEndEdit
[需求]增加方法setColumnWidth(调整列宽)
[需求]参数onRClickToSelect改名whenRClickToSelect

对话框
[优化]移除ligerDialogImagePath,改为$.ligerui.DialogImagePath
[需求]添加设置url方法
[需求]增加加载完成事件onloaded
[需求]增加参数：show、title

Window
[需求]添加load远程文件方法和设置url方法

气泡
[优化]优化气泡控件

树
[需求]增加方法arrayToTree

V1.1.1更新记录

综合
[需求]给每一个组件管理器提供扩展接口

表格
[需求]增加addRows方法,一次性增加多行,参数为行数据数组
[需求]增加了表格列初始化隐藏的属性hide
[BUG]解决表格返回的数据为空时页面不反应的问题
[BUG]解决表格隐藏列以后排序,依旧会把依把已经隐藏的数据显示出来的问题
[BUG]解决在表头右键会出现【显示/隐藏列】，但是在表头点击【显示/隐藏列】不消失的问题
[BUG]解决在表格的最后一列点击鼠标右键显示【显示/隐藏列】，【显示/隐藏列】错位的问题
[BUG]解决在表格隐藏列以后，如果是明细情况，明细的宽度没有根据现有显示列改变的问题
[BUG]解决调用显示/隐藏列后【显示/隐藏列菜单】没有更新的问题
[BUG]解决树表格启用编辑状态时数据没有更新准确的问题
[BUG]解决分组模式下启用明细出现问题的BUG
[BUG]解决分组、明细展开框显示时没有右边框的问题
[BUG]解决统计时存在明细或者复选框不能准确显示的问题
[BUG]解决分组显示时，收缩所有分组不能准确显示的问题
[BUG]解决隐藏列后，调整表头宽度不能准确显示的问题

下拉框
[BUG]解决带分页下拉框在调整grid宽度时没反应的问题

表单
[BUG]解决不能设置text长度。text本身是可以设置，但在form里初始化text时，没传参数的问题
[需求]统一为每一个表单元素"管理器"提供设置只读、获取值、设置值的接口
界面展示：

V1.1.5支持固定列

多表头支持跨列合并：

行编辑模式：

明细编辑模式：

本文链接

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

2011-11-20T07:15:00Z

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

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

源码下载:http://ligerui.googlecode.com/

技术支持：http://www.cnblogs.com/leoxie2011/

V1.1.0更新记录：

表格

[需求]加入分组模式

[需求]加入树模式

[需求]加入统计行(位于底部)

[需求]加入延时加载

[需求]加入本地查询支持

[需求]加入复选框初始化的支持

[需求]列百分比

[需求]列显示和隐藏

[需求]列表头改变文字

[需求]编辑器事件: 编辑前事件、验证编辑器结果是否通过、结束编辑后事件

[需求]增加右击接口

[需求]多表头

[优化]grid新增行的时候可通过column的defaultValue进行设置默认值

[修复]grid的编辑功能和checkbox多选功能存在冲突

[修复]修复加载时不显示loading的问题，并加入自定义加载时的支持

[修复]修改grid addRow()如果没有数据的时候row没有高度

[修复]修改可编辑grid中DateEditor编辑错误的问题

下拉框

[需求]支持动态改变值

[需求]增加打开下拉框前事件，利用这个参数可以用来调用其他函数，比如打开一个新窗口来选择值

表单

[需求]spinner支持最大最小值

树

[需求]增加选择/反选择节点接口

弹窗

[需求]支持回车关闭

[修复]dialog.frame浏览器兼容支持

界面展示：

多表头1:

多表头2：

分组支持：

树支持：

在新窗口在选取数据：

本文链接

博客园_leo's Space

通用权限管理设计之数据权限

分享一个基于ligerui的系统应用案例ligerRM V2(权限管理系统)(提供下载)

jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细

jQuery LigerUI 使用教程表格篇(2) 服务器数据交互

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

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

前言
上个版本的发布。有些朋友提出框架图片太大的问题，在这个版本做出了解决。并对树和表格增强了拖拽能力。另外，对Dialog插件也加强了一番。具体的更新可以下载来细看：
jQuery LigerUI V1.1.6.rar

相关链接
API: http://api.ligerui.com/
演示地址:http://demo.ligerui.com/
源码下载:http://ligerui.googlecode.com/
技术支持：http://www.cnblogs.com/leoxie2011/

V1.1.6更新记录

基础
[需求]全面优化框架图片
[需求]整理简化皮肤Silvery,需要依赖默认的Aqua

表格
[BUG]修复隐藏列后再次加载数据，隐藏的列会再次显示的问题
[BUG]修复存在行序号时,汇总行错位的问题
[需求]重写列调整,需要依赖ligerResizable
[需求]支持动态设置columns
[需求]支持行移位、表头拖拽

窗口/对话框
[需求]支持最小化、最大化、可收缩

对话框
[需求]支持右下角的提示框

树
[需求]增加节点图标
[需求]增加节点拖拽
本文链接

jQuery LigerUI 使用教程表格篇(1)

jQuery LigerUI 使用教程入门篇

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

相关链接
API: http://api.ligerui.com/
演示地址:http://demo.ligerui.com/
源码下载:http://ligerui.googlecode.com/
技术支持：http://www.cnblogs.com/leoxie2011/

V1.1.5更新记录

表单
[需求]combobox 增加事件onToggle、onShow、onHide

树
[BUG]修复右键菜单不触发的问题

V1.1.4更新记录

核心
[需求]增加方法的调用方式：liger{Plugin}(method)
[需求]增加获取属性的调用方式：liger{Plugin}("option",name)
[需求]增加设置属性的调用方式：liger{Plugin}("option",name,value)

综合
[BUG]修复V1.1.3部分插件没有触发事件的BUG

表单
[BUG]修复V1.1.3验证出现的气泡没有消失的BUG

布局
[需求]Tab控件增加双击关闭页签
[需求]Tab控件增加拖动页签功能

V1.1.3更新记录

核心
[需求]引入core/base.js,每一个插件都需要依赖这个文件,其提供了ligerui内置事件处理机制、属性动态设置机制等等
[需求]每一个插件拥有get、set、bind、trigger的方法

基础
[优化]优化了ligerResizable和ligerDrag
[需求]ligerDrag增加副本模式
[需求]ligerDrag增加指定区域释放拖动(Drop)的支持

V1.1.2更新记录

综合
[需求]给每一个插件提供onRender和onRendered接口

对话框
[优化]移除ligerDialogImagePath,改为$.ligerui.DialogImagePath
[需求]添加设置url方法
[需求]增加加载完成事件onloaded
[需求]增加参数：show、title

Window
[需求]添加load远程文件方法和设置url方法

气泡
[优化]优化气泡控件

树
[需求]增加方法arrayToTree

V1.1.1更新记录

综合
[需求]给每一个组件管理器提供扩展接口

下拉框
[BUG]解决带分页下拉框在调整grid宽度时没反应的问题

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

博客园_leo's Space

通用权限管理设计 之 数据权限

分享一个基于ligerui的系统应用案例ligerRM V2(权限管理系统)(提供下载)

jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细

jQuery LigerUI 使用教程表格篇(2) 服务器数据交互

jQuery LigerUI 表格LigerGrid 结合 ASP.NET MVC 显示数据

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

前言上个版本的发布。有些朋友提出框架图片太大的问题，在这个版本做出了解决。并对树和表格增强了拖拽能力。另外，对Dialog插件也加强了一番。具体的更新可以下载来细看：jQuery LigerUI V1.1.6.rar

相关链接 API: http://api.ligerui.com/ 演示地址:http://demo.ligerui.com/ 源码下载:http://ligerui.googlecode.com/ 技术支持：http://www.cnblogs.com/leoxie2011/

V1.1.6更新记录

基础[需求]全面优化框架图片[需求]整理简化皮肤Silvery,需要依赖默认的Aqua

表格[BUG]修复 隐藏列后 再次加载数据，隐藏的列会再次显示 的问题[BUG]修复存在行序号时,汇总行错位的问题[需求]重写列调整,需要依赖ligerResizable[需求]支持动态设置columns[需求]支持行移位、表头拖拽

窗口/对话框[需求]支持最小化、最大化、可收缩

对话框[需求]支持 右下角的提示框

树[需求]增加节点图标[需求]增加节点拖拽本文链接

jQuery LigerUI 使用教程表格篇(1)

jQuery LigerUI 使用教程入门篇

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

相关链接 API: http://api.ligerui.com/ 演示地址:http://demo.ligerui.com/ 源码下载:http://ligerui.googlecode.com/ 技术支持：http://www.cnblogs.com/leoxie2011/

V1.1.5更新记录

表单[需求]combobox 增加事件onToggle、onShow、onHide

树[BUG]修复右键菜单不触发的问题

V1.1.4更新记录

核心[需求]增加方法的调用方式：liger{Plugin}(method)[需求]增加获取属性的调用方式：liger{Plugin}("option",name)[需求]增加设置属性的调用方式：liger{Plugin}("option",name,value)

综合[BUG]修复V1.1.3部分插件没有触发事件的BUG

表单[BUG]修复V1.1.3验证出现的气泡没有消失的BUG

布局[需求]Tab控件增加双击关闭页签[需求]Tab控件增加拖动页签功能

V1.1.3更新记录

核心[需求]引入core/base.js,每一个插件都需要依赖这个文件,其提供了ligerui内置事件处理机制、属性动态设置机制等等[需求]每一个插件拥有get、set、bind、trigger的方法

基础[优化]优化了ligerResizable和ligerDrag[需求]ligerDrag增加副本模式[需求]ligerDrag增加指定区域释放拖动(Drop)的支持

V1.1.2更新记录

综合[需求]给每一个插件提供onRender和onRendered接口

对话框[优化]移除ligerDialogImagePath,改为$.ligerui.DialogImagePath[需求]添加设置url方法[需求]增加加载完成事件onloaded[需求]增加参数：show、title

Window[需求]添加load远程文件方法和设置url方法

气泡[优化]优化气泡控件

树[需求]增加方法arrayToTree

V1.1.1更新记录

综合[需求]给每一个组件管理器提供扩展接口

下拉框[BUG]解决带分页下拉框在调整grid宽度时没反应的问题

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

通用权限管理设计之数据权限

前言
上个版本的发布。有些朋友提出框架图片太大的问题，在这个版本做出了解决。并对树和表格增强了拖拽能力。另外，对Dialog插件也加强了一番。具体的更新可以下载来细看：
jQuery LigerUI V1.1.6.rar

相关链接
API: http://api.ligerui.com/
演示地址:http://demo.ligerui.com/
源码下载:http://ligerui.googlecode.com/
技术支持：http://www.cnblogs.com/leoxie2011/

基础
[需求]全面优化框架图片
[需求]整理简化皮肤Silvery,需要依赖默认的Aqua

表格
[BUG]修复隐藏列后再次加载数据，隐藏的列会再次显示的问题
[BUG]修复存在行序号时,汇总行错位的问题
[需求]重写列调整,需要依赖ligerResizable
[需求]支持动态设置columns
[需求]支持行移位、表头拖拽

窗口/对话框
[需求]支持最小化、最大化、可收缩

对话框
[需求]支持右下角的提示框

树
[需求]增加节点图标
[需求]增加节点拖拽
本文链接

相关链接
API: http://api.ligerui.com/
演示地址:http://demo.ligerui.com/
源码下载:http://ligerui.googlecode.com/
技术支持：http://www.cnblogs.com/leoxie2011/

表单
[需求]combobox 增加事件onToggle、onShow、onHide

树
[BUG]修复右键菜单不触发的问题

核心
[需求]增加方法的调用方式：liger{Plugin}(method)
[需求]增加获取属性的调用方式：liger{Plugin}("option",name)
[需求]增加设置属性的调用方式：liger{Plugin}("option",name,value)

综合
[BUG]修复V1.1.3部分插件没有触发事件的BUG

表单
[BUG]修复V1.1.3验证出现的气泡没有消失的BUG

布局
[需求]Tab控件增加双击关闭页签
[需求]Tab控件增加拖动页签功能

核心
[需求]引入core/base.js,每一个插件都需要依赖这个文件,其提供了ligerui内置事件处理机制、属性动态设置机制等等
[需求]每一个插件拥有get、set、bind、trigger的方法

基础
[优化]优化了ligerResizable和ligerDrag
[需求]ligerDrag增加副本模式
[需求]ligerDrag增加指定区域释放拖动(Drop)的支持

综合
[需求]给每一个插件提供onRender和onRendered接口

对话框
[优化]移除ligerDialogImagePath,改为$.ligerui.DialogImagePath
[需求]添加设置url方法
[需求]增加加载完成事件onloaded
[需求]增加参数：show、title

Window
[需求]添加load远程文件方法和设置url方法

气泡
[优化]优化气泡控件

树
[需求]增加方法arrayToTree

综合
[需求]给每一个组件管理器提供扩展接口

下拉框
[BUG]解决带分页下拉框在调整grid宽度时没反应的问题