一 LigerUI简介
LigerUI 是基于jQuery 的UI框架，其核心设计目标是快速开发、使用简单、功能强大、轻量级、易扩展。简单而又强大，致力于快速打造Web前端界面解决方案，可以应用于.net,jsp,php等等web服务器环境。
LigerUI有如下主要特点：
-
使用简单，轻量级
-
控件实用性强，功能覆盖面大，可以解决大部分企业信息应用的设计场景
-
快速开发，使用LigerUI可以比传统开发减少极大的代码量
-
易扩展，包括默认参数、表单/表格编辑器、多语言支持等等
-
支持Java、.NET、PHP等web服务端
-
支持 IE6+、Chrome、FireFox等浏览器
-
开源，源码框架层次简单易懂
（PS：以上简介来至官网）
二 一个最简单的Demo
（1）从官网下载最新版的LigerUI，目前的下载地址是：http://pan.baidu.com/s/1dDNAc7Z
（2）新建一个Java web项目，并将LigerUI的一些东西复制到项目中，比如说这样：
（3）最简单的demo，文件名是：demo1.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
base
href="<%=basePath%>">
<
title
>Insert title here</
title
>
<
link
href
=
"scripts/ligerUI/skins/Aqua/css/ligerui-all.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"scripts/jquery/jquery-1.9.0.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"scripts/ligerUI/js/core/base.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"scripts/ligerUI/js/plugins/ligerTextBox.js"
type
=
"text/javascript"
></
script
>
<
script
type
=
"text/javascript"
>
$(function() {
//将一个html文本框对象转换成ligerui文本框对象,并返回ligerui对象
var g = $("#txt1").ligerTextBox({
//如果没有输入时,会提示不能为空
nullText : '不能为空',
onChangeValue : function(value) {
alert(value);
}
});
/*
获取属性
*/
//alert('方式一：' + g.get('disabled'));
/*
如何调用方法
*/
//g.setDisabled();
/*
如何设置事件
*/
//这里给文本框绑定一个改变值的事件
//也可以设置onChangeValue参数
/*
g.bind('changeValue',function(value){
alert(value);
});
*/
});
</
script
>
</
head
>
<
body
style
=
"padding: 10px"
>
<
input
type
=
"text"
id
=
"txt1"
value
=
""
style
=
"width: 200px"
/>
</
body
>
</
html
>
|
从上面的代码可以看出，先是引入了几个jquery和ligerui的js文件，然后从用法上来说跟jQuery是很相似的，针对
TextBox进行了简单使用
三 使用本地数据建立表格
ligerGrid可以用来显示表格，ligerGrid绑定数据有两种方式，一是使用本地数据，一是使用服务器数据。其中使用本地数据需要配置data参数；使用服务器数据需要配置url参数，我这里以使用本地数据建立表格来简要说明，也就是上面图中的demo2.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
base
href="<%=basePath%>">
<
title
>Insert title here</
title
>
<
link
href
=
"scripts/ligerUI/skins/Aqua/css/ligerui-all.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"scripts/jquery/jquery-1.9.0.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"scripts/ligerUI/js/ligerui.min.js"
type
=
"text/javascript"
></
script
>
<
script
type
=
"text/javascript"
>
$(function() {
//本地数据
var griddata = [ {
id : '01',
name : '测试01'
}, {
id : '02',
name : '测试02'
}, {
id : '03',
name : '测试03'
}, {
id : '04',
name : '测试04'
}, {
id : '05',
name : '测试05'
}, {
id : '06',
name : '测试06'
}, {
id : '07',
name : '测试07'
} ];
//表格，向id为"maingrid"的div里面添加一个表格
var grid = $("#maingrid").ligerGrid({
//每行前面的选择框
checkbox : true,
//每一列的数据显示，包括显示的表头名，列宽，列单元格数据等
columns : [ {
name : 'id',
display : '序号',
width : 200
/*
//列汇总
totalSummary: {
align: 'center', //汇总单元格内容对齐方式:left/center/right
type: 'count', //汇总类型sum,max,min,avg ,count。可以同时多种类型
render: function (e) { //汇总渲染器，返回html加载到单元格
//e 汇总Object(包括sum,max,min,avg,count)
return "<
div
>总数：" + e.count + "</
div
>";
}
}
*/
}, {
name : 'name',
display : '名称',
width : 400,
/*
//列汇总
totalSummary: {
align: 'center', //汇总单元格内容对齐方式:left/center/right
type: 'count', //汇总类型sum,max,min,avg ,count。可以同时多种类型
render: function (e) { //汇总渲染器，返回html加载到单元格
//e 汇总Object(包括sum,max,min,avg,count)
return "<
div
>总数：" + e.count + "</
div
>";
}
}
*/
/*
自定义单元格显示的数据
rowdata 行数据
rowindex 行索引
value 当前的值，对应rowdata[column.name]
column 列信息
*/
render : function(rowdata,rowindex,value,column){
return rowdata.id + "--" + value + "--" + column.width;
}
} ],
//往表格填充的本地数据
data : {
Rows : griddata
},
//默认选中示例
isChecked: function(rowdata){
if(rowdata.id == '04')
return true;
return false;
}
});
});
</
script
>
</
head
>
<
body
style
=
"padding: 10px"
>
<
div
id
=
"maingrid"
></
div
>
</
body
>
</
html
>
|
效果如下：
注：上面的Rows表示的是“数据源字段名”，定义在ligerUI/js/plugins/ligerGrid.js这个文件中，包括我们进行数据分页显示时常用到的“pagesize”、“sortname”和“sortorder”也是定义在这个文件中的
因此，在知道了字段名之后我们就可以进行自定义数据源的字段名了，比如说下面这样：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
var
grid = $(
"#maingrid"
).ligerGrid({
checkbox :
true
,
//自定义数据源字段名
root :
'row'
,
columns : [ {
name :
'id'
,
display :
'序号'
,
width : 200
}, {
name :
'name'
,
display :
'名称'
,
width : 400
} ],
data : {
row : griddata
}
});
|
当然，其他的一些字段名也可以根据这个原理进行自定义设置
本文转自 pangfc 51CTO博客，原文链接：http://blog.51cto.com/983836259/1767349，如需转载请自行联系原作者
