现在比较主流的技术,在视图层所使用的表格控件,本来是打算使用功能比较强大的dhtmlxgrid的,但是在这个表格控件的样式不好定义,使用默认的样式和我想要的UI样式不协调,最后决定使用jquery的一个插件表格flexigrid,在集成和使用的过程中遇到了一些问题,实在让我郁闷得很,但最终还是一一解决了.在些做一个小结.有不对的地方希望各位大虾不要拍砖.
对于struts2和spring+hibernate的集成没什么好说的网上有好多这方面的资料,在些就不讲解了.只讲一下如何使用json传输数据.
在stuts2中使用json传输数据,需要使用到一个struts2的插件jsonplugin,在网上下载后,直接考到类路径下面就可以了,需要在struts2的配置sturts.xml文件里中里修改一下如下:
1, <package name="luanmadAjaxTree" extends="json-default" >//包要继承这个,因为jsonplugin自己带了一个配置文件struts-plugin.xml,里面继承了struts-default 包,文件如下:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="json-default" extends="struts-default">
<result-types>
<result-type name="json" class="com.googlecode.jsonplugin.JSONResult"/>
</result-types>
<interceptors>
<interceptor name="json" class="com.googlecode.jsonplugin.JSONInterceptor"/>
</interceptors>
</package>
</struts>
2, 修改action的返回值类型,当使用这个插件以后,可以不返回任何视图,直接返回json数据.交由js处理
<action name="demo" class="demo" method="list" >
<result type="json"></result>
</action>
后台基本配置好了,下面就是对前台的一个整合
下载jquery和flexigrid包含到页面,注意顺序,先jquery.js在flexigrid.js.
表格初如化
1,定义表格容器,对flexigrid是需要有个表格容器才能显示的;
<table id="flexigrid"></table>
2,初始化
<script>
$(document).ready(function(){
$("#grid").flexigrid({
url: "demo.action",
dataType: 'json',
colModel : [{display: '编号', name : 'id', width : 20, sortable : true, align: 'center'},
{display: '姓名, name : 'name', width : 180, sortable : true, align: 'left'},
{display: '生日', name : 'bathday', width : 60, sortable : true, align: 'left'},
{display: '年龄, name : 'age', width : 60, sortable : true, align: 'left'}],
sortname: "id",
sortorder: "desc",
usepager: true,
title: '表头名称',
useRp: false,
rp: 10,
showTableToggleBtn: true,
procmsg: '正在加载数据,请稍等...'
</script>
还有许多参数,具体作用如下:
1. height: 200, //flexigrid插件的高度,单位为px
2. width: ‘auto’, //宽度值,auto表示根据每列的宽度自动计算
3. striped: true, //是否显示斑纹效果,默认是奇偶交互的形式
4. novstripe: false,
5. minwidth: 30, //列的最小宽度
6. minheight: 80, //列的最小高度
7. resizable: true, //是否可伸缩
8. url: false, //ajax方式对应的url地址
9. method: ‘POST’, // 数据发送方式
10. dataType: ‘xml’, // 数据加载的类型
11. errormsg: ‘Connection Error’,//错误提升信息
12. usepager: false, //是否分页
13. nowrap: true, //是否不换行
14. page: 1, //默认当前页
15. total: 1, //总页面数
16. useRp: true, //是否可以动态设置每页显示的结果数
17. rp: 15, // 每页默认的结果数
18. rpOptions: [10,15,20,25,40],//可选择设定的每页结果数
19. title: false,//是否包含标题
20. pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式
21. procmsg: ‘Processing, please wait …’,//正在处理的提示信息
22. query: ”,//搜索查询的条件
23. qtype: ”,//搜索查询的类别
24. nomsg: ‘No items’,//无结果的提示信息
25. minColToggle: 1, //minimum allowed column to be hidden
26. showToggleBtn: true, //show or hide column toggle popup
27. hideOnSubmit: true,//隐藏提交
28. autoload: true,//自动加载
29. blockOpacity: 0.5,//透明度设置
30. onToggleCol: false,//当在行之间转换时
31. onChangeSort: false,//当改变排序时
32. onSuccess: false,//成功后执行
33. onSubmit: false // 调用自定义的计算函数
下面就是最主要的一点,把返回的json格式的数据填到表格里
后台业务代码我就不写了,这里主要讲一下返回的json格式,前几天就是因为返回的格式不对,表格里老是显示不出来数据,郁闷得很.
flexigrid要求的返回格式,
{
"total":111, //数据总数
"page":4, //页码(第几页)
"rows":[
{"id":"1","cell":["a","b","c","e"]},
{"id":"2","cell":["a","b","c","e"]},
{"id":"3","cell":["a","b","c","e"]},
{"id":"4","cell":["a","b","c","e"]},
]}
格式一定要按照上面的来,要不然就是显示不出来,如果json格式是自己转换的话,但是不难,问题是,我们使用了插件,插件会自动帮我们转换,但是按照一般的来处理就会导致转换出来的格式不对,我在这里说一下.几种类型的转成json后的返回值:
map
{"map名":{}}转换时会自动在前面加上一个map后面才是值
{"map":{"id":2,"age":22,"name":"zhang","bathday":"2009-08-09"}}
list
{"list名":{}}同上
{"list":[{"age":12,"bathday":"2009-10-11","id":1,"name":"deng"},{"age":22,"bathday":"2009-08-09","id":2,"name":"zhang"}]}
javaBean
{"bean名":{}}同上
{"dean":{"age":12,"bathday":"2009-10-11","id":1,"name":"deng"}}
直接返变量
{"":"","":""}
{"age":22,"bathday":"2009-08-09","id":2,"name":"zhang"}
从上面几种返回格式,我们就可以去构造flexigrid所需要的数据格式了
{
"total":111, //数据总数
"page":4, //页码(第几页)
"rows":[
{"id":"1","cell":["a","b","c","e"]},
{"id":"2","cell":["a","b","c","e"]},
{"id":"3","cell":["a","b","c","e"]},
{"id":"4","cell":["a","b","c","e"]},
]}
里面有变量的返回类型,有list的返回类型,有map的返回类型
构造
private bean//这是你的bean类
private total;
private page;
private Map map=new HashMap()
private List rows=new ArrayList();//这里有一个List返回,所以名字起成rows
生成相应的get和set 方法
map.put("id","1");//对应"id":"1","
map.put("cell",new Object{bean.getA(),bean.getB()......})//对应cell":["a","b","c","e"]
rows.add(map);//对应"rows":[
{"id":"1","cell":["a","b","c","e"]},
{"id":"2","cell":["a","b","c","e"]},
{"id":"3","cell":["a","b","c","e"]},
{"id":"4","cell":["a","b","c","e"]},
]}
total="100""total":111, //数据总数
pate="2"//"page":4, //页码(第几页)
这样就可以构造出正确的数据格式
分享到:
相关推荐
struts2+spring3+hibernate3+jquery+flexigrid+mysql实例
使用了框架是Struts1+hibernate+spring 集成了JQuery的FlexiGrid表格插件以及 jsmodal弹出框插件 一个增删改列表 数据库使用的是MYSQL 内有建表语句 数据库配置请自行配置本机数据库
一个基于flexigrid+struts2+json+jquery开发的实例,并拓展了一些功能: 1.添加了右键事件(查删改),jqmodal 2.实现了列百分比的显示 3.优化了查询界面
struts2.1.6+spring+hibernate+jquery+flexigrid+thickbox+mysql Struts2返回Json类型,分页显示在flexigrid表中 下载后进行评价获得积分:评价时要选择五角星才能获取积分,不然分数还是会被扣除
此项目是struts2+json+flexigrid的完整实例,可帮助你对flexigrid快速上手,项目下载后直接导入自己的工程即可,所用jar包会另传,因为超出上传限制,还请理解。
是struts2+json+flexigrid的完整实例所用到的jar包,请大家下载时看清楚。
jquery表格插件Flexigrid 将数据按照表格排列,类似与ext。
jquery flexigrid;jquery flexigrid
JQuery_插件FlexiGrid_之完全配置与使用
jquery+flexigrid+json的java例子(网上收集的) 适合初学的兄弟姐妹们参考~~
jquery 表格插件 Flexigrid
flexigrid表格控件的使用实例,实现了和struts1.3的集成,实现了动态添加和删除。 文档包括: user_mgr.jsp ,jsp页面 UserAction.jsp ,控制层Action js包,相关的js jar使用到的jar包
NULL 博文链接:https://johlon.iteye.com/blog/1039655
jquery flexigrid与jquery tablesort 配合实现flexigrid的客户端排序功能。jsp项目,无需数据库即可运行
Flexigrid与struts2 说明,还有Flexigrid的使用说明和Flexigrid的实例。Flexigrid的包。
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。这个例子对...
很好用的一个插件,这个版本是php的,。net的没有调试好,以后会上传(成功后) 更多精彩,请访问建站易教程网:www.diyiyusuan.com
Jquery FlexiGrid JS 前后台数据的传值、对象 前台使用FlexiGrid 插件显示数据条数 注意:action层变量名对应