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