最近做的项目使用到了LigerUI，所以最近会分享一些关于使用过程中所遇到的问题。
LigerUI官网：/
1.先到官网下载LigerUI，解压、打开有两个文件夹图：
2.document文件夹是LigerUI的API文档，写的不是很详细，如果看不懂可以看源码
Source文件夹是放源码的，
使用浏览器打开index.htm就是官方提供的所有实例的入口，demos就是放这些实例的源码的，其中最重要的是lib！里面放了我们使用LIgerUI需要用到的包
3.导入LigerUI。将lib包复制到web项目中，这个是eclipse生成的项目，myeclipse为WebRoot下
下面以从数据库到ligerUI 表格显示的例子作为示例
1.数据库设计
2.bean
3.dao层
@Overridepublic 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();mit();return list;}
4.service层
public class ProductServiceEbo implements ProductServiceEbi{private ProductDao dao = ProductFactory.getInstance();@Overridepublic 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,逆序->descif(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" rel="stylesheet" type="text/css" /><link href="${pageContext.request.contextPath}/lib/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" /><link href="${pageContext.request.contextPath}/css/index.css" 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"><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",//数据源字段名--可以更改，默认是Rowsrecord:"Total",//数据源字段记录数名字，可以更改，默认是Totalwidth: '100%',height:'100%',sortnameParmName:"sortName",//以什么排序--自动传递到servletsortorderParmName:"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.效果(这是添加了别的功能的效果，可以先忽略其他功能，先看表格的显示)
