如何使用LigerUI(從資料庫到表格顯示的一個示例)

最近做的項目使用到了LigerUI，是以最近會分享一些關于使用過程中所遇到的問題。

LigerUI官網：http://www.ligerui.com/

1.先到官網下載下傳LigerUI，解壓、打開有兩個檔案夾圖：

2.document檔案夾是LigerUI的API文檔，寫的不是很詳細，如果看不懂可以看源碼

Source檔案夾是放源碼的，

如何使用LigerUI(從資料庫到表格顯示的一個示例)

使用浏覽器打開index.htm就是官方提供的所有執行個體的入口，demos就是放這些執行個體的源碼的，其中最重要的是lib！裡面放了我們使用LIgerUI需要用到的包

3.導入LigerUI。将lib包複制到web項目中，這個是eclipse生成的項目，myeclipse為WebRoot下

如何使用LigerUI(從資料庫到表格顯示的一個示例)

下面以從資料庫到ligerUI 表格顯示的例子作為示例

1.資料庫設計

如何使用LigerUI(從資料庫到表格顯示的一個示例)

2.bean

如何使用LigerUI(從資料庫到表格顯示的一個示例)

3.dao層

@Override
	public List<Product> queryServerPage(PageBean pageBean) {
		String hql = " from Product order by "+pageBean.getSortName()+" "+ pageBean.getSortorder()+" ";
		return page(hql, pageBean.getPage(), pageBean.getPagesize());
	}
	
	//抽取一個HQL查詢方法,專用于分頁查詢
	private List<Product> page(String hql,int page, int pagesize){
		Session session = HibernateUtil.getCurrentSession();
		Transaction ts = session.beginTransaction();
		Query query = session.createQuery(hql);
		query.setFirstResult(page*pagesize-pagesize);//從第幾個記錄開始
		query.setMaxResults(pagesize);//一共有幾個記錄
		@SuppressWarnings("unchecked")
		List<Product> list = query.list();
		ts.commit();
		return list;
	}

4.service層

public class ProductServiceEbo implements ProductServiceEbi{

	private ProductDao dao = ProductFactory.getInstance();
	@Override
	public List<Product> queryAllProduct() {
		return dao.queryAllProduct();
	}
}

5.servlet層

package cn.aishi.web.servlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.aishi.domain.PageBean;
import cn.aishi.domain.Product;
import cn.aishi.service.product.ebi.ProductServiceEbi;
import cn.aishi.service.product.factory.ProductServiceFactory;
import net.sf.json.JSONObject;

public class QueryServerPageProductServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	private ProductServiceEbi ebi = ProductServiceFactory.getInstance();
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//擷取前台資料：
		int page = 0;
		int pagesize = 0;
		try {
			page = Integer.parseInt((request.getParameter("page")));//目前頁
			pagesize = Integer.parseInt(request.getParameter("pagesize"));//每一頁預設記錄數
		} catch (NumberFormatException e) {
			return;
		}
		String sortName = request.getParameter("sortName");//以什麼排序
		String sortorder = request.getParameter("sortorder");//排序的方式--順序->asc,逆序->desc
		if(sortName==null || sortName.equals("")) {
			sortName = "id";
		}
		if(sortorder==null || sortorder.length()==0) {
			sortorder = "asc";
		}
		int total = ebi.getTotal();
		
		PageBean pageBean = new PageBean();
		pageBean.setPage(page);
		pageBean.setPagesize(pagesize);
		pageBean.setSortName(sortName);
		pageBean.setSortorder(sortorder);
		
		List<Product> list = ebi.queryServerPage(pageBean);
		JSONObject object = new JSONObject();
		object.put("Rows", list);
		object.put("Total", total);
		String string = object.toString();
		System.out.println(string);
		response.getWriter().write(string);
		response.getWriter().flush();
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

6.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type"  content="text/html; charset=UTF-8" />
    <link href="${pageContext.request.contextPath}/lib/ligerUI/skins/Aqua/css/ligerui-all.css" target="_blank" rel="external nofollow"  rel="stylesheet" type="text/css" />
    <link href="${pageContext.request.contextPath}/lib/ligerUI/skins/ligerui-icons.css" target="_blank" rel="external nofollow"  rel="stylesheet" type="text/css" />
    <link href="${pageContext.request.contextPath}/css/index.css" target="_blank" rel="external nofollow"  rel="stylesheet" type="text/css" />
    
    <script src="${pageContext.request.contextPath}/lib/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/JsonExportExcel.min.js" type="text/javascript" ></script>

    <script src="${pageContext.request.contextPath}/lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/lib/ligerUI/js/ligerui.all.js"></script>
    <script src="${pageContext.request.contextPath}/lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script> 
    <script src="${pageContext.request.contextPath}/lib/ligerUI/js/plugins/ligerToolBar.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/lib/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/lib/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/lib/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/lib/ligerUI/js/plugins/ligerTab.js" type="text/javascript"></script>

    <script src="${pageContext.request.contextPath}/js/tab_01_product.js" type="text/javascript"></script>
</head>
<body style="height: 350px;">
	<span class="spanTxt">工程名稱：</span>
	<input class="txt" id="txtKey" type="text" />
	<input class="btn" id="btnOK" type="button" value="查詢" onclick="f_search()" style="margin-bottom:10px;" />
	<input class="btn" type="button" value="導出excel表格" onclick="f_export_excel()" id="export_excel"/>
	<input class="btn" id = "chart" type="button" value="檢視圖表"/>
	<input type="text" id="second" value="5" onchange="changeTime()"/>
	<input class="btn" type="button" value="自動翻頁" id="startOrStopBtn" onclick="startOrStopInterval()"/>
	<a href="${pageContext.request.contextPath}/jsps/board_product.jsp" target="_blank" rel="external nofollow"  target="_blank">
		<input class="btn" type="button" value="看闆"></input>
	</a>
	<div id="maingrid" style="margin:0; padding:0"></div>
	<div style="display:none;"></div> 
	
	<div id="divForAdd" style="width:200px; margin:3px; display:none;">
		<table>
			<tr>
				<td colspan="2"><h3>添加工程</h3></td>
			</tr>
			<tr>
				<td><span>工程名稱：</span></td>
				<td><input class="proTxt" type="text" id="addProjectName" /></td>
			</tr>
			<tr>
				<td><span>投入數：</span></td>
				<td><input class="proTxt" type="text" id="addPutinNum" /></td>
			</tr>
			<tr>
				<td><span>良品數：</span></td>
				<td><input class="proTxt" type="text" id="addAccGoods" /></td>
			</tr>
			<tr>
				<td colspan="2">
					<input class="btn" type="button" id="addConfirmBtn" value="确認添加" onclick="f_add()"/>
				</td>
			</tr>
		</table>
 	</div>
 	
 	<div id="divForModify" style="width:200px; margin:3px; display:none;">
	    <h3>修改工程資訊</h3>
	    <div>
	        <span>工程名稱：</span><input class="proTxt" type="text" id="modProjectName" /><br />
	        <span>投入數：</span><input class="proTxt" type="text" id="modPutinNum" /><br />
	        <span>良品數：</span><input class="proTxt" type="text" id="modAccGoods" /><br />
	        <input type="button" class="btn" id="modConfirmBtn" value="确認修改" onclick="f_modify()"/>
	    </div>
 	</div>
</body>
</html>

7.js

var grid = null;

$(function () {
	
    //表格初始化時的資料設定
	grid = $("#maingrid").ligerGrid({
        columns: [
            { display: '主鍵', name: 'id', align: 'left', width: 60 ,align:"center",sortName:"id"},
            { display: '工程名字', name: 'projectName', width: 180 ,align:"center",sortName:"projectName"},
            { display: '投入數', name: 'putinNum', width: 180,align:'left',sortName:"putinNum"}, 
            { display: '良品數', name: 'accGoods', width: 180,align:"left",sortName:"accGoods"}, 
            { display: '不良品數', name: 'regect',width: 180, align:"left",sortName:"regect"},
            { display: '良品率', name: 'percent', width: 160 ,align:"left" ,type:"currency",sortName:"percent"}
        ],
        root:"Rows",//資料源字段名--可以更改，預設是Rows
        record:"Total",//資料源字段記錄數名字，可以更改，預設是Total
        width: '100%',
        height:'100%',
        sortnameParmName:"sortName",//以什麼排序--自動傳遞到servlet
        sortorderParmName:"sortorder",//排序方式：順序--esc，逆序--desc。自動傳遞到servlet
        //url:"queryAllProduct" , /*+"?data="+new Date()*/
        url:"/TabQuery/queryServerPageProduct" , 
        usePager:true,
        //值為local，資料在用戶端進行分頁
        //dataAction:"local",
        
        //值為local，資料在伺服器端進行分頁
        dataAction:"server",//伺服器分頁
        pageSize:"15",//分頁頁面大小
	    pageSizeOptions:[10,15,30,60],//可指定每頁頁面大小
	    checkbox:true
    });
    grid.loadData();
});

8.效果(這是添加了别的功能的效果，可以先忽略其他功能，先看表格的顯示)

如何使用LigerUI(從資料庫到表格顯示的一個示例)

如何使用LigerUI(從資料庫到表格顯示的一個示例)

繼續閱讀

CSS僞類和僞元素的差別

Mina架構快速入門

浮動定位和表格

(四)Qt實作自定義模型基于QAbstractTableModel

深入淺出Mybatis源碼系列（一）---Mybatis入門

開篇叙事我為什麼會在這兒

CSS基礎筆記——文本樣式

Python進階之路 6.2.1 dict函數

Ant工具

@Transaction - 注解方式處理事務

JDBC連接配接資料庫（statement）

jQuery實作Ajax通訊的幾種常用方式

jstl--forEach

面向對象加強--靜态和非靜态

原生微信小程式

部落格9-10表格表格 table(會使用)表單标簽(掌握)HTML5新标簽與特性總結