如何使用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新标签与特性总结