LigerUI学习使用

LigerUI有如下主要特点：

使用简单，轻量级
控件实用性强，功能覆盖面大，可以解决大部分企业信息应用的设计场景
快速开发，使用LigerUI可以比传统开发减少极大的代码量
易扩展，包括默认参数、表单/表格编辑器、多语言支持等等
支持Java、.NET、PHP等web服务端
支持 IE6+、Chrome、FireFox等浏览器
开源，源码框架层次简单易懂。

1.引入js库

 1 <!doctype html>
 2 <%@ page contentType="text/html;charset=UTF-8" language="java"%>
 3 <%@ taglib prefix="b" uri="/bonc-tags"%>
 4 <%@ taglib prefix="s" uri="/struts-tags"%>
 5 <%
 6     String contextPath = request.getContextPath();
 7 %>
 8 <html>
 9 <head>
10     <link href="<%=contextPath%>/resources/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
14     <script src="<%=contextPath%>/resources/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
15     <script src="<%=contextPath%>/resources/ligerUI/js/core/base.js" type="text/javascript"></script>
16     <script src="<%=contextPath%>/resources/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
17      <script src="<%=contextPath%>/resources/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
18 </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);} );}}});
});