LigerUI的簡單使用樣本

標籤：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的一些東西複製到項目中，比如說這樣：

650) this.width=650;" src="http://s2.51cto.com/wyfs02/M01/7F/64/wKiom1cc4BHh4L-qAAA3SFG5axs238.png" title="20160406142901_72045.png" alt="wKiom1cc4BHh4L-qAAA3SFG5axs238.png" />

（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>

效果如下：

650) this.width=650;" src="http://s1.51cto.com/wyfs02/M01/7F/64/wKiom1cc4HOCYdlzAAA3yM1jQDM958.png" title="20160406150500_56603.png" alt="wKiom1cc4HOCYdlzAAA3yM1jQDM958.png" />

註：上面的Rows表示的是“資料來源欄位名”，定義在ligerUI/js/plugins/ligerGrid.js這個檔案中，包括我們進行資料分頁顯示時常用到的“pagesize”、“sortname”和“sortorder”也是定義在這個檔案中的

650) this.width=650;" src="http://s5.51cto.com/wyfs02/M02/7F/62/wKioL1cc4WCB8tIiAACtQiLnVBw346.png" title="20160406145531_34743.png" alt="wKioL1cc4WCB8tIiAACtQiLnVBw346.png" />

因此，在知道了欄位名之後我們就可以進行自訂資料來源的欄位名了，比如說下面這樣：

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的簡單使用樣本