`

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

jQuerySQLjson正则表达式Ajax 
阅读更多
已不推荐下载，如要下载去这个连接下载最新的
http://gundumw100.iteye.com/admin/blogs/545610

http://www.cnblogs.com/xuanye/archive/2009/11/04/Xuanye_jQuery_FlexiGrid.html

http://www.cnblogs.com/xuanye/archive/2009/11/08/Xuanye_jQuery_FlexiGrid_Demo.html

上面的2个链接是我参考的例子

虽然Flexigrid已然算是优秀，但是问题还是有？比如：

1：不支持在列首添加checkbox列

2：如何给行附加事件（如右键快显菜单或双击）或者在最后列添加操作列(在列的定义中，有个process的函数可使用，返回html，可参考示例中的formatMoney)？同时获取该列的数据?

3: 如何能够兼容 jQuery 1.3+?(默认不兼容)

4：如何改善性能问题（IE的脚本执行能力实在是可怜，特别在IE6下，当行列多时，总是有2-3秒的停滞）

5：如何让某列不参与显示隐藏控制？

6：如何格式化某列？比如工资列前加“￥”

改进后的FlexiGrid：
第一项：重新定义的皮肤

这些只需修改对饮的CSS即可实现，只是非常长，就不贴出来了，有兴趣有耐心的朋友可以去研究下代码。

第二项：在首列添加一个checkbox列

1：首先在参数中添加一个showcheckbox的参数
2：然后再输出头时判断该属性，如果为真则输出一个列包含checkbox（用于全选）
1 if (p.showcheckbox) {
2       var cth = $('<th/>');
3       var cthch = $('<input type="checkbox"/>');
4       cthch.addClass("noborder")
5       //给该列添加一些自定义的属性，在生成数据行时需要用到这些属性
6       cth.addClass("cth").attr({ 'axis': "col-1", width: "22", "isch": true }).append(cthch);
7       $(tr).append(cth);
8   }





3：然后在生成数据行时通过，因为数据行的生成的依据完全是根据thead中th的属性来创建的，这样我们可以通过上面设置的isch属性在制定的列上创建checkbox列
1 $.each(data.rows,function(i,row) //循环数据行
2 {
3 var tr = document.createElement('tr');
4 if (i % 2 && p.striped) tr.className = 'erow';
5 if (row.id) tr.id = 'row' + row.id;
6   $('thead tr:first th',g.hDiv).each( //获取列头,循环列头来生成数据单元格，这里有个性能问题，即每次循环数据行都要检索列头，事实上没有必要
7     function (){...});
8 ...
9 });

4:设置checkbox头列不参与拖拽列

5:给checkbox头列添加全选的事件实现
1 if (chkall.length > 0) {
2                        chkall[0].onclick = g.checkAllOrNot;
3                        return;
4                    }
01 checkAllOrNot: function(parent) {
02        var ischeck = $(this).attr("checked");
03        $('tbody tr', g.bDiv).each(function() {
04            if (ischeck) {
05                $(this).addClass("trSelected");
06            }
07            else {
08                $(this).removeClass("trSelected");
09            }
10        });
11        $("input.itemchk", g.bDiv).each(function() {
12            this.checked = ischeck;
13            //Raise Event
14            if (p.onrowchecked) {
15                p.onrowchecked.call(this);
16            }
17        });
18    },

6:最后一项是新增一个onrowchecked的事件，即在每一行的的checkbox选中状态发生变化时触发某个事件，onrowchecked在参数中注册。

7：新增getCheckedRows方法获取Grid中的选中行，返回是行主键的数组

第三项：修改每次都要获取记录数的bug，如果返回的记录数小于0，即没有总获取记录数，则使用上一次的获取到的记录数。

即总是在当前index为第一页是才从返回值从获取页面否则，沿用上次。和服务器端配合，可减少count的次数提高性能

第四项：Toolbar中的button增加displayname

源码toolbar中button只有name没有displayname，添加一个区分一下，不然感觉就像在C#中写了个中文的类名

第五项：快速检索增加正则表达式验证，增加操作符参数

Flexigrid有个快速检索的功能，虽然不太常用，但是偶尔的场景游泳，添加了两个参数。一个是操作标识（即=,LIKE等)
另一个正则表达式验证，即对输入查询的值进行简单的校验

第六项：可从外部集成行事件

增加参数rowhanlder，在生成行时绑定事件，如双击，右键等


第七项：在行上绑定数据

增加参数rowbinddata，配合第六个操作，如在双击事件中获取该行的数据

第八项：兼容jQuery 1.3+

当我兴致匆匆的升级了jQuery框架后，发现脚本开始报错了，于是只能阅读代码，一个一个修正。

第九项：修正了Json数据的row为null时脚本报错的问题
这个不知道算不算bug，反正是当我服务器端没有数据返回null，原来的脚本报错了，于是加了个判断

第十项：新增列不参与toggle，只需配置列的toggle=false

希望某列不参与显示隐藏控制，即在生成下拉控制器时判断该属性为真则跳过

第十一项：修改AddData的组装逻辑，优化事件附件，提升性能

原来的逻辑是通过Dom操作，将tr td生成，并添加到行列中，最后在通过检索循环触发单元格的proccess事件和行默认事件（如单击选中事件），而且在上诉两个行为中存在致使浏览器重绘Dom的操作。还存在一些不必要的循环,这样的逻辑在表格行列较多，客户机性能较差，又是IE6的话影响非常之明显。即时在我的电脑上，在IE6下仍然是表现不佳。

所以调整为添加行列统一将生成的html push到数组一次性付给tbody，同时在生成单元格html时处理process事件（不要再次查找和循环，避免多次重绘dom）

第十二项：添加extParam参数可将外部参数动态注册到grid，实现如查询等操作

下面是我根据上面测试的一个例子，本例需要结合我的另一篇文章看http://gundumw100.iteye.com/admin/blogs/531131： 

<%@ 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 href="css/flexigrid.css" type="text/css" rel="stylesheet" />
<link href="css/contextmenu.css" type="text/css" rel="stylesheet"  />
<script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.contextmenu.js" type="text/javascript"></script>
<script src="jquery.flexigrid.js" type="text/javascript" ></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',toggle : 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: 'add', displayname: '新增', bclass: 'add', onpress: toolbarItem },
            { name: 'modify', displayname: '修改', bclass: 'modify', onpress: toolbarItem },
            { name: 'delete', displayname: '删除', bclass: 'delete', onpress: toolbarItem },
			{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,//透明度设置
		showcheckbox: true,//是否显示第一列的checkbox（用于全选）
		gridClass: "bbit-grid",//样式
        rowhandler: contextmenu,//是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
		rowbinddata: true,//配合上一个操作，如在双击事件中获取该行的数据
		onrowchecked: false//在每一行的的checkbox选中状态发生变化时触发某个事件
	});
	function contextmenu(row) {
        var menu = { width: 150, items: [
             { text: "查看", icon: "images/icons/search.png", alias: "contextmenu-view", action: contextMenuItem },
             { text: "编辑", icon: "images/icons/modify.png", alias: "contextmenu-modify", action: contextMenuItem },
             { text: "删除", icon: "images/icons/close.png", alias: "contextmenu-delete", action: contextMenuItem }
        ]
    };
	function contextMenuItem(target) {
            var id = $(target).attr("id").substr(3);
            var cmd = this.data.alias;
            var ch = $.browser.msie ? target.ch : target.getAttribute("ch");
            var cell = ch.split("_FG$SP_");
            if (cmd == "contextmenu-view") {
                alert("编辑，编号=" + id);
            }
            else if (cmd == "contextmenu-modify") {
                alert("编辑，编号=" + id);
            }
            else if (cmd == "contextmenu-delete") {
                var name = cell[1];
                if (confirm("你确认要删除 [" + name + "] 吗？")) {
                    alert("删除，编号=" + id);
                }
            }
            else {
                $("#flex1").flexReload();
            }
        }
        $(row).contextmenu(menu);
    }
	
	function toolbarItem(com, grid) {
       if (com=='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:eq(2)").eq(i).text();//获取id,td:eq(2)
				      }
				      ids=ids.substring(1);
				      $.ajax({
							type: "POST",
							url: "flexGridServlet.do?action=delete",
							data: "id="+ids,
							dataType:"text",
							success: function(msg){
								if(msg=="success"){
									$("#flex1").flexReload();
								}else{
									alert("有错误发生,msg="+msg);
								}
							},
							error: function(msg){
								alert("msg="+msg);
							}
						});
		      	}
		   }
		}else if (com=='add'){
			alert("flexGridServlet.do?action=add");
			window.location.href="flexGridServlet.do?action=add";
		}else if (com=='modify'){
			if($(".trSelected").length==1){
				window.location.href="flexGridServlet.do?action=modify&id="+$('.trSelected',grid).find("td").eq(2).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>
   
   .bbit-grid div.fbutton .add{
       	padding-left:20px;
        background: url(images/icons/add.png) no-repeat center left;
   }
   .bbit-grid div.fbutton .modify{
       padding-left:20px;
       background: url(images/icons/modify.png) no-repeat center left;
   }
   .bbit-grid div.fbutton .delete{
       padding-left:20px;
       background: url(images/icons/close.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" />
<input id="method" type="hidden" name="method" value="null" />
<script>
   		
</script>

</body>
</html>



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 {
		db = new DBConnection();// 打开链接
		try {
			db.getCurrentConnection();
		} catch (SQLException e1) {
		}
	}

	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 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-------------------");
			String id=request.getParameter("id");
			System.out.println("id="+id);
			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() {
		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();
	}

}
  • 大小: 50.7 KB
分享到：
| 最简单的FlexiGrid使用（静态的）
评论
2 楼 我最爱刘 2014-07-30  
尊敬的大神 您好 我看了您“基于jQuery的FlexiGrid的插件使用和改造”这篇文章，现在正好用到这个控件，麻烦您能给发一份您自己测试的demo吗  小弟感激不尽   我的qq邮箱为 253537333@qq.com   非常感谢
1 楼 菜菜菜 2011-03-20  
求教，请问我要在里面加入自己的查询条件呢？应该怎么做？
发表评论

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

相关推荐

    jquery flexigrid

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

    jquery flexigrid 支持前台排序

    需要注意的是，由于Flexigrid和Tablesorter都是基于jQuery的插件，它们可能在某些事件处理或CSS样式上存在冲突。为了解决这些问题，我们可能需要对它们的默认行为进行一些调整，比如重写某些CSS规则，或者监听并处理...

    jquery表格插件Flexigrid

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

    jquery flexigrid插件

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

    Jquery flexigrid插件 添加checkbox,(双击事件)onRowDblclick

    Flexigrid是一款基于jQuery的强大的数据网格插件，它提供了丰富的功能，如分页、排序、搜索和自定义列。在开发web应用时，我们经常需要处理大量的表格数据，这时Flexigrid就能派上用场，它使得数据显示更加灵活且...

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

    FlexiGrid是一款基于jQuery的表格插件，它提供了丰富的功能，包括数据分页、排序、过滤、编辑等，使得在Web应用中展示和操作大量数据变得更加便捷。在本篇文章中，我们将深入探讨FlexiGrid的使用方法，以及如何将其...

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

    FlexiGrid是一款基于jQuery的轻量级表格插件，它为开发者提供了简单易用的方式来展示和操作数据表格。FlexiGrid支持多种功能，如排序、分页、筛选等，非常适合用于展示动态数据或对数据进行交互式操作的场景。本文将...

    Jquery FlexiGrid JS

    **jQuery FlexiGrid JS** 是一个强大的前端数据网格插件，它基于流行的JavaScript库jQuery构建。这个插件允许用户在网页上展示大量数据，并提供排序、分页、搜索和自定义列功能，使得数据管理更加直观和高效。下面将...

    jQuery表格插件 Flexigrid的例子

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

    jquery插件之flexigrid篇

    Flexigrid是一款基于jQuery的轻量级数据网格插件，专为实现强大的表格展示和操作功能而设计。在Web开发中，特别是在构建数据密集型应用时，它提供了一种高效且用户友好的方式来显示、排序、筛选和操作数据。这款插件...

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

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

    FlexiGrid插件使用例子

    总的来说，FlexiGrid是一个功能强大的jQuery表格插件，与Java Servlet结合使用可以构建高性能的数据展示和管理界面。理解其核心功能和工作原理，以及如何在后端（如Servlet）进行适配，是成功应用此插件的关键。通过...

    jquery FlexiGrid与asp.net 后台交互例子

    jQuery FlexiGrid 是一款功能强大的表格插件，它为Web应用程序提供了数据展示、排序、筛选、分页等丰富的功能。在ASP.NET环境下，FlexiGrid 可以与后台进行深度交互，实现数据的创建（Create）、读取（Read）、更新...

    Jquery flexigrid使用

    在JSP页面中，首先需要引入必要的JavaScript文件，包括jQuery和Flexigrid插件文件。然后，在`&lt;body&gt;`标签内定义一个表格元素作为Flexigrid容器。 ```html &lt;table id="grid"&gt;&lt;/table&gt; ``` 接下来，在JavaScript...

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

    Flexigrid是一款基于jQuery的表格插件，它提供了丰富的功能，如数据分页、排序、搜索和自定义列宽等，极大地增强了网页中表格的展示效果和交互性。在"jquery插件之flexigrid学习实例-jar包"中，我们主要关注的是如何...

    FlexiGrid 插件简单应用

    它基于jQuery库，因此能够很好地与其他jQuery插件和库兼容，为开发者提供了灵活的数据展示和管理工具。在本教程中，我们将深入探讨FlexiGrid的简单应用，以及如何将其从英文版本转换为简体中文。 首先，让我们了解...

    JQuery Flexigrid

    $("#flex1").flexigrid({ url: 'post2.php', dataType: 'json', colModel : [ {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'}, {display: 'Name', name : 'name', width : 180...

    jsp中flexigrid插件在ie下样式问题

    FlexiGrid插件基于jQuery框架，为网页提供了强大的数据展示能力，支持分页、排序等功能，并且可以通过简单的配置实现复杂的交互效果。由于其灵活性和易用性，被广泛应用于各种基于JSP技术的企业级应用中。 #### 三...

    jquery插件之flexigrid学习实例

    Flexigrid是一款基于jQuery的表格插件，它提供了丰富的功能，如数据分页、排序、搜索和自定义列显示，适用于构建数据密集型Web应用。在这个"jquery插件之flexigrid学习实例"中，我们将深入探讨如何在Struts2框架下...

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