jquery插件FlexiGrid的使用

2023-01-18 12:48:49

jquery插件FlexiGrid的使用

已不推荐下载，如要下载去这个连接下载最新的 
http://gundumw100.iteye.com/blog/545610 

更新于2009-11-30 
先看一下FlexiGrid的参数

  1. height: 200, //flexigrid插件的高度，单位为px
  2. width: 'auto', //宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题
  3. striped: true, //是否显示斑纹效果，默认是奇偶交互的形式
  4. novstripe: false,//没用过这个属性
  5. minwidth: 30, //列的最小宽度
  6. minheight: 80, //列的最小高度
  7. resizable: false, //resizable table是否可伸缩
  8. url: false, //ajax url,ajax方式对应的url地址
  9. method: 'POST', // data sending method,数据发送方式
  10. dataType: 'json', // type of data loaded,数据加载的类型，xml,json
  11. errormsg: '发生错误', //错误提升信息
  12. usepager: false, //是否分页
  13. nowrap: true, //是否不换行
  14. page: 1, //current page,默认当前页
  15. total: 1, //total pages,总页面数
  16. useRp: true, //use the results per page select box,是否可以动态设置每页显示的结果数
  17. rp: 25, // results per page,每页默认的结果数
  18. rpOptions: [10, 15, 20, 25, 40, 100], //可选择设定的每页结果数
  19. title: false, //是否包含标题
  20. pagestat: '显示记录从{from}到{to}，总数 {total} 条', //显示当前页和总页面的样式
  21. procmsg: '正在处理数据，请稍候 ...', //正在处理的提示信息
  22. query: '', //搜索查询的条件
  23. qtype: '', //搜索查询的类别
  24. qop: "Eq", //搜索的操作符
  25. nomsg: '没有符合条件的记录存在', //无结果的提示信息
  26. minColToggle: 1, //允许显示的最小列数
  27. showToggleBtn: true, //是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错。
  28. hideOnSubmit: true, //是否在回调时显示遮盖
  29. showTableToggleBtn: false, //是否显示【显示隐藏Grid】的按钮
  30. autoload: true, //自动加载，即第一次发起ajax请求
  31. blockOpacity: 0.5, //透明度设置
  32. onToggleCol: false, //当在行之间转换时，可在此方法中重写默认实现，基本无用
  33. onChangeSort: false, //当改变排序时，可在此方法中重写默认实现，自行实现客户端排序
  34. onSuccess: false, //成功后执行
  35. onSubmit: false, // 调用自定义的计算函数，基本没用

先下载FlexiGrid api 
[url]http://www.flexigrid.info/ [/url] 
怎么导入就不说了，只要注意路径就没问题 
新建index.jsp文件：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>FlexiGrid</title>
  8. <link rel="stylesheet" href="css/flexigrid/flexigrid.css" type="text/css"></link>
  9. <script type="text/javascript" src="lib/jquery/jquery.js"></script>
  10. <script type="text/javascript" src="flexigrid.pack.js"></script>
  11. <script type="text/javascript">
  12. $(document).ready(function(){
  13. var maiheight = document.documentElement.clientHeight;
  14. var w = $("#ptable").width() - 3;
  15. var gapTop =  30;
  16. var otherpm = 150; //GridHead，toolbar，footer,gridmargin
  17. var h = maiheight - gapTop - otherpm;
  18. var grid=$("#flex1").flexigrid({
  19. width: w,
  20. height: h,
  21. url: 'flexGridServlet.do',
  22. dataType: 'json',
  23. colModel : [
  24. //{display: '<input type="checkbox" id="checkAll"/>', name : 'check', width : 50, sortable : false, align: 'center',hide: false},
  25. {display: '编号', name : 'id', width : 50, sortable : true, align: 'center',hide: false},
  26. {display: '工作名称', name : 'job_name', width : 250, sortable : false, align: 'center'},
  27. {display: '工作地址', name : 'work_address', width : 100, sortable : true, align: 'center'},
  28. {display: '工资', name : 'salary', width : 60, sortable : true, align: 'right',process:formatMoney},
  29. {display: '日期', name : 'date', width : 120, sortable : true, align: 'center'},
  30. {display: '语言', name : 'language', width : 80, sortable : true, align: 'center'}
  31. ],
  32. buttons : [
  33. {name: '添加', bclass: 'add', onpress : toolbar},
  34. {name: '删除', bclass: 'delete', onpress : toolbar},
  35. {name: '修改', bclass: 'modify', onpress : toolbar},
  36. {separator: true}
  37. ],
  38. searchitems : [
  39. {display: '编号', name : 'id', isdefault: true},
  40. {display: '工作名称', name : 'job_name'},
  41. {display: '工作地址', name : 'work_address'},
  42. {display: '语言', name : 'language'}
  43. ],
  44. errormsg: '发生异常',
  45. sortname: "id",
  46. sortorder: "desc",
  47. usepager: true,
  48. title: '信息发布管理',
  49. pagestat: '显示记录从{from}到{to}，总数 {total} 条',
  50. useRp: true,
  51. rp: 10,
  52. rpOptions: [10, 15, 20, 30, 40, 100], //可选择设定的每页结果数
  53. nomsg: '没有符合条件的记录存在',
  54. minColToggle: 1, //允许显示的最小列数
  55. showTableToggleBtn: true,
  56. autoload: true, //自动加载，即第一次发起ajax请求
  57. resizable: false, //table是否可伸缩
  58. procmsg: '加载中, 请稍等 ...',
  59. hideOnSubmit: true, //是否在回调时显示遮盖
  60. blockOpacity: 0.5,//透明度设置
  61. rowbinddata: true,
  62. showcheckbox: true
  63. //gridClass: "bbit-grid"//样式
  64. });
  65. //$('.trSelected',grid).parent().removeClass("trSelected");
  66. function toolbar(com,grid){
  67. if (com=='删除'){
  68. ${"action"}.value="delete";
  69. if($('.trSelected',grid).length==0){
  70. alert("请选择要删除的数据");
  71. }else{
  72. if(confirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?')){
  73. var  ids ="";
  74. for(var i=0;i<$('.trSelected',grid).length;i++){
  75. ids+=","+$('.trSelected',grid).find("td:first").eq(i).text();//获取id
  76. }
  77. idsids=ids.substring(1);
  78. $.ajax({
  79. type: "POST",
  80. url: "flexGridServlet.do?actionaction="+${"action"}.value,
  81. data: "id="+ids,
  82. dataType:"text",
  83. success: function(msg){
  84. if(msg=="success"){
  85. $("#flex1").flexReload();
  86. }else{
  87. alert("有错误发生,msg="+msg);
  88. }
  89. },
  90. error: function(msg){
  91. alert(msg);
  92. }
  93. });
  94. }
  95. }
  96. }else if (com=='添加'){
  97. ${"action"}.value="add";
  98. alert("flexGridServlet.do?actionaction="+${"action"}.value);
  99. window.location.href="flexGridServlet.do?action="+${"action"}.value;
  100. }else if (com=='修改'){
  101. ${"action"}.value="modify";
  102. if($(".trSelected").length==1){
  103. alert("flexGridServlet.do?action="+${"action"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text());
  104. window.location.href="flexGridServlet.do?action="+${"action"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text();
  105. }else if($(".trSelected").length>1){
  106. alert("请选择一个修改,不能同时修改多个");
  107. }else if($(".trSelected").length==0){
  108. alert("请选择一个您要修改的记录")
  109. }
  110. //$("#flex1").flexReload({});
  111. }
  112. }
  113. function formatMoney(value, pid) {
  114. return "￥" + parseFloat(value).toFixed(2);
  115. }
  116. });
  117. </script>
  118. <style>
  119. .flexigrid div.fbutton .add
  120. {
  121. background: url(css/images/add.png) no-repeat center left;
  122. }
  123. .flexigrid div.fbutton .delete
  124. {
  125. background: url(css/images/close.png) no-repeat center left;
  126. }
  127. .flexigrid div.fbutton .modify
  128. {
  129. background: url(css/images/modify.png) no-repeat center left;
  130. }
  131. </style>
  132. </head>
  133. <body>
  134. <div id="ptable" style="margin:10px">
  135. <table id="flex1" style="display:none"></table>
  136. </div>
  137. <input id="action" type="hidden" name="action" value="null" />
  138. <script>
  139. </script>
  140. </body>
  141. </html>

servlet代码：

  1. import java.io.IOException;
  2. import java.io.PrintWriter;
  3. import java.sql.SQLException;
  4. import java.util.*;
  5. import javax.servlet.ServletException;
  6. import javax.servlet.http.HttpServlet;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9. public class FlexiGridServlet extends HttpServlet {
  10. private DBConnection db;
  11. public void init() throws ServletException {
  12. System.out.println("--------------开始链接---------------------");
  13. db = new DBConnection();// 打开链接
  14. try {
  15. db.getCurrentConnection();
  16. } catch (SQLException e1) {
  17. }
  18. System.out.println("--------------打开链接成功---------------------");
  19. }
  20. public void doGet(HttpServletRequest request, HttpServletResponse response)
  21. throws ServletException, IOException {
  22. // response相关处理
  23. response.setContentType("html/txt");
  24. response.setCharacterEncoding("utf-8");
  25. response.setHeader("Pragma", "no-cache");
  26. response.setHeader("Cache-Control", "no-cache, must-revalidate");
  27. response.setHeader("Pragma", "no-cache");
  28. String action = request.getParameter("action");
  29. System.out.println("action=" + action);
  30. String tableName = "job_info1";
  31. if ("add".equals(action)) {
  32. System.out.println("--------------------add--------------------");
  33. return;
  34. } else if ("delete".equals(action)) {
  35. System.out.println("--------------------delete------------------");
  36. String ids=request.getParameter("id");
  37. System.out.println("ids="+ids);
  38. //          String[] id=ids.split(",");
  39. String sql = "delete from "+tableName+" where id in ("+ids+")";
  40. System.out.println("sql="+sql);
  41. try {
  42. db.executeUpdate(sql, null);
  43. } catch (Exception e) {
  44. // TODO Auto-generated catch block
  45. e.printStackTrace();
  46. }
  47. System.out.println("delete success!!!");
  48. response.getWriter().write("success");
  49. response.getWriter().flush();
  50. response.getWriter().close();
  51. return;
  52. } else if ("modify".equals(action)) {
  53. System.out.println("--------------------modify-------------------");
  54. return;
  55. } else {
  56. }
  57. System.out.println("--------------------下来了-------------------");
  58. // 获得当前页数
  59. String pageIndex = request.getParameter("page");
  60. System.out.println("pageIndex=" + pageIndex);
  61. // 获得每页数据最大量
  62. String pageSize = request.getParameter("rp");
  63. System.out.println("pageSize=" + pageSize);
  64. // 获得模糊查询文本输入框的值
  65. String query = new String(request.getParameter("query").getBytes("ISO8859-1"), "UTF-8");
  66. System.out.println("query=" + query);
  67. // 获得模糊查询条件
  68. String qtype = request.getParameter("qtype");
  69. System.out.println("qtype=" + qtype);
  70. // 排序的字段
  71. String sortname = request.getParameter("sortname");
  72. System.out.println("sortname=" + sortname);
  73. // desc or asc
  74. String sortorder = request.getParameter("sortorder");
  75. System.out.println("sortorder=" + sortorder);
  76. int count = 0;
  77. String sql = "";
  78. List list = null;
  79. try {
  80. sql = "select count(*) from " + tableName;
  81. if (!query.equals("")) {
  82. sql += " where " + qtype + "='" + query + "'";
  83. }
  84. System.out.println("sql=" + sql);
  85. count = db.executeQuery(sql);
  86. System.out.println("count=" + count);
  87. sql = "select * from " + tableName;
  88. if (!query.equals("")) {
  89. sql += " where " + qtype + "='" + query + "'";
  90. }
  91. sql += " order by " + sortname + " " + sortorder;
  92. sql += " limit "
  93. + ((Integer.parseInt(pageIndex) - 1) * Integer
  94. .parseInt(pageSize)) + "," + pageSize;
  95. System.out.println("sql=" + sql);
  96. list = db.executeQueryList(sql);
  97. System.out.println("list.size=" + list.size());
  98. if (list == null) {
  99. System.out.println("======出错啦======");
  100. return;
  101. }
  102. } catch (Exception e) {
  103. // TODO Auto-generated catch block
  104. e.printStackTrace();
  105. }
  106. Map map = new HashMap();
  107. map.put("page", pageIndex);
  108. map.put("total", count + "");
  109. // 数据JSON格式化
  110. String json = toJSON(list, map);
  111. response.getWriter().write(json);
  112. response.getWriter().flush();
  113. response.getWriter().close();
  114. }
  115. public void doPost(HttpServletRequest request, HttpServletResponse response)
  116. throws ServletException, IOException {
  117. doGet(request, response);
  118. }
  119. public void destroy() {
  120. System.out.println("--------------关闭链接---------------------");
  121. db.closeCurrentConnection();
  122. }
  123. /**
  124. * 数据JSON格式化
  125. *
  126. * @param list
  127. * @param pageInfo
  128. * @return
  129. */
  130. private String toJSON(List list, Map map) {
  131. List mapList = new ArrayList();
  132. for (int i = 0; i < list.size(); i++) {
  133. Map cellMap = new HashMap();
  134. cellMap.put("id", ((Map) list.get(i)).get("id").toString());
  135. cellMap.put("cell", new Object[] {
  136. //"<input type='checkbox'/>",
  137. ((Map) list.get(i)).get("id"),
  138. ((Map) list.get(i)).get("job_name"),
  139. ((Map) list.get(i)).get("work_address"),
  140. ((Map) list.get(i)).get("salary"),
  141. ((Map) list.get(i)).get("date"),
  142. ((Map) list.get(i)).get("language") });
  143. mapList.add(cellMap);
  144. }
  145. map.put("rows", mapList);
  146. JSONObject object = new JSONObject(map);
  147. return object.toString();
  148. }
  149. }

web.xml配置：

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app version="2.4"
  3. xmlns="http://java.sun.com/xml/ns/j2ee"
  4. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  5. xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
  6. http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  7. <servlet>
  8. <servlet-name>flexGridServlet</servlet-name>
  9. <servlet-class>FlexiGridServlet</servlet-class>
  10. </servlet>
  11. <servlet-mapping>
  12. <servlet-name>flexGridServlet</servlet-name>
  13. <url-pattern>/flexGridServlet.do</url-pattern>
  14. </servlet-mapping>
  15. <welcome-file-list>
  16. <welcome-file>index.jsp</welcome-file>
  17. </welcome-file-list>
  18. </web-app>

主要步骤就上面那些，其他还有个数据库操作类&JSON操作类， 
例外数据库文件我也生成好了，怎么使用我不用说了吧。 
我把工程全部放上来，该工程绝对可以跑。

上一篇：装SQL server 2008问题解决


下一篇：安装程序集'' policy.8.0.microsoft.vc80.atl,type=''win32-