1. IT分享知识网首页

如何使用LigerUI(从数据库到表格显示的一个示例)「终于解决」

老牧童 • • 未分类 • 阅读 238

如何使用LigerUI(从数据库到表格显示的一个示例)「终于解决」最近做的项目使用到了LigerUI，所以最近会分享一些关于使用过程中所遇到的问题。LigerUI官网：http://www.ligerui.com/1.先到官网下载LigerUI，解压、打开有两个文件夹图：2.document文件夹是LigerUI的API文档，写的不是很详细，如果看不懂可以看源码Source文件夹是放源码的， 使用浏览器打开index.htm就是官方提供的…

大家好，欢迎来到IT知识分享网。

最近做的项目使用到了LigerUI，所以最近会分享一些关于使用过程中所遇到的问题。

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

1.先到官网下载LigerUI，解压、打开有两个文件夹图：
如何使用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" 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.效果(这是添加了别的功能的效果，可以先忽略其他功能，先看表格的显示)

如何使用LigerUI(从数据库到表格显示的一个示例)「终于解决」

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/25453.html

赞 (0)
老牧童老牧童
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信