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); } ); } } }); });
說明:1.具有樹形結構的數據，可以下鑽數據。
2.有鏈接，可以點擊顯示動態圖(eCharts繪制)
3.數據可以進行排序
4.效果如下：
初始化狀態:
下鑽后的數據:
5.總結，ligerUI功能強大，可以大大較少開發時間
學習：http://www.cnblogs.com/tancp/p/3730318.html