LigerUI学习使用
LigerUI有如下主要特点：
- 使用简单，轻量级
- 控件实用性强，功能覆盖面大，可以解决大部分企业信息应用的设计场景
- 快速开发，使用LigerUI可以比传统开发减少极大的代码量
- 易扩展，包括默认参数、表单/表格编辑器、多语言支持等等
- 支持Java、.NET、PHP等web服务端
- 支持 IE6+、Chrome、FireFox等浏览器
- 开源，源码框架层次简单易懂。
1.引入js库
<!doctype html>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="b" uri="/bonc-tags"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String contextPath = request.getContextPath();
%>
<html>
<head>
<link href="<%=contextPath%>/resources/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script src="<%=contextPath%>/resources/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="<%=contextPath%>/resources/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src="<%=contextPath%>/resources/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
<script src="<%=contextPath%>/resources/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
</head>
2.引入div放置对应的数据
<div id="vt"></div>
3.ligerUI代码如下：
var parameter;
$(function(){
var date=new Date().getMonth();
date=date+1;
date='1-'+date;
//alert(date);
var year=new Date().getFullYear();
parameter=$("#vt").ligerGrid({
columns:[
{display:'部门',name:'DEPT_NAME',id:'id1',width:250,align:'left',frozen: true},
{display:date+'月累计销售额',
columns:[
{display:'累计完成',name:'HT_MONEY',width:220,align:'right',
render: function (record, rowindex, value, column) {
var html = '<a href="#" style="text-decoration:underline;color:green;" onclick="method1();">'+value+'</a>';
if(record["DEPT_NAME"]!='合计'){
html = value;
} return html;
}
},
{display:'应付第三方采购',name:'CG_MONEY',width:220,align:'right',
render: function (record, rowindex, value, column) {
var html = '<a href="#" style="text-decoration:underline;color:green;" onclick="method2();">'+value+'</a>';
if(record["DEPT_NAME"]!='合计'){
html = value;
} return html;
}
}
]
},
{display:date+'月累计净销售额',
columns:[
{display:year+'年度目标',name:'HT_MONEY_J_TAR',width:220,align:'right'},
{display:'累计完成',name:'HT_MONEY_J',width:220,align:'right',
render: function (record, rowindex, value, column) {
var html = '<a href="#" style="text-decoration:underline;color:green;" onclick="method3();">'+value+'</a>';
if(record["DEPT_NAME"]!='合计'){
html = value;
} return html;
}
},
{display:'占目标(%)',name:'PRO',width:220,align:'right'}
]
}
],width:'99.80%',
height:'70%',
usePager:false,alternatingRow: false,
tree: { columnId:'id1',columnName: 'DEPT_NAME',
isExtend:function(data){
if ('isextend' in data ){
if(data['isextend'] == true){
return true;
}
}
return false;
},isParent:function(data){
if("1"==data['IS_LEAF']){
return false;
}else{
return true;
}
}
},
onTreeCollapse:function(data){
data['isextend'] = false;
},
url: "NetReturn!getlistformliger.action",
parms:{selectmonth:document.getElementById("statemonth").value},
onTreeExpand: function (data,e){
data['isextend'] = true;
var grid = this;
if (data.children==0 && !data.loaded) {
var o2=$("#acctmonth").val();
var o3=$("#statemonth").val();
var objsend= {"nodeid":data["DEPT_ID"],"acctmonth":o2,"selectmonth":o3};
$.post('NetReturn!getNextlist1.action',objsend,
function(xlist){
var myobj=eval(xlist);
grid.appendRange(myobj,data,null,false);
}
);
}
}
});
});
说明:1.具有树形结构的数据，可以下钻数据。
2.有链接，可以点击显示动态图(eCharts绘制)
3.数据可以进行排序
4.效果如下：
初始化状态:
下钻后的数据:
5.总结，ligerUI功能强大，可以大大较少开发时间
学习：http://www.cnblogs.com/tancp/p/3730318.html
LigerUI学习使用的更多相关文章
- Jquery LigerUI框架学习（一）
ligerUI框架是一个很丰富的后台框架模板,具有简洁大方的后台样式框架,还有很多灵活的控件,方便开发人员使用: 把昨天学习的成功拿出来供大家学习学习: 首先我们要去ligerUI官网下载Jquery ...
- Jquery LigerUI框架学习（二）之Tree于Tab标签实现iframe功能
LigerUI框架Tree于Tab标签动态使用,当点击Tree后动态创建Tab标签,和通常用的iframe框架功能类似 Tree中的关键代码 //Tree初始化 $("#tree1" ...
- JQGrid 学习1
这几天一直在学习基于MVC的JQGrid. 记得刚毕业时候做web最头疼的就是GridView,各种分页查询删除,后来学习了Ajax,使用的jqury UI框架ligerui给公司做ERP系统,再后来 ...
- 从Prototype学习JavaScript面向对象编程
概述 JavaScript是一种基于对象的编程语言.它是灵活的,既有面向过程(也就是面向函数)的编程,也有面向对象的编程.因此我称它是基于对象的编程语言. 对于JavaScript的面向过程的编程特性 ...
- Microsoft 2013 新技术学习笔记 一
有几年没有关注技术了,最近有点时间想把技术重新捡起来,借着重构手上的一个后台管理框架的机会将微软新的几种技术全部应用一下,从目的上来讲并没有希望能对涉及的技术有很深入的了解,所以这个系列的文章(篇幅不 ...
- (转)ligerUI 使用教程之Tip介绍与使用
概述: ligertip是ligerUI系列插件中的tooltip类插件,作用是弹一个浮动层,起提示作用 阅读本文要求具备jQuery的基本知识,不然文中的javascript代码不易理解 截 ...
- （转）ligerUI 使用教程之Tip介绍与使用
概述: ligertip是ligerUI系列插件中的tooltip类插件,作用是弹一个浮动层,起提示作用 阅读本文要求具备jQuery的基本知识,不然文中的javascript代码不易理解 截 ...
- 前台框架的选择 EasyUI、DWZ、ligerui
EasyUI1.3.1+MVC4.0+EF5.0 番外篇 关于前台框架的选择 EasyUI.DWZ.ligerui 昨天发了EasyUI1.3.1+MVC4.0+EF5.0实战之一 开篇及布局控件介绍 ...
- LigerUI+MVC的应用1
[项目开发]LigerUI+MVC的应用(一) 近期因为稍微空闲有点时间,就晚上回家自己在随便写写代码,也就边写边记,中间主要采用了微软的MVC4.0框架.虽然目前公司也是使用的MVC的模式,但是因为 ...
随机推荐
- gulp 配置前端项目打包
项目发布时,需要对项目js文件进行压缩,混淆,连接等操作以减小项目http请求,加快访问. gulpjs.com中有很多插件可以用来配置打包部署. 需要用的常用插件有: gulp-jsmin 压缩j ...
- SAS实验室之PROC TRANSPOSE
首先,抛开SAS,回忆我们在数学课本上学习的转置是什么概念,转置如下图: 以上就是数学中的转置. 那么在SAS里该如何转置呢? 先看语法格式: PROC TRANSPOSE <DATA=inpu ...
- 测试架构图 High Level 产品技术（无事来更新，证明这个博客还是Live的）
一个完整的产品测试所需要掌握的产品技术架构. 1.最底层硬件平台(服务器与存储) 对于一个大型商业解决方案来说,性能与可靠性是非常重要的要求,那么服务器与存储就是专门来满足需求的. 服务器: 服务器端 ...
- hdu 5106 组合数学+找规律
http://acm.hdu.edu.cn/showproblem.php?pid=5106 给定n和r,要求算出[0,r)之间所有n-onebit数的和,n-onebit数是所有数位中1的个数. 对 ...
- Manhattan distance(for lab)
Input four integer x1, y1, x2, y2, which is mean that the coordinates of two points A(x1, y1), B(x2, ...
- C++学习心得
从大一的学习中,我了解到C++是兼容C的面向过程和面向对象的程序设计语言.其中,面向对象程序设计方法是以对象为模板的结构化程序设计方法,是对结构化程序设计方法的继承和发展.刚开始的学习让我觉得特别吃力 ...
- 【推荐】【给中高级开发者】构建高性能ASP.NET应用的几点建议
本篇目录 早期阶段就要对应用进行负载测试 使用高性能类库 你的应用是CPU密集还是IO密集的 使用基于Task的异步模型,但要慎重 分发缓存和会话(session)状态 创建Web Gardens 巧 ...
- Android和Linux应用综合对比分析
原文地址:http://www.cnblogs.com/beer/p/3325242.html 免责声明: 当时写完这篇调查报告,给同事看了后,他觉得蛮喜欢,然后想把这篇文章修改一下,然后往期刊上发表 ...
- leveldb源码学习系列
楼主从2014年7月份开始学习<>,由于书籍比较抽象,为了加深思考,同时开始了Google leveldb的源码学习,主要是想学习leveldb的设计思想和Google的C++编程规范.目 ...
- 【网站国际化必备】Asp.Net MVC 集成Paypal（贝宝）快速结账 支付接口 ，附源码demo
开篇先给大家讲段历史故事,博主是湖北襄阳人.襄阳物华天宝,人杰地灵,曾用名襄樊.在2800多年的历史文化中出现了一代名相诸葛亮(卧龙),三国名士庞统(凤雏),魏晋隐士司马徽(水镜先生),唐代大诗人孟浩 ...