Jquery插件FLexiGrid完全配置

宗政卓

2023-12-01

首先.去下载FlexGrid http://www.flexigrid.info/ ，下载完成后.解压开有__MACOSX和flexigrid两个文件夹，主要使用flexigrid里面的文件
flexgrid文件夹下文件如下：

准备工作完成后真正工作开始了在MyEclipse下新建Webproject.. 把flexigrid包下所有的文件拷贝到WebRoot/下
新建*.jsp页面 body体中加入

Jsp代码

1. <table id="flex1" style="display:none"></table>

做完flexigrid控件的显示容器. 没有则不会显示控件
页面引入控件代码

Javascript代码

1. <table id="flex1" style="display:none"></table>

2. <input id="hidden" type="hidden" name="hidden" value="null" />

3. <script>

4. $("#flex1").flexigrid

5. (

6. {

7. url: '../ReleaseInfoServlet?hidden=manage',

8. dataType: 'json',

9. colModel : [

10. {display: '信息编号', name : 'RINO', width : 50, sortable : true, align: 'center',hide: false},

11. {display: '信息标题', name : 'RITITLE', width : 250, sortable : true, align: 'center'},

12. {display: '信息类别', name : 'IC.ICNAME', width : 100, sortable : true, align: 'center'},

13. {display: '信息热点', name : 'RIHOTPOINT', width : 60, sortable : true, align: 'center'},

14.

15. {display: '发布日期', name : 'RIDATE', width : 120, sortable : true, align: 'center'},

16. {display: '发布作者', name : 'RIAUTHOR', width : 80, sortable : true, align: 'center'}

17. ],

18. buttons : [

19. {name: '添加', bclass: 'add', onpress : button},

20. {name: '删除', bclass: 'delete', onpress : button},

21. {name: '修改', bclass: 'modify', onpress : button},

22. {separator: true}

23. ],

24. searchitems : [

25. {display: '信息编号', name : 'RINO', isdefault: true},

26. {display: '信息标题', name : 'RITITLE'},

27. {display: '信息类别', name : 'IC.ICNAME'},

28. {display: '发布作者', name : 'RIAUTHOR'}

29. ],

30. sortname: "RINO",

31. sortorder: "desc",

32. usepager: true,

33. title: '信息发布管理',

34. useRp: true,

35. rp: 20,

36. showTableToggleBtn: true,

37. width: 780,

38. height: 300

39. }

40. );

41.

42. function button(com,grid)

43. {

44. if (com=='删除')

45. {

46. ${"hidden"}.value="delete";

47. if($('.trSelected',grid).length==0){

48. alert("请选择要删除的数据");

49. }else{

50. if(confirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?'))

51. {

52. var id ="";

53. for(var i=0;i<$('.trSelected',grid).length;i++){

54. if(i==$('.trSelected',grid).length-1){

55. id += "id="+$('.trSelected',grid).find("td:first").eq(i).text();

56. } else {

57. id += "id="+$('.trSelected',grid).find("td:first").eq(i).text()+"&";

58. }

59. }

60. window.location.href="../ReleaseInfoServlet?hidden="+${"hidden"}.value+"&"+id;

61. }

62. }

63. }

64. else if (com=='添加')

65. {

66. ${"hidden"}.value="add";

67. window.location.href="infoAdd.jsp?hidden="+${"hidden"}.value;

68. }

69. else if (com=='修改')

70. {

71. ${"hidden"}.value="modify";

72. if($(".trSelected").length==1){

73. window.location.href="infoAdd.jsp?hidden="+${"hidden"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text();

74. }else if($(".trSelected").length>1){

75. alert("请选择一个修改,不能同时修改多个");

76. }else if($(".trSelected").length==0){

77. alert("请选择一个您要修改的新闻信息")

78. }

79. }

80. }

flexgrid参数介绍:

Javascript代码

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 // 调用自定义的计算函数

注意:
Head标签必须要引入

Jsp代码

1. <link rel="stylesheet" href="css/flexigrid/flexigrid.css"

2. type="text/css"></link>

3. <script type="text/javascript" src="lib/jquery/jquery.js"></script>

4. <script type="text/javascript" src="js/flexigrid.js"></script>

jquery.js、flexigrid.css、flexigrid.js
三个主要文件
自己要根据自己的文件路径.去引入css\js文件
页面完成启动tomcat测试页面会不会显示控件.
应该是没有问题的,只是没有数据

主要的还是后台的操作
这里由于时间关系只介绍select方法了.
可以看到flex无刷新的路径是一个servlet.看看servlet做了些什么?

Java代码

1. response.setContentType("text/html;charset=UTF-8");

2. ReleaseInfoDao rid = new ReleaseInfoDao();

3. String hidden = request.getParameter("hidden");

4. PrintWriter out = response.getWriter();

首先接收路径传过来的hidden值.
因为后面我会根据hidden值做各种操作.所以url重写了一些字段.大家可以不用如此.

Java代码

1. if(hidden.equals("manage")){

2. // 获得当前页数

3. String pageIndex = request.getParameter("page");

4. // 获得每页数据最大量

5. String pageSize = request.getParameter("rp");

6. // 获得模糊查询文本输入框的值

7. String query = new String(request.getParameter("query").getBytes("ISO8859-1"),"UTF-8");

8. // 获得模糊查询条件

9. String qtype = request.getParameter("qtype");

10. if(query==""||("").equals(query)){

11. Map pageInfo = new HashMap();

12. pageInfo.put("page", pageIndex);

13. pageInfo.put("total", rid.getReleaseInfoCount());

14. // 数据JSON格式化

15. String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageSize)), pageInfo);

16. // response相关处理

17. response.setContentType("html/txt");

18. response.setCharacterEncoding("utf-8");

19. response.setHeader("Pragma", "no-cache");

20. response.setHeader("Cache-Control", "no-cache, must-revalidate");

21. response.setHeader("Pragma", "no-cache");

22. try {

23. response.getWriter().write(jsonStr);

24. response.getWriter().flush();

25. response.getWriter().close();

26. } catch (IOException e) {

27. e.printStackTrace();

28. }

29. }else{

30. Map pageInfo = new HashMap();

31. pageInfo.put("page", pageIndex);

32. pageInfo.put("total", rid.getReleaseInfoCountLike(qtype, query));

33. // 数据JSON格式化

34. String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfoLike(Integer.parseInt(pageIndex), Integer.parseInt(pageSize), qtype, query), pageInfo);

35. // response相关处理

36. response.setContentType("html/txt");

37. response.setCharacterEncoding("utf-8");

38. response.setHeader("Pragma", "no-cache");

39. response.setHeader("Cache-Control", "no-cache, must-revalidate");

40. response.setHeader("Pragma", "no-cache");

41. try {

42. response.getWriter().write(jsonStr);

43. response.getWriter().flush();

44. response.getWriter().close();

45. } catch (IOException e) {

46. e.printStackTrace();

47. }

48. }

49. }

可以看到许多request.getParameter("***");
是后去flexigrid控件的一些参数.
大家可以到flexigrid.js文件里面看到这些参数.
page//获取当前的页数.
rp//每页显示多少行数据

Javascript代码

1. rp: 20,

query//点击放大镜出现搜索功能,是Input文本框的值
qtype//是搜索功能后面的select的值
根据query的操作判断是模糊查询还是全部查询数据.
Servlet全部代码看完了.
看看.Dao层的数据层的代码吧.
主要引用Dao的代码如下
主要代码1.

Java代码

1. pageInfo.put("total", rid.getReleaseInfoCount());

2. String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageSize)), pageInfo);

rid为ReleaseInfoDao的实例对象(发布信息表)
首先我们来看getReleaseInfoCount()方法

Java代码

1. /**

2. * 获得信息表所有的数据量,

3. * 并返回数据个数

4. * @return

5. */

6. public long getReleaseInfoCount(){

7. long count =0l;

8. QueryRunner queryRunner = new QueryRunner();

9. String query = "select count(*) as num from TB_ReleaseInfo";

10. try {

11. Map map = (Map)queryRunner.query(DBConnection.getConnection(), query, new MapHandler());

12. count = Long.parseLong(map.get("num").toString());

13. } catch (SQLException e) {

14. e.printStackTrace();

15. } finally {

16. DBConnection.close();

17. }

18. return count;

19. }

主要代码2.

Java代码

1. String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageSize)), pageInfo);

这里看到返回的是json格式的数据
主要Dao层方法为creReleaseInfoJSON();getReleaseInfo(intpageIndex,int pageSize);方法
getReleaseInfo代码如下

Java代码

1. /**

2. * 分页查询

3. * @param pageIndex

4. * @param pageSize

5. * @return

6. */

7. public List getReleaseInfo(int pageIndex,int pageSize){

8. List releaseInfoList = new ArrayList();

9. int beginIndex = (pageIndex-1)*pageSize;

10. int endIndex = pageIndex*pageSize;

11. QueryRunner queryRunner = new QueryRunner();

12. String query = "select * from (" +

13. "select rownum rn,rino,rititle,ritype,icname,rihotpoint,ricontent,ridate,riauthor " +

14. "from (" +

15. "select ri.rino,ri.rititle,ri.ritype,ic.icname,ri.rihotpoint,ri.ricontent,ri.ridate,ri.riauthor" +

16. " from TB_ReleaseInfo ri ,TB_InfoCategroy ic where ri.ritype = ic.icno " +

17. "order by ri.rino desc) where rownum<=?) where rn>?";

18. try {

19. releaseInfoList = (List)queryRunner.query(DBConnection.getConnection(), query,new Object[]{new Integer(endIndex),new Integer(beginIndex)},new MapListHandler());

20. } catch (SQLException e) {

21. e.printStackTrace();

22. } finally {

23. DBConnection.close();

24. }

25. return releaseInfoList;

26. }

上述方法的SQL为Oracle的分页查询.MS SQL、MySql等.其他数据库不适用.
creReleaseInfoJSON代码如下:

Java代码

1. /**

2. * 数据JSON格式化

3. * @param list

4. * @param pageInfo

5. * @return

6. */

7. public String creReleaseInfoJSON(List list,Map pageInfo){

8. String jsonStr = "";

9. List mapList = new ArrayList();

10. for(int i=0;i<list.size();i++){

11. Map cellMap = new HashMap();

12. cellMap.put("id", ((Map)list.get(i)).get("RINo").toString());

13. cellMap.put("cell", new Object[]{

14. ((Map)list.get(i)).get("RINo"),

15. ((Map)list.get(i)).get("RITitle"),

16. ((Map)list.get(i)).get("ICName"),

17. ((Map)list.get(i)).get("RIHotpoint"),

18. ((Map)list.get(i)).get("RIDATE"),

19. ((Map)list.get(i)).get("RIAuthor")

20. });

21. mapList.add(cellMap);

22. }

23. pageInfo.put("rows", mapList);

24. JSONObject object = new JSONObject(pageInfo);

25. jsonStr = object.toString();

26. return jsonStr;

27. }

返回的JSON格式的数据:

Java代码

1. jsonStr{"total":3,"page":"1","rows":[{"id":"8","cell":[8,"啊啊","什么玩意","否","2009-06-24 14:30:11","admin"]},{"id":"7","cell":[7,"来挑心底1","媒体声音","是","2009-06-24 14:29:55","admin"]},{"id":"3","cell":[3,"新茶品","最热新闻","否","2009-06-24 13:55:00","admin"]}]}

JSONObject代码在下面的附件里有.
还有需要解释的地方.
大家可以看到dao
并没有
Connection
PreparedStatement
ResultSet
等对象.
我操作数据使用的是.
commons-dbutils-1.1.jar(下面的附件中也包含有.)

整体的介绍完了.
可以说比较考验个人读代码的能力.个人细心的能力.

上述代码.应该是没有问题的.
因为我测试一点问题没有.
可能是因为您配置或者书写代码的问题..
可能会出现这样那样的困难.
也请不要进行人身攻击.
在做这个的时候.我也碰到许多问题。
耐心些。没有解决不了的问题.

鄙人写代码很烂. 各位大牛们就不要拍砖了. 凑活看就行了.

如果什么问题.
请到本人博客留言.
只要是本人会的
定会尽力解决.

花费半个点的功夫.整理一下.. 各位笑纳了.
遗留问题:点击标题.自动排序的问题.. 如果哪位哥们解决了.. 请在本人博客留言.
十分感谢您的帮助

Ps: 很感谢 ayeah 同学..
在此以前. 一直认为是flexgrid.实际正确的拼写为flexigrid. 十分低级的错误.
呵呵. 还望各位同学见谅.
项目源码:请到这里下载JQuery 插件FlexiGrid 之完全配置与使用-续{附Demo+Data}

Jquery插件FLexiGrid完全配置

相关阅读

相关文章

相关问答

相关文档