注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

花随梦影蝶纷飞

记住该记住的,忘记该忘记的,改变能改变的,接受不能改变的。

 
 
 

日志

 
 

GT-grid 组件  

2014-06-20 14:24:10|  分类: ★前台技术★ |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
案例一:
index.jsp:

<%@ page pageEncoding="UTF-8" %>
<%@ page import="java.util.*" %>

<%
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>测试JavaScriptServlet</title>

<script type="text/javascript" src="<%=path%>/common/gt-grid/gt_msg_cn.js"></script>
<script type="text/javascript" src="<%=path%>/common/gt-grid/gt_grid_all.js"></script>
<link rel="stylesheet" type="text/css" href="<%=path%>/common/gt-grid/gt_grid.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/common/gt-grid/skin/china/skinstyle.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/common/gt-grid/skin/vista/skinstyle.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/common/gt-grid/skin/mac/skinstyle.css" />

<script src="<%=path%>/script/list/list.js" type="text/javascript" ></script>

</head>
<body>
<div id="mygrid" style="width: 100%;"> </div>
</body>
</html>

list.js:

var grid_id = "mygrid";

var dsOption= {
fields :[
{name : 'feild1'},
{name : 'feild2'},
{name : 'feild3'},
{name : 'feild4'},
{name : 'feild5'}
]
};

var colsOption = [
{id: 'feild1' , header: '一', width:"200", sortable:false},
{id: 'feild2' , header: '二', width:"150", sortable:false},
{id: 'feild3' , header: '三', width:"100", sortable:false},
{id: 'feild4' , header: '四', width:"100", sortable:false},
{id: 'feild5' , header: '五', width:"20%", sortable:false}
];

var gridOption={
id : grid_id,
remotePaging : true,
pageSize : 10,
encoding : 'UTF-8',
container : 'mygrid',
remoteFilter : false,
showGridMenu : false ,
pageSizeList : [10,20,30],
toolbarContent : 'nav | pagesize | reload | info',
showIndexColumn : false ,
lightOverRow:true,
loadURL:'/test/gtgrid.do',
selectRowByCheck : true,
columns : colsOption
};

grid = new GT.Grid(gridOption);

GT.Utils.onLoad( GT.Grid.render(grid));

响应Servlet:

package cn.nice;
import java.io.IOException;
import java.util.Map;
import java.util.Set;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class GtgridServlet extends HttpServlet {

private static final long serialVersionUID = -3417256186161120586L;

@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String str = "{";
int len = 100;
str = str + "data : [";
for(int i=0;i<len;i++){
str = str + "{ feild1 : '"+ i +"', feild2 : " + i + ", feild3 : " + i + ", feild4 : " + i + ", feild5 :" + i + "}";
if(i!=(len-1)){
str = str + ",";
}
}
str = str + "]";
str = str + "}";
System.out.println(str);
response.getWriter().write(str);
}

}

案例二:
响应Servlet:

package cn.nice;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

public class GtgridServlet extends HttpServlet {

private static final long serialVersionUID = -3417256186161120586L;

@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//=====================请求=====================
int pageNum = 1;
int pageSize = 10;
int startRowNum = 1;
try {
// 接收JSON数据
String json = request.getParameter("_gt_json");
// 解析JSON
JSONObject jsonObj = new JSONObject(json);
// 获取: pageInfo
JSONObject pageInfo = (JSONObject) jsonObj.getJSONObject("pageInfo");
pageNum = Integer.parseInt(pageInfo.getString("pageNum"));
pageSize = Integer.parseInt(pageInfo.getString("pageSize"));
startRowNum = Integer.parseInt(pageInfo.getString("startRowNum"));
System.out.println("pageNum = " + pageNum );
System.out.println("pageSize = " + pageSize);
System.out.println("startRowNum = " + startRowNum);
} catch (JSONException e) {
e.printStackTrace();
}
//=====================数据====================
int len = 100;
String[] strs = new String[len];
for(int i=0;i<100;i++){
strs[i] = i + "="+"=" + i;
}
//=====================响应=====================
String respStr = "";
try {
JSONObject respJSON = new JSONObject();
// pageInfo
JSONObject paegInfo = new JSONObject();
paegInfo.put("totalRowNum", len);
paegInfo.put("pageNum", pageNum);
paegInfo.put("pageSize", pageSize);
// data
JSONArray data = new JSONArray();
for(int i=(startRowNum-1);i< (startRowNum-1) + pageSize;i++){
JSONObject feilds = new JSONObject();
feilds.put("feild1", strs[i]);
feilds.put("feild2", strs[i]);
feilds.put("feild3", strs[i]);
feilds.put("feild4", strs[i]);
feilds.put("feild5", strs[i]);
data.put(feilds);
}
respJSON.put("pageInfo", paegInfo);
respJSON.put("data", data);
respStr = respJSON.toString();
} catch (JSONException e) {
e.printStackTrace();
}
System.out.println(respStr);
response.setContentType("text/json; charset=utf-8");
response.getWriter().print(respStr);
response.getWriter().close();
}

}

响应JSON数据格式:

{
"pageInfo":{
"totalRowNum":100,"pageSize":10,"pageNum":2
},
"data":[
{"feild4":"10==10","feild3":"10==10","feild2":"10==10","feild5":"10==10","feild1":"10==10"},
{"feild4":"11==11","feild3":"11==11","feild2":"11==11","feild5":"11==11","feild1":"11==11"},
{"feild4":"12==12","feild3":"12==12","feild2":"12==12","feild5":"12==12","feild1":"12==12"},
{"feild4":"13==13","feild3":"13==13","feild2":"13==13","feild5":"13==13","feild1":"13==13"},
{"feild4":"14==14","feild3":"14==14","feild2":"14==14","feild5":"14==14","feild1":"14==14"},
{"feild4":"15==15","feild3":"15==15","feild2":"15==15","feild5":"15==15","feild1":"15==15"},
{"feild4":"16==16","feild3":"16==16","feild2":"16==16","feild5":"16==16","feild1":"16==16"},
{"feild4":"17==17","feild3":"17==17","feild2":"17==17","feild5":"17==17","feild1":"17==17"},
{"feild4":"18==18","feild3":"18==18","feild2":"18==18","feild5":"18==18","feild1":"18==18"},
{"feild4":"19==19","feild3":"19==19","feild2":"19==19","feild5":"19==19","feild1":"19==19"}
]
}

案例三,查询和渲染:
带表单的页面:

<%@ page pageEncoding="UTF-8" %>
<%@ page import="java.util.*" %>

<%
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>测试JavaScriptServlet</title>

<script type="text/javascript" src="<%=path%>/common/gt-grid/gt_msg_cn.js"></script>
<script type="text/javascript" src="<%=path%>/common/gt-grid/gt_grid_all.js"></script>
<link rel="stylesheet" type="text/css" href="<%=path%>/common/gt-grid/gt_grid.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/common/gt-grid/skin/china/skinstyle.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/common/gt-grid/skin/vista/skinstyle.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/common/gt-grid/skin/mac/skinstyle.css" />

<script src="<%=path%>/script/list/list.js" type="text/javascript" ></script>

</head>
<body>
<form action="<%=path %>/gtgrid.do">
字段一: <input id="field1" type="text" value="" name="field1"/>
字段二: <input id="field2" type="text" value="" name="field2"/>
<input type="button" value="查询" onclick="query();"/> <input type="reset" value="清空"/>
</form>
<div id="mygrid" style="width: 100%;"> </div>
</body>
</html>

查询:

function query(){
var field1 = document.getElementById('field1');
var field2 = document.getElementById('field2');
GT.Utils.onLoad( GT.Grid.render(grid));
grid.query('field1='+field1.value+'&field2='+ field2.value);
}

第一列:

var colsOption = [
{id: 'feild1' , header: '一', width:"200", sortable:false},
{id: 'feild2' , header: '二', width:"150", sortable:false},
{id: 'feild3' , header: '三', width:"100", sortable:false},
{id: 'feild4' , header: '四', width:"100", sortable:false},
{id: 'feild5' , header: '五', width:"20%", sortable:false,renderer:myRender}
];

渲染列:

function myRender(value, record, columnObj, grid, colNo, rowNo) {
return "<a href='#'>" + value + "</a> " + record.feild1;
}

说明:
function myRender(value) {
     return "<a href='#'>" + value + "'</a>";
}
function myRender(value, record, columnObj, grid, colNo, rowNo){
     return "<a href='#'>" + value + "</a> " + record.feild1;
}
1. value : 相应单元格对应的数据值 
2. record : 迭代中当前的record
3. columnObj : 当前的column对象
4. grid : 当前的grid对象
5. colNo : 当前的列号
6. rowNo : 迭代中当前的行号

其他属性说明:
1.   autoLoad:false,自动不加载。
2.   autoLoad:true, 自动加载。
  评论这张
 
阅读(7)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017