GT-Grid初学服务端数据加载

最新推荐文章于 2016-12-13 16:59:04 发布
最新推荐文章于 2016-12-13 16:59:04 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： GT-Grid
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yantingmei/article/details/23381783
版权

1.第一个案例：服务端数据加载

从服务端获取数据：

服务端代码Test.java

package test;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Test  extends  HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		resp.setCharacterEncoding("UTF-8");
		resp.setContentType("text/html");
		
		PrintWriter writer=resp.getWriter();
	    writer.println("{data : [{ no : 1 , name :'ffa', age : 12, gender : 'M' , english : 76.5 , math :92 },{ no : 2 , name :'bbb', age : 11, gender : 'F' , english : 89   , math :87 },{ no : 3 , name :'ccc', age : 13, gender : 'F' , english : 53   , math :62 }]}");
	    writer.flush();  
	    writer.close();

	}
	

}

在web项目中配置：

<?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" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>gt-grid</display-name>
  <servlet>
    <servlet-name>test1</servlet-name>
   <servlet-class>test.Test</servlet-class>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>test1</servlet-name>
    <url-pattern>/test1</url-pattern>
  </servlet-mapping>
  
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

index3.jsp

使用客户端分页：

为 grid添加两个属性 : 
1 是  loadURL : '.....'  值为一个合法的 可访问到的url,本例中是我写的一个servlet的url 
2 是  remotePaging : true/false 时候使用远程分页. 如果是客户端分页 要设置成 false

<%@ 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>gt-grid案例2</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<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">
	-->
<link rel="stylesheet" type="text/css" href="gt-grid/gt_grid.css" />
<script type="text/javascript" src="gt-grid/gt_msg_cn.js"></script>
<script type="text/javascript" src="gt-grid/gt_grid_all.js"></script>
<script type="text/javascript">

	//2.创建数据集   var dsConfig ....
	var dsConfig = {

		fields : [ {
			name : 'no',
			type : 'int',
			index : 'no'
		}, {
			name : 'name',
			type : 'string',
			index : 'name'
		}, {
			name : 'age',
			type : 'int',
			index : 'age'
		}, {
			name : 'gender',
			type : 'string',
			index : 'gender'
		}, {
			name : 'english',
			type : 'float',
			index : 'english'
		}, {
			name : 'math',
			type : 'float',
			index : 'math'
		},
		/*扩张数据集 ...其他field略 ...  */
		{
			name : 'total',
			type : 'float',
			initValue : function(record) {
				return record['english'] + record['math'];
			}
		}

		]
	};

	//3.设计列 var colsConfig ...
	var colsConfig = [
			{
				id : 'no',
				header : "学号",
				fieldName : 'no'
			},
			{
				id : 'name',
				header : "姓名",
				fieldName : 'name'
			},
			{
				id : 'age',
				header : "年龄",
				fieldName : 'age'
			},
			{
				id : 'gender',
				header : "性别",
				width : 50,
				renderer : GT.Grid.mappingRenderer({
					'U' : '未知',
					'M' : '男',
					'F' : '女'
				}, '未知')
			},
			{
				id : 'english',
				header : "英语",
				fieldName : 'english'
			},
			{
				id : 'math',
				header : "数学",
				fieldName : 'math'
			},
			//增加扩展列
			{
				id : 'total',
				header : "总成绩",
				width : 70,
				align : 'right',
				renderer : function(value, record, columnObj, grid, colNo,
						rowNo) {
					var total = record['total'];
					if (total > 170) {
						total = '<span style="color:red" >' + total + '</span>';
					} else if (total < 120) {
						total = '<span style="color:blue" >' + total
								+ '</span>';
					}
					return total;
				}
			},
			//扩张显示列
			{
				id : 'detail',
				header : "详细信息",
				width : 120,
				renderer : function(value, record, columnObj, grid, colNo,
						rowNo) {
					//.代表当前
					return '<a href=".?no=' + record['no'] + '" >'
							+ record['name'] + ' 的详细信息</a>';
				}
			}

	];

	//4.设计grid的参数   var gridConfig ....
	var gridConfig = {

		id : "grid1",
        
		/*
		loadURL : '.....'  值为一个合法的 可访问到的url,本例中是我写的一个servlet的url 
        remotePaging : true/false 时候使用远程分页. 如果是客户端分页 要设置成 false,
		*/
		loadURL : 'test1',  
	    remotePaging : false,   

		
		dataset : dsConfig,

		columns : colsConfig,

		container : 'grid1_container',

		toolbarPosition : 'bottom',

		toolbarContent : 'state',
		toolbarContent : 'nav | goto | pagesize | state',
		pageSize : 10,		
		pageSizeList : [5,10,15,20] 

	};

	//5.var mygrid=new GT.Grid( gridConfig );
	var mygrid = new GT.Grid(gridConfig);

	//6. load加载
	GT.Utils.onLoad(GT.Grid.render(mygrid));
</script>
</head>
<body>
	<!-- grid的容器. -->
	<div id="grid1_container" style="width:700px;height:300px"></div>

</body>
</html>



2.第二个案例

需要引入jar包


Test2.java

package test;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
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.JSONArray;
import net.sf.json.JSONException;
import net.sf.json.JSONObject;

public class Test2 extends HttpServlet {

	//模拟数据库
	private static int total=200;
	public static List MOCK_DATA=new ArrayList();
	static{
		String [] genders={"U","M","F"};
		for(int i=0;i<total;i++){
			Map reocrd=new HashMap();
			reocrd.put("no",new Integer(i+1));
			reocrd.put("name", "ab"+i);
			reocrd.put("age", (int)((Math.random()+1)*10)+10);
			reocrd.put("gender", genders[i%3]);
			reocrd.put("english", new Integer((int)(((Math.random()+1)*100)%80+20)));
			reocrd.put("math", new Integer((int)(((Math.random()+1)*100)%70+30)));
            MOCK_DATA.add(reocrd);
		}
		
	}
	public static int countStudents(){
		return MOCK_DATA.size();
	}
	public static List getStudentByPage(int startRowNum,int pageSize){
		List pageData=new ArrayList();
		for(int i=startRowNum-1,len=startRowNum+pageSize-1;i<len;i++){
			pageData.add(MOCK_DATA.get(i));
		}
		return pageData;
	}
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
	   doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		//接受gt_grid发送请求
		req.setCharacterEncoding("UTF-8");
		String gtjson=req.getParameter("_gt_json");
		//把String转化为json
		JSONObject jsonObject=JSONObject.fromObject(gtjson);
		
		//把json转化为map
		Map  indata=jsonMap(jsonObject);
		Map page=(Map) indata.get("pageInfo");
//		System.out.println(page);
		
		//覆盖总页数
		page.put("totalRowNum",total);
		
		//得到查询后的结果
		List list=getStudentByPage(Integer.parseInt(page.get("startRowNum").toString()),Integer.parseInt(page.get("pageSize").toString()));
		
		//返回的json
		JSONObject rjson=new  JSONObject();
		rjson.put("pageInfo",page);
		rjson.put("data",list);
		System.out.println(rjson);
		
		resp.setCharacterEncoding("UTF-8");
		resp.setContentType("text/html");
		PrintWriter out=resp.getWriter();
		out.print(rjson.toString());
		out.flush();
		out.close();
	}

	public static Map jsonMap(JSONObject  obj_JS){
		Map map=new HashMap();
		Iterator  keyItr=obj_JS.keys();
		while(keyItr.hasNext()){
			String key=(String) keyItr.next();
			Object e;
			try{
				e=obj_JS.get(key);
				if(e instanceof  JSONObject){
					e=jsonMap((JSONObject)e);
				}
				map.put(key, e);
			}catch(JSONException e1){
				
			}
		}
		return map;
	}
}

在web文件配置 

<servlet>
		<servlet-name>test2</servlet-name>
		<servlet-class>test.Test2</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>test2</servlet-name>
		<url-pattern>/test2</url-pattern>
	</servlet-mapping>

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>gt-grid案例2</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<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">
	-->
<link rel="stylesheet" type="text/css" href="gt-grid/gt_grid.css" />
<script type="text/javascript" src="gt-grid/gt_msg_cn.js"></script>
<script type="text/javascript" src="gt-grid/gt_grid_all.js"></script>
<script type="text/javascript">
	//2.创建数据集   var dsConfig ....
	var dsConfig = {

		fields : [ {
			name : 'no',
			type : 'int',
			index : 'no'
		}, {
			name : 'name',
			type : 'string',
			index : 'name'
		}, {
			name : 'age',
			type : 'int',
			index : 'age'
		}, {
			name : 'gender',
			type : 'string',
			index : 'gender'
		}, {
			name : 'english',
			type : 'float',
			index : 'english'
		}, {
			name : 'math',
			type : 'float',
			index : 'math'
		},
		/*扩张数据集 ...其他field略 ...  */
		{
			name : 'total',
			type : 'float',
			initValue : function(record) {
				return record['english'] + record['math'];
			}
		}

		]
	};

	//3.设计列 var colsConfig ...
	var colsConfig = [
			{
				id : 'no',
				header : "学号",
				fieldName : 'no'
			},
			{
				id : 'name',
				header : "姓名",
				fieldName : 'name'
			},
			{
				id : 'age',
				header : "年龄",
				fieldName : 'age'
			},
			{
				id : 'gender',
				header : "性别",
				width : 50,
				renderer : GT.Grid.mappingRenderer({
					'U' : '未知',
					'M' : '男',
					'F' : '女'
				}, '未知')
			},
			{
				id : 'english',
				header : "英语",
				fieldName : 'english'
			},
			{
				id : 'math',
				header : "数学",
				fieldName : 'math'
			},
			//增加扩展列
			{
				id : 'total',
				header : "总成绩",
				width : 70,
				align : 'right',
				renderer : function(value, record, columnObj, grid, colNo,
						rowNo) {
					var total = record['total'];
					if (total > 170) {
						total = '<span style="color:red" >' + total + '</span>';
					} else if (total < 120) {
						total = '<span style="color:blue" >' + total
								+ '</span>';
					}
					return total;
				}
			},
			//扩张显示列
			{
				id : 'detail',
				header : "详细信息",
				width : 120,
				renderer : function(value, record, columnObj, grid, colNo,
						rowNo) {
					//.代表当前
					return '<a href=".?no=' + record['no'] + '" >'
							+ record['name'] + ' 的详细信息</a>';
				}
			}

	];

	//4.设计grid的参数   var gridConfig ....
	var gridConfig = {

		id : "grid1",
        
		/*remotePaging : true时候使用服务器端分页*/
		loadURL : 'test2',  
	    remotePaging : true,   
      //String gtJson = request.getParameter("_gt_json");  
		
		dataset : dsConfig,

		columns : colsConfig,

		container : 'grid1_container',

		toolbarPosition : 'bottom',

		toolbarContent : 'state',
		toolbarContent : 'nav | goto | pagesize | state',
		pageSize : 10,		
		pageSizeList : [5,10,15,20] 

	};

	//5.var mygrid=new GT.Grid( gridConfig );
	var mygrid = new GT.Grid(gridConfig);

	//6. load加载
	GT.Utils.onLoad(GT.Grid.render(mygrid));
</script>
</head>
<body>
	<!-- grid的容器. -->
	<div id="grid1_container" style="width:700px;height:300px"></div>

</body>
</html>


闫梅
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
gt-grid demo 源码下载
10-09
GT-Grid 的最新版本 + 与后台结合的例子 大家重点看action 里是如何从客户端取数据 以及如何向客户端送数据的
js表格控件: Sigma Grid
徐行
03-09 4645
//Sigma var mygrid=new Sigma.Grid( gridOption ); Sigma.Util.onLoad( Sigma.Grid.render(mygrid) ); Sigma Grid是一个采用纯javascript开发的Ajax数据表格。特性包括： 1.基于CSS控制外观，内置Classic、Vista、Mac、XP四种风格。 2.提供
GT-Grid的实例
xilangyuyun的专栏
08-18 3363
下面是GT-Grid的详细使用：  1.首先需要在页面定义gt-grid展示容器，一般都是用标签来实现：       2.需要导入gt-grid的js文件和样式： /style/ui_component/gt-grid/gt_grid.css" /> /sty
GT-Grid高级使用教程
死牛崇拜的专栏
08-13 9960
1.1.1.序言   GT-Grid是一款国人开发的列表显示组件，免费但不开源，由于不开源，GT-Grid中存在一些问题我们无法修改，幸好不是什么大问题。我在下面介绍的代码都来自于浙江移动需求管理平台，由于Word的排版问题，代码格式不是很正确，另外我只写了一部份代码在上面(把所有的代码都罗列出来本是就是一件很难的事情)，大家可以参考RDMP中的源代码。 1.1.2.弹出窗口返回值，并在单元格右上角显示修改状态 在子窗体中返回数据并修改对应的单元格数据，这时，由于GT-GRID本身没有相应的API来实现，我
GT-Grid 1.0 基础教程(十)
大城小胖的大城
08-03 146
GT-Grid 1.0 基础教程(十) [size=large][b]教程说明:[/b][/size] 这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程". 查看[color=blue]其他教程[/color],以及最新版本信息,请[url="http://fins.iteye.com/blog/214290"]点击这里[/url] [size=...
GT-Grid 1.0 基础教程(二)
大城小胖的大城
07-13 161
GT-Grid 1.0 基础教程(二) [size=large][b]教程说明:[/b][/size] 这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程". 查看[color=blue]其他教程[/color],以及最新版本信息,请[url="http://fins.iteye.com/blog/214290"]点击这里[/url] [siz...
归档-jquery-grid懒加载.zip
06-18
归档-jquery-grid懒加载.zip
ui-grid：UI网格：角度数据网格
01-31
UI-Grid：AngularJS数据网格 救命！ 前往以获得文档和教程。 加入讨论开发并寻求具体帮助。 我们一直在寻找新的贡献者，对于专业级别的贡献准则，请访问 ，如果您更喜欢开放源代码的初学者（或者只是需要复习），...
v-grid-layout：网格布局
02-15
v-grid-layout⺲ v-grid-layout是Vue的网格布局系统，例如 。 这是的裸分支，它支持将GridItem嵌套在任何其他组件中 [| | ] 特征 可拖动的小部件 可调整大小的小部件 静态小部件 边界检查以进行拖动和调整大小 ...
gt-grid.rar+demo
03-23
gt-grid 样例源码
GT-Grid的初学
yanmei的专栏
04-10 4359
GT-Grid  1.简介： GT-Grid 是一个基于Ajax技术的列表组件. 拥有丰富的功能以及良好易用性和用户体验. 它是 EC Side列表组件 的更新换代产品. (ECSide是GT-Grid作者的另一作品, 是一个在国内拥有广泛用户群的列表组件,它基于传统的jspTag技术)  2.GT-Grid 所需文件  3.初学实例 （1）首
extjs-grid数据加载
香酥蟹的博客
01-07 1787
1、grid并没提供直接加载对象和对象数组的方法，但是可以通过其他的方式实现，所以我这里写了一个实现这样功能的方法arr2grid（即供参考）。grid只依赖一个store，所以受限，方法arr2grid，可以解决这个问题。 2、store配置autoLoad和使用load方法，都可以加载数据到store，grid依赖store，从而数据也就加载到grid上，本事例只是jsonp跨域加载store
大连首闻grid二次开发增强文档
blurooo的博客
09-30 2229
1. 说明：本插件基于大连首闻grid所做的二次开发，增强了ajax与服务器交互的功能，扩展了增删改查，支持restful风格
ExtJs Grid的load遮罩层的配置
Joyce Luo的专栏
03-28 6462
当还有不爱看的ExtJs的官方API时，这时候为了要解决一下Grid在load时候遮罩层上的字而开始大幅使用网络查找了！虽然在如今的这网络发达的时代，有些东西有些问题都能通过网络查找来解决，但是还是建议各位程序猿不要抛弃API和源码。           好啦，直接贴上修改的配置属性： viewConfig:{ loadMask:true, loadMask:{
jqGrid表格加载返回数据为空时，alert一句提示
chp891202的博客
12-13 4139
loadComplete: function () {                             var re_records = $("#table2").jqGrid('getGridParam', 'records'); //获取数据总条数                             if(re_records==0){                    
jqGrid的分页
热门推荐
javaqun的博客
12-17 1万+
1、先导入三个jar包 2、再导入两个css文件 3、最后导入三个js文件 4、jsp里引入css和js文件，注意先后顺序 5、在jsp里写一个存放表格数据的table和div <div id='tableDay' style="float: left; width: 780px; margin: 0 15px 0 13px;">
GT-Grid的帮助文档汇总
xilangyuyun的专栏
08-18 3794
GT-Grid是使用很普遍，很耐使的报表展示组件，它是一个基于Ajax技术的列表组件. 拥有丰富的功能以及良好易用性和用户体验. 它是 EC Side列表组件 的更新换代产品. (ECSide是GT-Grid作者的另一作品, 是一个在国内拥有广泛用户群的列表组件
vxe-grid表格如何做到下滑加载数据
最新发布
03-14
vxe-grid表格可以通过设置lazyLoad属性来实现下滑加载数据。当lazyLoad属性为true时，表格会在滚动到底部时自动触发loadmore事件，从而加载更多数据。同时，需要在loadmore事件中调用异步数据加载方法，将新数据添加到表格中即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值