2008-07-24
GT-Grid最新版本+ 与服务端结合的示例 (08年8月3日 1:30am更新)
关键字: ajax, grid
http://fins.javaeye.com/blog/214290 里面的内容太多了
决定另起一篇来发布.
这个是 GT-Grid 的最新版本 + 与后台结合的例子
==========================================
8月3号的版本 是GT-Grid 1.0正式发布前的 最后一次更新
该版本 和 7月29日版本相比 变化比较大(指代码内部的实现,而不是API)
希望大家帮忙测试一下 , 离8月8号越来越近了 本来不应该在这时候对代码进行较大的重构的,不过 我还是在稳定和"新思路"中选择了后者. :oops:
GT-Grid 1.0正式版 的质量如何, 很大程度上取决于大家对8月3日版本的试用和反馈,
所以希望长久以来,一直关注和支持GT-Grid的朋友们 能够在这关键时刻再狠狠的支持我一回.
在这里我向大家致敬了, 谢谢你们.
==========================================
如果只对 gt-grid 感兴趣
那么您只需关注 包中gtdemo\WebContent\gt-grid 下的内容
另外 大家注意一下 里面的这个文件 user_document.txt
虽然还很粗糙 但是 比以前已经完善了很多 ,已经可以作为一个简单的参考了
==========================================
这个例子 主要演示了 gt-grid与后台结合的方法.
请大家重点看action 里是如何从客户端取数据 以及如何向客户端送数据的
而其他地方 例如action如何实现的 , dao层是如何实现的 等等不是大家要看的重点.
dao层只要能返回一个 数据集合 并且这个集合能够转换成json字符串
那么dao层怎么实现 完全按你自己的意愿来.
这个示例中提供了一个 GridServerHandler的工具类, 建议看看这个类的实现方法
这样能更好的理解 gt-grid和后台交互的方式以及原理.
整个示例的后台代码 我没有使用任何第三方框架 所以难免粗糙 还请大家海涵.
==========================================
运行步骤
1 部署后, 运行 startdb.bat 启动数据库
* h2manager.bat是一个h2db提供的数据库管理程序.
2 启动web应用
3 在浏览器里输入 http://127.0.0.1:8080/gtdemo/index.do
(地址根据实际情况而定),进入"示例列表"页面
4 目前"示例列表"中有三个示例.
您可以点击您感兴趣的进行查看和研究.
=============================================
注意: 附件并不是一个直接部署的war包 而是一个eclipse项目
不过我相信有经验的朋友可以很轻易的就部署成功
决定另起一篇来发布.
这个是 GT-Grid 的最新版本 + 与后台结合的例子
==========================================
8月3号的版本 是GT-Grid 1.0正式发布前的 最后一次更新
该版本 和 7月29日版本相比 变化比较大(指代码内部的实现,而不是API)
希望大家帮忙测试一下 , 离8月8号越来越近了 本来不应该在这时候对代码进行较大的重构的,不过 我还是在稳定和"新思路"中选择了后者. :oops:
GT-Grid 1.0正式版 的质量如何, 很大程度上取决于大家对8月3日版本的试用和反馈,
所以希望长久以来,一直关注和支持GT-Grid的朋友们 能够在这关键时刻再狠狠的支持我一回.
在这里我向大家致敬了, 谢谢你们.
==========================================
如果只对 gt-grid 感兴趣
那么您只需关注 包中gtdemo\WebContent\gt-grid 下的内容
另外 大家注意一下 里面的这个文件 user_document.txt
虽然还很粗糙 但是 比以前已经完善了很多 ,已经可以作为一个简单的参考了
==========================================
这个例子 主要演示了 gt-grid与后台结合的方法.
请大家重点看action 里是如何从客户端取数据 以及如何向客户端送数据的
而其他地方 例如action如何实现的 , dao层是如何实现的 等等不是大家要看的重点.
dao层只要能返回一个 数据集合 并且这个集合能够转换成json字符串
那么dao层怎么实现 完全按你自己的意愿来.
这个示例中提供了一个 GridServerHandler的工具类, 建议看看这个类的实现方法
这样能更好的理解 gt-grid和后台交互的方式以及原理.
整个示例的后台代码 我没有使用任何第三方框架 所以难免粗糙 还请大家海涵.
==========================================
运行步骤
1 部署后, 运行 startdb.bat 启动数据库
* h2manager.bat是一个h2db提供的数据库管理程序.
2 启动web应用
3 在浏览器里输入 http://127.0.0.1:8080/gtdemo/index.do
(地址根据实际情况而定),进入"示例列表"页面
4 目前"示例列表"中有三个示例.
您可以点击您感兴趣的进行查看和研究.
=============================================
注意: 附件并不是一个直接部署的war包 而是一个eclipse项目
不过我相信有经验的朋友可以很轻易的就部署成功


评论
在iframe中不能使用
能否具体说说你的使用场景??
我在这边测试了一下 是可以的啊
而且我的一些用户 就是在iframe中使用的
另外 建议您使用新版本 1.18版
这个新版本里 有查询相关的例子
初步看了下载包中提供的例子,大概的功能都会用了,但有两点现在没弄明白:
一如果我要根据输入的查询条件查询结果,然后返回到grid显示,那我的loadURL应该怎么写呢?
同问:如果有条件查询,查询后的结果集变了,请问能否动态改变loadURL?
但目前也有个变通的方法,就是把条件通过ajax提交保存到session,或者直接在jsp页面上改session值保存到session里,后台取数据前判断session,然后reload gt-grid 一下
请不要咨询任何关于ecside的问题了
初步看了下载包中提供的例子,大概的功能都会用了,但有两点现在没弄明白:
一如果我要根据输入的查询条件查询结果,然后返回到grid显示,那我的loadURL应该怎么写呢?
二好老头提到过了,表格中的可编辑列表可以是动态获取的么?因为可编辑列表的选择动态获取应该是挺多人会遇到的吧。
再次感谢fins。
至于如何设置/取得这些checkbox 如何利用他们(用来做什么)完全由开发人员自己来做
checkBox Column 和 "GT自带的选中行功能" 没有关系
以后我会加强这个checkBox的功能的 同时修正一些bug
我这有两个版本的gt,一个是7月6号的,一个是8月3号的,我对表格添加了checkbox,根据fins提供的api,通过grid.checkedRows可以得到所有被选中行,我做了如下测试:
1.在colsOption中添加代码
{id: 'chk' ,isCheckColumn : true, filterable : false, header: "", title: "全选" , fieldName : 'no'}2.添加js代码
var argStr=""; function test(){ var ids ={}; ids = mygrid.checkedRows; for(var id in ids){ if(id.value ="true"){ argStr = argStr + id +";"; } } alert(argStr); }3.添加测试按扭
<button onclick="test()">测试</button>
得到结果是,在7月6号版本里面可以取到全部选中行,在8月3号就能取到第一行,如果点下排序就能取到两个(升排序和降排序的第一个)
见 http://fins.javaeye.com/blog/213468
http://www.sigmawidgets.com/
谢谢!
我用的 是 json.org 那个包
你要把 vo 转换成 json 请使用 json工具包
你自己写的那个toString方法是错误的
{"pageInfo":{"totalRowNum":16},"data":["{id :1,datasrcid :2,datasrcname :503黑盒,name :IP,remark :null,remarkdetail :null}","{id :2,datasrcid .....后面几条我就不列了
js代码
var gridOption={ id : grid_demo_id, width: "700", height: "300", pageSize : 3, container : 'mygrid_container', //toolbarPosition : null, showGridMenu : false , toolbarContent : 'nav | pagesize | reload | info', pageSizeList : [ 1,5,10 ], showIndexColumn : false , dataset : dsOption , columns : colsOption , loadURL : APP_PATH+'/**.action', remotePaging : false }; var mygrid=new GT.Grid( gridOption ); GT.Utils.onLoad( GT.Grid.render(mygrid) ); ....html代码后台代码
List temp=mgr.selectObjTypeByPageNo(pageSize,currentPageNo); all=temp; totalCount = mgr.getCount(); try{ GridServerHandler gridServerHandler=new GridServerHandler(this.getReq(),this.getRes()); gridServerHandler.setTotalRowNum(totalCount); gridServerHandler.setData(all); HttpServletResponse response = this.getRes(); response.setContentType("text/plain;charset=utf-8"); PrintWriter out=response.getWriter(); out.print(gridServerHandler.getLoadResponseText()); out.close(); }catch(Exception e){ e.printStackTrace(); }vo对象如果按照你例子的写法,重写toString()方法
public String toString(){ return super.toString()+" : "+no+","+name+","+gender+","+birthday+","+""+department+","+memo; }super.toString()得到的是对象地址,如下:{"pageInfo":{"totalRowNum":16},"data":["com.ncs.jz.business.JZ_BASE_OBJECTTYPE@a09a08 : 1,2,503,IP,null,null","com.ncs.jz.business.JZ_BASE_OBJECTTYPE@1e0a14a.....而我改成public String toString(){ return "{id :" + id +","+ "datasrcid :" + datasrcid +","+ "datasrcname :" + datasrcname +","+ "name :" + name +","+ "remark :" + remark +","+ "remarkdetail :" + remarkdetail+"}";}就是最上面的情况,请问楼主,是我写的不对,还是有地方没有改过来,或者漏掉了什么地方,请指教.
ps:你那个json的转换代码好象是json-lib的源码,不过我没发现fromObject方法
JSONArray jsonObject = JSONArray.fromObject(DataSrcList);
jsonObject.toString()