`

jquery插件FlexiGrid的使用（已更新）

jQuerySQLjsonAjaxCSS 
阅读更多
已不推荐下载，如要下载去这个连接下载最新的
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操作类，
例外数据库文件我也生成好了，怎么使用我不用说了吧。
我把工程全部放上来，该工程绝对可以跑。

分享到：
| 用SecureCRT来上传和下载数据
评论
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
3 楼 matychen 2010-02-09  
写得很好，刚刚在项目中用了gt-grid，但是发现了不足，在寻找其他的grid，jqgrid和flexigrid都不错，不过flexigrid好像代码精简些
2 楼 gundumw100 2010-01-26  
desz123 写道
怎么没有找数据库的文件。其他的都很好。
收藏了

下另一个吧，这个不推荐下载了
1 楼 desz123 2010-01-25  
怎么没有找数据库的文件。其他的都很好。
收藏了
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery插件flexigrid使用总结--进一步优化

    《jQuery插件flexigrid使用总结与进一步优化》 在Web开发中，数据展示和交互是不可或缺的一部分。jQuery插件flexigrid是一款轻量级、功能强大的表格插件，能够帮助开发者快速构建具有分页、排序、搜索等功能的动态...

    jquery表格插件Flexigrid

    Flexigrid是一款基于jQuery的强大的表格插件，它允许开发者将数据以美观、可操作的表格形式呈现出来，类似于知名的JavaScript框架ExtJS的表格组件。这个插件的主要优点在于其灵活性和可定制性，能够满足各种复杂的...

    JQuery_插件FlexiGrid_之完全配置与使用

    ### JQuery插件FlexiGrid之完全配置与使用 #### 一、引言 FlexiGrid是一款基于jQuery的轻量级表格插件，它为开发者提供了简单易用的方式来展示和操作数据表格。FlexiGrid支持多种功能，如排序、分页、筛选等，非常...

    jQuery表格插件 Flexigrid的例子

    Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。这个例子对...

    jquery插件之flexigrid篇

    总的来说，jQuery插件flexigrid是一个强大的工具，为Web开发人员提供了一种高效的数据展示解决方案。通过深入理解和应用，你可以创建出具有专业水准的数据管理界面，提升用户的操作体验。对于PHP开发者来说，它更是...

    jquery flexigrid 支持前台排序

    Tablesorter是一个轻量级的jQuery插件，它可以对HTML表格进行排序，无需任何服务器端的支持。 接下来，我们需要对Flexigrid的表格元素应用Tablesorter。首先，确保已经正确引入了Tablesorter的相关库，然后在页面...

    jquery+flexigrid使用方法.pdf

    jQuery与Flexigrid的结合使用在Web开发中常用于创建动态、交互性强的数据表格。Flexigrid是一款基于jQuery的插件，它提供了一种轻量级的方式来展示和操作网格数据，具有分页、排序、搜索等功能，特别适用于数据密集...

    jquery flexigrid

    jQuery Flexigrid是一款基于jQuery库的表格插件，专为网页数据展示提供强大的功能。它具有高度可定制性，支持分页、排序、搜索以及自定义列宽，使得网页中的数据管理更加便捷和灵活。 Flexigrid的核心特性在于其...

    jquery插件之flexigrid学习实例-jar包

    在"jquery插件之flexigrid学习实例-jar包"中，我们主要关注的是如何将Flexigrid集成到基于Struts2和JSON的Java应用中。以下是对这个主题的详细讲解： 首先，让我们了解Flexigrid。Flexigrid是一款轻量级的...

    jquery 表格插件 Flexigrid

    总结来说，Flexigrid是jQuery生态中一款功能强大、易于使用的表格插件，对于需要展示和操作表格数据的Web应用来说，是一个值得考虑的选择。通过熟练掌握其配置和API，开发者可以构建出高性能、交互性强的数据展示...

    jquery插件之flexigrid学习实例

    在这个"jquery插件之flexigrid学习实例"中，我们将深入探讨如何在Struts2框架下结合JSON进行数据交互，以实现一个完整的应用。 首先，我们需要了解Flexigrid的基本使用方法。在HTML页面中，我们需要引入jQuery库和...

    基于jQuery的FlexiGrid的插件使用和改造

    6. 插件扩展：利用jQuery插件机制，编写自己的扩展插件，实现更高级的功能，如拖拽列宽、列隐藏、列排序方式切换等。 通过以上介绍，我们可以了解到FlexiGrid的基本使用、功能扩展以及可能的改造方向。在实际开发中...

    jquery flexigrid插件

    Flexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性，如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。 一个中文实例教程： http://www.javaeye.com/topic/414611

    Jquery FlexiGrid JS

    - **Ajax请求**：FlexiGrid使用jQuery的Ajax方法向服务器发送GET或POST请求，请求参数包括当前的排序条件、分页信息等。 - **服务器响应**：服务器接收到请求后，解析参数，执行相应的数据库操作，然后将结果集以...

    jquery表格插件flexigrid-1.1.zip

    Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。

    jquery grid插件 Flexigrid + servlet

    Flexigrid是一款基于jQuery的网格插件，它提供了一种灵活、强大的方式来展示和操作数据，常用于创建数据密集型的Web应用。这个插件以其丰富的功能、自定义选项和用户友好的界面而受到开发者的青睐。在与servlet结合...

    JQuery_插件FlexiGrid_之完全配置与使用.doc

    JQuery FlexiGrid 插件是一款强大的数据网格组件，用于在网页中展示和管理结构化的数据。它提供了丰富的功能，包括排序、分页、搜索、编辑和自定义操作按钮等。下面将详细介绍FlexiGrid的配置和使用方法。 首先，你...

    Spring MVC+JPA+Jquery+Flexigrid修改简单示例

    Flexigrid是一款轻量级的表格插件，用于展示和操作表格数据。 在这个示例中，我们将深入探讨如何将这四个技术整合起来，构建一个功能丰富的Web应用。首先，我们从`springmvc.sql`文件开始，这通常包含了初始化...

Magicbox
Global site tag (gtag.js) - Google Analytics