- 浏览: 5778723 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (890)
- WindowsPhone (0)
- android (88)
- android快速迭代 (17)
- android基础 (34)
- android进阶 (172)
- android高级 (0)
- android拾遗 (85)
- android动画&效果 (68)
- Material Design (13)
- LUA (5)
- j2me (32)
- jQuery (39)
- spring (26)
- hibernate (20)
- struts (26)
- tomcat (9)
- javascript+css+html (62)
- jsp+servlet+javabean (14)
- java (37)
- velocity+FCKeditor (13)
- linux+批处理 (9)
- mysql (19)
- MyEclipse (9)
- ajax (7)
- wap (8)
- j2ee+apache (24)
- 其他 (13)
- phonegap (35)
最新评论
-
Memories_NC:
本地lua脚本终于执行成功了,虽然不是通过redis
java中调用lua脚本语言1 -
ZHOU452840622:
大神://处理返回的接收状态 这个好像没有监听到 遇 ...
android 发送短信的两种方式 -
PXY:
拦截部分地址,怎么写的for(int i=0;i<lis ...
判断是否登录的拦截器SessionFilter -
maotou1988:
Android控件之带清空按钮(功能)的AutoComplet ...
自定义AutoCompleteTextView -
yangmaolinpl:
希望有表例子更好。。。,不过也看明白了。
浅谈onInterceptTouchEvent、onTouchEvent与onTouch
已不推荐下载,如要下载去这个连接下载最新的
http://gundumw100.iteye.com/blog/545610
更新于2009-11-30
先看一下FlexiGrid的参数
先下载FlexiGrid api
[url]http://www.flexigrid.info/ [/url]
怎么导入就不说了,只要注意路径就没问题
新建index.jsp文件:
servlet代码:
web.xml配置:
主要步骤就上面那些,其他还有个数据库操作类&JSON操作类,
例外数据库文件我也生成好了,怎么使用我不用说了吧。
我把工程全部放上来,该工程绝对可以跑。
下另一个吧,这个不推荐下载了
http://gundumw100.iteye.com/blog/545610
更新于2009-11-30
先看一下FlexiGrid的参数
height: 200, //flexigrid插件的高度,单位为px width: 'auto', //宽度值,auto表示根据每列的宽度自动计算,在IE6下建议设置具体值否则会有问题 striped: true, //是否显示斑纹效果,默认是奇偶交互的形式 novstripe: false,//没用过这个属性 minwidth: 30, //列的最小宽度 minheight: 80, //列的最小高度 resizable: false, //resizable table是否可伸缩 url: false, //ajax url,ajax方式对应的url地址 method: 'POST', // data sending method,数据发送方式 dataType: 'json', // type of data loaded,数据加载的类型,xml,json errormsg: '发生错误', //错误提升信息 usepager: false, //是否分页 nowrap: true, //是否不换行 page: 1, //current page,默认当前页 total: 1, //total pages,总页面数 useRp: true, //use the results per page select box,是否可以动态设置每页显示的结果数 rp: 25, // results per page,每页默认的结果数 rpOptions: [10, 15, 20, 25, 40, 100], //可选择设定的每页结果数 title: false, //是否包含标题 pagestat: '显示记录从{from}到{to},总数 {total} 条', //显示当前页和总页面的样式 procmsg: '正在处理数据,请稍候 ...', //正在处理的提示信息 query: '', //搜索查询的条件 qtype: '', //搜索查询的类别 qop: "Eq", //搜索的操作符 nomsg: '没有符合条件的记录存在', //无结果的提示信息 minColToggle: 1, //允许显示的最小列数 showToggleBtn: true, //是否允许显示隐藏列,该属性有bug设置成false点击头脚本报错。 hideOnSubmit: true, //是否在回调时显示遮盖 showTableToggleBtn: false, //是否显示【显示隐藏Grid】的按钮 autoload: true, //自动加载,即第一次发起ajax请求 blockOpacity: 0.5, //透明度设置 onToggleCol: false, //当在行之间转换时,可在此方法中重写默认实现,基本无用 onChangeSort: false, //当改变排序时,可在此方法中重写默认实现,自行实现客户端排序 onSuccess: false, //成功后执行 onSubmit: false, // 调用自定义的计算函数,基本没用
先下载FlexiGrid api
[url]http://www.flexigrid.info/ [/url]
怎么导入就不说了,只要注意路径就没问题
新建index.jsp文件:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>FlexiGrid</title> <link rel="stylesheet" href="css/flexigrid/flexigrid.css" type="text/css"></link> <script type="text/javascript" src="lib/jquery/jquery.js"></script> <script type="text/javascript" src="flexigrid.pack.js"></script> <script type="text/javascript"> $(document).ready(function(){ var maiheight = document.documentElement.clientHeight; var w = $("#ptable").width() - 3; var gapTop = 30; var otherpm = 150; //GridHead,toolbar,footer,gridmargin var h = maiheight - gapTop - otherpm; var grid=$("#flex1").flexigrid({ width: w, height: h, url: 'flexGridServlet.do', dataType: 'json', colModel : [ //{display: '<input type="checkbox" id="checkAll"/>', name : 'check', width : 50, sortable : false, align: 'center',hide: false}, {display: '编号', name : 'id', width : 50, sortable : true, align: 'center',hide: false}, {display: '工作名称', name : 'job_name', width : 250, sortable : false, align: 'center'}, {display: '工作地址', name : 'work_address', width : 100, sortable : true, align: 'center'}, {display: '工资', name : 'salary', width : 60, sortable : true, align: 'right',process:formatMoney}, {display: '日期', name : 'date', width : 120, sortable : true, align: 'center'}, {display: '语言', name : 'language', width : 80, sortable : true, align: 'center'} ], buttons : [ {name: '添加', bclass: 'add', onpress : toolbar}, {name: '删除', bclass: 'delete', onpress : toolbar}, {name: '修改', bclass: 'modify', onpress : toolbar}, {separator: true} ], searchitems : [ {display: '编号', name : 'id', isdefault: true}, {display: '工作名称', name : 'job_name'}, {display: '工作地址', name : 'work_address'}, {display: '语言', name : 'language'} ], errormsg: '发生异常', sortname: "id", sortorder: "desc", usepager: true, title: '信息发布管理', pagestat: '显示记录从{from}到{to},总数 {total} 条', useRp: true, rp: 10, rpOptions: [10, 15, 20, 30, 40, 100], //可选择设定的每页结果数 nomsg: '没有符合条件的记录存在', minColToggle: 1, //允许显示的最小列数 showTableToggleBtn: true, autoload: true, //自动加载,即第一次发起ajax请求 resizable: false, //table是否可伸缩 procmsg: '加载中, 请稍等 ...', hideOnSubmit: true, //是否在回调时显示遮盖 blockOpacity: 0.5,//透明度设置 rowbinddata: true, showcheckbox: true //gridClass: "bbit-grid"//样式 }); //$('.trSelected',grid).parent().removeClass("trSelected"); function toolbar(com,grid){ if (com=='删除'){ ${"action"}.value="delete"; if($('.trSelected',grid).length==0){ alert("请选择要删除的数据"); }else{ if(confirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?')){ var ids =""; for(var i=0;i<$('.trSelected',grid).length;i++){ ids+=","+$('.trSelected',grid).find("td:first").eq(i).text();//获取id } ids=ids.substring(1); $.ajax({ type: "POST", url: "flexGridServlet.do?action="+${"action"}.value, data: "id="+ids, dataType:"text", success: function(msg){ if(msg=="success"){ $("#flex1").flexReload(); }else{ alert("有错误发生,msg="+msg); } }, error: function(msg){ alert(msg); } }); } } }else if (com=='添加'){ ${"action"}.value="add"; alert("flexGridServlet.do?action="+${"action"}.value); window.location.href="flexGridServlet.do?action="+${"action"}.value; }else if (com=='修改'){ ${"action"}.value="modify"; if($(".trSelected").length==1){ alert("flexGridServlet.do?action="+${"action"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text()); window.location.href="flexGridServlet.do?action="+${"action"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text(); }else if($(".trSelected").length>1){ alert("请选择一个修改,不能同时修改多个"); }else if($(".trSelected").length==0){ alert("请选择一个您要修改的记录") } //$("#flex1").flexReload({}); } } function formatMoney(value, pid) { return "¥" + parseFloat(value).toFixed(2); } }); </script> <style> .flexigrid div.fbutton .add { background: url(css/images/add.png) no-repeat center left; } .flexigrid div.fbutton .delete { background: url(css/images/close.png) no-repeat center left; } .flexigrid div.fbutton .modify { background: url(css/images/modify.png) no-repeat center left; } </style> </head> <body> <div id="ptable" style="margin:10px"> <table id="flex1" style="display:none"></table> </div> <input id="action" type="hidden" name="action" value="null" /> <script> </script> </body> </html>
servlet代码:
import java.io.IOException; import java.io.PrintWriter; import java.sql.SQLException; import java.util.*; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class FlexiGridServlet extends HttpServlet { private DBConnection db; public void init() throws ServletException { System.out.println("--------------开始链接---------------------"); db = new DBConnection();// 打开链接 try { db.getCurrentConnection(); } catch (SQLException e1) { } System.out.println("--------------打开链接成功---------------------"); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // response相关处理 response.setContentType("html/txt"); response.setCharacterEncoding("utf-8"); response.setHeader("Pragma", "no-cache"); response.setHeader("Cache-Control", "no-cache, must-revalidate"); response.setHeader("Pragma", "no-cache"); String action = request.getParameter("action"); System.out.println("action=" + action); String tableName = "job_info1"; if ("add".equals(action)) { System.out.println("--------------------add--------------------"); return; } else if ("delete".equals(action)) { System.out.println("--------------------delete------------------"); String ids=request.getParameter("id"); System.out.println("ids="+ids); // String[] id=ids.split(","); String sql = "delete from "+tableName+" where id in ("+ids+")"; System.out.println("sql="+sql); try { db.executeUpdate(sql, null); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } System.out.println("delete success!!!"); response.getWriter().write("success"); response.getWriter().flush(); response.getWriter().close(); return; } else if ("modify".equals(action)) { System.out.println("--------------------modify-------------------"); return; } else { } System.out.println("--------------------下来了-------------------"); // 获得当前页数 String pageIndex = request.getParameter("page"); System.out.println("pageIndex=" + pageIndex); // 获得每页数据最大量 String pageSize = request.getParameter("rp"); System.out.println("pageSize=" + pageSize); // 获得模糊查询文本输入框的值 String query = new String(request.getParameter("query").getBytes("ISO8859-1"), "UTF-8"); System.out.println("query=" + query); // 获得模糊查询条件 String qtype = request.getParameter("qtype"); System.out.println("qtype=" + qtype); // 排序的字段 String sortname = request.getParameter("sortname"); System.out.println("sortname=" + sortname); // desc or asc String sortorder = request.getParameter("sortorder"); System.out.println("sortorder=" + sortorder); int count = 0; String sql = ""; List list = null; try { sql = "select count(*) from " + tableName; if (!query.equals("")) { sql += " where " + qtype + "='" + query + "'"; } System.out.println("sql=" + sql); count = db.executeQuery(sql); System.out.println("count=" + count); sql = "select * from " + tableName; if (!query.equals("")) { sql += " where " + qtype + "='" + query + "'"; } sql += " order by " + sortname + " " + sortorder; sql += " limit " + ((Integer.parseInt(pageIndex) - 1) * Integer .parseInt(pageSize)) + "," + pageSize; System.out.println("sql=" + sql); list = db.executeQueryList(sql); System.out.println("list.size=" + list.size()); if (list == null) { System.out.println("======出错啦======"); return; } } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } Map map = new HashMap(); map.put("page", pageIndex); map.put("total", count + ""); // 数据JSON格式化 String json = toJSON(list, map); response.getWriter().write(json); response.getWriter().flush(); response.getWriter().close(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } public void destroy() { System.out.println("--------------关闭链接---------------------"); db.closeCurrentConnection(); } /** * 数据JSON格式化 * * @param list * @param pageInfo * @return */ private String toJSON(List list, Map map) { List mapList = new ArrayList(); for (int i = 0; i < list.size(); i++) { Map cellMap = new HashMap(); cellMap.put("id", ((Map) list.get(i)).get("id").toString()); cellMap.put("cell", new Object[] { //"<input type='checkbox'/>", ((Map) list.get(i)).get("id"), ((Map) list.get(i)).get("job_name"), ((Map) list.get(i)).get("work_address"), ((Map) list.get(i)).get("salary"), ((Map) list.get(i)).get("date"), ((Map) list.get(i)).get("language") }); mapList.add(cellMap); } map.put("rows", mapList); JSONObject object = new JSONObject(map); return object.toString(); } }
web.xml配置:
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>flexGridServlet</servlet-name> <servlet-class>FlexiGridServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>flexGridServlet</servlet-name> <url-pattern>/flexGridServlet.do</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
主要步骤就上面那些,其他还有个数据库操作类&JSON操作类,
例外数据库文件我也生成好了,怎么使用我不用说了吧。
我把工程全部放上来,该工程绝对可以跑。
- flexiGrid.zip (116.6 KB)
- 下载次数: 1280
评论
7 楼
xander
2013-06-07
怎么无法添加和修改呢?
6 楼
xander
2013-06-07
下载的文件中没有数据库文件?
5 楼
flatfish1988
2013-03-11
这个怎么才能下载下来呢,每次点那个推荐下载的链接都提醒我不能下载,这是为什么
4 楼
hejh
2010-05-11
用你大虾的例子很好,能不能再帮解答一下这个问题?
想在Flexigrid增加一个弹出对话框进行更详细的检索如何做到?http://www.iteye.com/problems/42038
想在Flexigrid增加一个弹出对话框进行更详细的检索如何做到?http://www.iteye.com/problems/42038
3 楼
matychen
2010-02-09
写得很好,刚刚在项目中用了gt-grid,但是发现了不足,在寻找其他的grid,jqgrid和flexigrid都不错,不过flexigrid好像代码精简些
2 楼
gundumw100
2010-01-26
desz123 写道
怎么没有找数据库的文件。其他的都很好。
收藏了
收藏了
下另一个吧,这个不推荐下载了
1 楼
desz123
2010-01-25
怎么没有找数据库的文件。其他的都很好。
收藏了
收藏了
发表评论
-
jquery动态实现填充下拉框
2010-01-15 20:37 4682项目需要实现一个功能 当点下拉框时动态加载后台数据。 这是后台 ... -
使用jQuery动态绑定事件插件livequery弥补live的不足
2009-12-25 15:05 8831jquery1.3.2的动态绑定事件方法live不支持blur ... -
JQuery插件: moreSelectors为jQuery提供更多的选择器
2009-12-15 15:46 2015为jQuery提供更多的选择器 http://www.soft ... -
JQuery解析Json
2009-12-11 10:15 2429var arr1 = [ "one", ... -
jquery最大化窗口
2009-12-11 10:13 5801<script type="text/ja ... -
JQuery解析xml
2009-12-11 10:04 3211java类中 response.setContent ... -
Jquery ajax跨域访问的问题
2009-12-11 10:02 2508$(document).ready(function(){ ... -
jQuery插件flexiGrid的完全使用,附代码下载
2009-12-10 15:52 35942在这个例子中其实不光使用了flexiGrid,还有 <s ... -
jQuery图片放大镜插件jqzoom
2009-12-09 16:33 3989<html> <head> & ... -
jquery操作select的联动插件FillOptions&CascadingSelect
2009-12-08 12:17 13476详细介绍看这里 http://blog.csdn.net/le ... -
jquery操作select
2009-12-07 16:23 8787//得到select项的个数 jQuery.fn.s ... -
javascript调试工具:Blackbird
2009-12-07 11:38 4188You might never use alert() aga ... -
基于jQuery的FlexiGrid的插件使用和改造
2009-11-30 15:13 16098已不推荐下载,如要下载去这个连接下载最新的 http://gu ... -
最简单的FlexiGrid使用(静态的)
2009-11-27 14:41 3103<link rel="styleshe ... -
jQuery之下拉菜单
2009-09-30 13:49 1976<!DOCTYPE html PUBLIC &quo ... -
jquery Tooltips插件cluetip
2009-09-27 13:46 4718demo: http://plugins.learningjq ... -
jQuery插件linkButton
2009-09-23 10:34 11590linkButton是一个可以把<a href=&quo ... -
jQuery插件Font effect实现Javascript文字特效
2009-09-17 20:54 5765http://www.biuuu.com/p837.html ... -
jQuery插件animateToClass实现javascript自定义动画效果
2009-09-17 20:52 8222或许使用这个JavaScript库也可以达到自定义动画的功能: ... -
简单几招学会如何制作jQuery插件
2009-09-17 20:42 4299在使用jQuery[write less,do more]开发 ...
相关推荐
JQuery_插件FlexiGrid_之完全配置与使用
jquery表格插件Flexigrid 将数据按照表格排列,类似与ext。
jquery 表格插件 Flexigrid
NULL 博文链接:https://zhy6599.iteye.com/blog/1098301
jquery flexigrid与jquery tablesort 配合实现flexigrid的客户端排序功能。jsp项目,无需数据库即可运行
JQuery_插件FlexiGrid_之完全配置与使用.doc
Flexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性,如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。 一个中文实例教程: http://www.javaeye.com/topic/414611
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。这个例子对...
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
Jquery FlexiGrid JS 前后台数据的传值、对象 前台使用FlexiGrid 插件显示数据条数 注意:action层变量名对应
很好用的一个插件,这个版本是php的,。net的没有调试好,以后会上传(成功后) 更多精彩,请访问建站易教程网:www.diyiyusuan.com
此项目是struts2+json+flexigrid的完整实例,可帮助你对flexigrid快速上手,项目下载后直接导入自己的工程即可,所用jar包会另传,因为超出上传限制,还请理解。
这是介绍JQuery表格插件FlexiGrid在Java中的使用,使用Servlet进行开发,json传递数据
是struts2+json+flexigrid的完整实例所用到的jar包,请大家下载时看清楚。
博文链接:https://ynial.iteye.com/blog/235621
NULL 博文链接:https://gundumw100.iteye.com/blog/537355
Jquery flexigrid插件 添加了checkbox,将它设置为true就OK了 (双击事件)onRowDblclick。。。 附带属性说明 共享下。。。。。
Flexigrid-表格,所属jquery