ligerui+json_001_实现表格（grid）的后台数据显示、分页
代码下载地址：
http://download.csdn.net/detail/poiuy1991719/8556841
效果：
需要导入的包：
01：编写界面：index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
--> <!-- :引入：js、css -->
<link
href="${pageContext.request.contextPath }/ui/lib/ligerUI/skins/Aqua/css/ligerui-all.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="${pageContext.request.contextPath }/ui/lib/jquery/jquery-1.5.2.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/ui/lib/ligerUI/js/core/base.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/ui/lib/ligerUI/js/plugins/ligerGrid.js"></script> <script type="text/javascript">
/*
1:编写js：利用ligerGrid创建数据显示区,：从Json获取数据:4:com.west.study.servlet.JsonServlet
*/ $(function() { var grid = $("#main_grid").ligerGrid(
{
width : ,
columns : [
{
display : "学号",
name : "stuNo"
},
{
display : "姓名",
name : "stuName"
},
{
display : "性别",
name : "stuSex",
render : function(rowData) {
if (rowData.stuSex == "") {
return "男";
} else {
return "女";
}
}
},
{
display : "年龄",
name : "stuAge",
render : function(rowData) {
if (parseInt(rowData.stuAge) < ) {
return "<span style='color:red'>"
+ rowData.stuAge + "</span>";
}
return rowData.stuAge;
} } ] }); $("#btnLoad").click(function() {
var name = $("#stuname").val();
grid.set({
//值为local，数据在客户端进行分页
dataAction : "local",
//数据请求地址
url : "main/jsonServlet.action?reqCode=findStudents",
//数据书否分页，默认为true
usePager : true,
pageSize : "",//分页页面大小
pageSizeOptions : [ , , ],//可指定每页页面大小
//数据刷新
parms : [ {
name : "stuname",
value : name
} ]
});
grid.loadData();
}); });
</script> </head> <body>
${pageContext.request.contextPath }
<br> <button id="btnLoad">加载数据</button>
<input type="text" name="stuname" id="stuname">
<!-- ：添加div -->
<div id="main_grid"></div>
</body>
</html>
02:编写Json，servlet：
package com.west.study.servlet; import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONObject; @SuppressWarnings("serial")
public class JsonServlet extends HttpServlet {
/** 4：doGet()，5：web.xml */
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String stuName = request.getParameter("stuName");
System.out.println("获取名字！" + stuName); out.write(getJsonGridString());
out.flush();
out.close(); } @Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println("执行：doPost(),调用doGet()");
doGet(req, resp);
} /** 3：返回Json字符串 */
public String getJsonGridString() {
JSONObject jobj = new JSONObject();
try {
List<Map<String, String>> lm = initStudentData();
jobj.put("Rows", lm);// 将lm放入Json
jobj.put("Total", lm.size());// 将lm大小放入Json
} catch (Exception e) {
e.printStackTrace();
}
System.out.println("返回的字符串是：" + jobj.toString());
return jobj.toString();
} /** 2：创建数据List的Map数组 */
public List<Map<String, String>> initStudentData() {
List<Map<String, String>> lm = new ArrayList<Map<String, String>>();
Map<String, String> map_01 = new HashMap<String, String>();
map_01.put("stuNo", "J001");
map_01.put("stuName", "张");
map_01.put("stuAge", "");
map_01.put("stuSex", "");
lm.add(map_01); Map<String, String> map_02 = new HashMap<String, String>();
map_02.put("stuNo", "J002");
map_02.put("stuName", "张2");
map_02.put("stuAge", "");
map_02.put("stuSex", "");
lm.add(map_02); Map<String, String> map_03 = new HashMap<String, String>();
map_03.put("stuNo", "J003");
map_03.put("stuName", "张3");
map_03.put("stuAge", "");
map_03.put("stuSex", "");
lm.add(map_03); Map<String, String> map_04;
for (int i = ; i < ; i++) {
map_04 = new HashMap<String, String>();
map_04.put("stuNo", i + "J003");
map_04.put("stuName", i + "张");
map_04.put("stuAge", i + "");
map_04.put("stuSex", "");
lm.add(map_04);
}
return lm;
} }
03：配置web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
</welcome-file-list> <servlet>
<servlet-name>JsonServlet</servlet-name>
<servlet-class>com.west.study.servlet.JsonServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>JsonServlet</servlet-name>
<url-pattern>/main/jsonServlet.action</url-pattern>
</servlet-mapping>
</web-app>
总结：
1、igerGrid显示数据采用 json对象，我们只需要给grid的url属性指定一个后台地址，默认情况下grid会自动发送异步请求向指定程序请求数据。注意默认情况下grid要求的json数据格式如下：
{Rows:[{},{}],Total:2};
2、我们可以通过指定ligerGrid的root和record属性来改变数据源属性和数据总记录属性。
3、在这里要注意，我们在实际应用中采用的分页方式基本上都是后台分页，即在数据库中分页，这里主要是演示，直接采用了客户端分页，默认情况下dataAction的值为server即为服务器分页。
4、由上可知利用render我们可以完成自定义单元格。
5、当数据大用户多的时候，我们不希望用户打开页面立即显示数据，这样会服务器造成不小的压力，而是当用户输入查询条件并点击查询后，在进行加载数据。
6、parms：刷新，jQuery的刷新方法
7、ligerGrid：定义：var grid = $("#组件id").ligerGrid
7.1：columns（行），其属性有：display（列名称），name（指定那一列），render（语句返回的值，显示在界面上）。
7.2：set（设置），其属性有：dataAction（分页，local：浏览器分页），url（需要提交到的地址，处理数据地址），usePager（数据是否分页），pageSize（分页大小），pageSizeOptions（可设置的分页大小），parms（数据刷新），var=grid.loadData();（加载数据）
ligerui+json_001_实现表格（grid）的后台数据显示、分页的更多相关文章
- [ExtJS5学习笔记]第三十四节 sencha extjs 5 grid表格之java后台导出excel
继上次使用js前端导出excel之后,还有一个主要大家比较关注的是后台实现导出excel,因为本人开发使用的java所以这里使用apache的开源项目poi进行后台excel的导出. 本文目录 本文目 ...
- 转：jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细
阅读目录 复选框 多表头 分组 汇总 明细 复选框 grid可以设置复选框模式进行多选,只需要简单的配置 checked:true 获取选中行 如果要获取选中的行,可以用getSelecteds方法: ...
- LigerUI可编辑表格左下角出现白色小方块遮罩层问题解决办法
LigerUI已经研究了一段时间,总体感觉还不错,基于jQuery开发,框架提供了丰富的UI组件,尤其LigerUI表格,功能还是挺强大的 在使用LigerUI可编辑表格的时候,发现一个小小的问题 当 ...
- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...
- 基于Metronic的Bootstrap开发框架经验总结（16）-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...
- layui.table前端+后台处理+分页
前端 注:监听工具条没有详细写,但路子一样的 @section head{ <script src="~/Content/jquery-easyui-1.5.5.4/jquery.ea ...
- jquery如何通过ajax请求获取后台数据显示在表格上
1.引入bootstrap和jquery的cdn <link rel="stylesheet" type="text/css" href="ht ...
- ligerui_实际项目_003：form中添加数据，表格(grid)里面显示，最后将表格(grid)里的数据提交到servlet
实现效果: "Form"中填写数据,向本页"Grid"中添加数据,转换成Json数据提交,计算总和,Grid文本框可编辑,排序 图片效果: 总结: //disp ...
- ExtJS自制表格Grid分页条
试过Grid自带的load和分页功能,没有成功,干脆就自己写了...... 主要是查询条件比较复杂...... 希望哪位大神能有更好的意见. Ext.define('MyApp.ux.Paginati ...
随机推荐
- nginx博客系统（内含nginx图片缩略图处理代码，不错）
一直以来都在Qzone.CSDN等上面写博客,偶尔有些想法就在Paas平台上搭建服务,新浪和曾经的google上都用过其appengine.可是在别人的平台上写东西,总归有些不方便,有受制于人的感觉. ...
- zepto源码--插入节点--学习笔记
与生成width和height使用的方法类似,通过`after`, `prepend`, `before`, `append`,这四者之间的共性,生成对应的函数.并根据这四个函数,生成 `insert ...
- 《Haskell趣学指南 Learn You a Haskell for Great Good!》－代码实验
doubleMe x = x + x doubleUs x y = doubleMe x + doubleMe y doubleSmallNumber x = then x else x * doub ...
- 动态页面的登陆——装饰器应用<代码>
log_status = False f = open("info", "r", encoding="utf8") source = f.r ...
- 【Algorithm】堆排，C++实现
对一个数组中的元素按照顺序构建二叉树,就形成了一个(二叉)堆.(二叉树是虚拟的,并不是真的建立二叉树) 表示堆的数组A有两个重要属性:A.heapSize,表示堆里面有多少元素,数组里有多少元素在堆里 ...
- mac下配置laravel环境
1.由于 Laravel 需要使用 PHP 的 Mcrypt 扩展,所以我们使用下面的命令来安装. brew search mcrypt brew install php54-mcrypt 2.安装 ...
- 【Android Studio快捷键】之导入相应包声明（import packages）
可能import 单个声明的快捷键大家都很容易找到,Alt+Enter.但是如果我要一次性import文件中所有的声明,这个快捷键是什么呢,找啊找的,就是没找到,以前在Eclipse是Ctrl+1,但 ...
- docker启动Mysql(转）
cs202@cs202-devbox:~$ sudo docker run -d mysql7698fdd7a2d05d38cf19c60cc9e35c1117fc551ae5e31914494715 ...
- 项目管理利器——Maven
假设公司要开发一个新的Web项目,使用目前流行的struts2.spring.MyBatis进行新项目开发.那么接下来首先要进行的工作就是各个框架的jar包的下载.大家通常的做法是先到struts2的 ...
- VMware (威睿) 虚拟化产品简介
VMware vSphere 是VMware(威睿)的一个虚拟化产品,VMware vSphere 是业界领先且最可靠的虚拟化平台.vSphere将应用程序和操作系统从底层硬件分离出来,从而简化了 I ...