码迷,mamicode.com
首页 > 其他好文 > 详细

LigerUI的简单使用示例

时间:2016-04-25 01:05:40      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:jquery ligerui

一 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

<%@ 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

<%@ 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”也是定义在这个文件中的

技术分享

因此,在知道了字段名之后我们就可以进行自定义数据源的字段名了,比如说下面这样:

var grid = $("#maingrid").ligerGrid({
			checkbox : true,
			//自定义数据源字段名
			root : ‘row‘ ,
			columns : [ {
				name : ‘id‘,
				display : ‘序号‘,
				width : 200
				
			}, {
				name : ‘name‘,
				display : ‘名称‘,
				width : 400
				
				
			} ],
			data : {
				row : griddata
			}
		});

当然,其他的一些字段名也可以根据这个原理进行自定义设置


我的简单介绍就到这里了,想要了解更多可以查看源代码,可以参考这些官网指定的入门文章:http://www.cnblogs.com/leoxie2011/category/291637.html 

当然也可以参考官网提供的demo:http://www.ligerui.com/demo.html


本文出自 “zifangsky的个人博客” 博客,请务必保留此出处http://983836259.blog.51cto.com/7311475/1767349

LigerUI的简单使用示例

标签:jquery ligerui

原文地址:http://983836259.blog.51cto.com/7311475/1767349

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!