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操作类， 
例外数据库文件我也生成好了，怎么使用我不用说了吧。 
我把工程全部放上来，该工程绝对可以跑。

jquery插件FlexiGrid的使用的更多相关文章

  1. JQuery 插件FlexiGrid 之完全配置与使用

    博客分类: Java综合 jQuery配置管理jsonServlet数据结构  自己再做这个的时候.也是找了很多资料..但网上搜索了很多资料. 没有介绍的很全的. 鄙人就在此献丑一下. 来全面的介绍一 ...

  2. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  3. JQuery插件定义

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  4. BootStrap_04之jQuery插件（导航、轮播）、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...

  5. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

  6. 2016年6月份那些最实用的 jQuery 插件专辑

    jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...

  7. 教你开发jQuery插件（转）

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  8. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  9. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

随机推荐

  1. ThreadPoolExecutor的一点理解

    整个ThreadPoolExecutor的任务处理有4步操作: 第一步,初始的poolSize < corePoolSize,提交的runnable任务,会直接做为new一个Thread的参数, ...

  2. Java中finally你知多少

    首先来问大家一个问题:finally 语句块一定会执行吗? 很多人都认为 finally 语句块是肯定要执行的,其中也包括一些很有经验的 Java 程序员.可惜并不像大多人所认为的那样,对于这个问题, ...

  3. linux命令之删除

      linux删除文件夹非常easy,非常多人还是习惯用rmdir,只是一旦文件夹非空,就陷入深深的苦恼之中,如今使用rm -rf命令就可以. 直接rm就能够了,只是要加两个參数-rf 即:rm -r ...

  4. P/Invoke与逆向P/Invoke

    1.在在 C# 中通过 P/Invoke 调用Win32 DLL这篇文中,详细介绍了P/Invoke的基本知识以及使用. 2.InAttribute和OutAttribute特性与C#中ref和out ...

  5. 接口设计ie常见的问题

    问题叙述性说明: 当围绕一个简单的页面布局设计.我发现了一个奇怪的相对布局问题. 同的方式围绕布局接口.它是利用左div浮动.对div设定 margin-left这样达到的效果.实现了chrome浏览 ...

  6. WPF学习（1）WPF概述

    WPF(Windows Presentation Foundation)是微软推出的基于Windows Vista的用户界面框架,属于NET Framework 3.0的一部分.它提供了统一的编程模型 ...

  7. 它的斗争“和loser对话”短篇故事

    今天,一个朋友发来的图片故事,尽管听说过,但见一.仍感慨颇多. 有时总是说easy,其实做起来的另一个故事. 想实现梦想,看来还是要脚踏实地,一步一步.不断努力,不断前行啊! 版权声明:本文博客原创文 ...

  8. 一个简单的Java死锁示例（转）

    在实际编程中,要尽量避免出现死锁的情况,但是让你故意写一个死锁的程序时似乎也不太简单(有公司会出这样的面试题),以下是一个简单的死锁例子,程序说明都写着类的注释里了,有点罗嗦,但是应该也还是表述清楚了 ...

  9. 有趣 IOS 开展 - block 使用具体解释

    Block 它是iOS于4.0新的程序语法之后,于iOS SDK 4.0之后,block应用几乎无处不在. 在其他语言中也有类似的概念,称为闭包(closure),实例object C兄弟swift ...

  10. Unable to load Virtual engine

    相关:GenyMotion自带VirtualBox 解决办法:首先确认genymotion及virtualBox正确安装,然后右键点击启动程序选属性,在兼容性里选以兼容模式运行,同时勾选以管理员身份运 ...