大家好，欢迎来到IT知识分享网。
最近做的项目使用到了LigerUI，所以最近会分享一些关于使用过程中所遇到的问题。
LigerUI官网：http://www.ligerui.com/
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层
@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" 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",//数据源字段名--可以更改，默认是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.效果(这是添加了别的功能的效果，可以先忽略其他功能，先看表格的显示)
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/25453.html
