`
matychen
  • 浏览: 171641 次
  • 性别: Icon_minigender_1
  • 来自: 武汉外来务工人员
社区版块
存档分类
最新评论

jQuery插件flexigrid使用总结

jQueryjsonFlexAjaxFirebug 
阅读更多
一、参考资料

1、jQuery插件flexiGrid的完全使用，附代码下载

2、修改flexigrid源码一(json,checkbox)[原创]

3、jQuery +UI + flexigrid做的一个用户管理界面

4、ASP.NET MVC Flexigrid sample

5、基于jQuery的GridView-FlexiGrid的使用和改造（1）--如何使用，完全参数说明

6、官方网站

7、总结!最佳jQuery窗口插件jqModal

二、说明

本文是在参考了以上内容后写出的，引用了相关代码。如有侵权，请与我联系。

自己整理了2套皮肤。

附件为eclipse工程文件，带数据库文件，导入相关sql，修改配置文件就能运行。

注意：部署的时候下面的一个文件：.mymetadata这个里面关系到这个项目的名称，由于我是直接拷贝的/gtgrid_LianDong这个项目，所以导致了名字不是flexigrid，请自行修改，

 

<?xml version="1.0" encoding="UTF-8"?>
<project-module
  type="WEB"
  name="flexigrid"
  id="myeclipse.1267149904578"
  context-root="/gtgrid_LianDong"
  j2ee-spec="1.4"
  archive="flexigrid.war">
  <attributes>
    <attribute name="webrootdir" value="WebRoot" />
  </attributes>
</project-module>

 

三、代码

 

 

if (t.grid)
			return false; // return if already exist

		// apply default properties
		p = $.extend({
			height : 200, // flexigrid插件的高度，单位为px
			width : 'auto', // 宽度值，auto表示根据每列的宽度自动计算
			striped : true, // 是否显示斑纹效果，默认是奇偶交互的形式
			novstripe : false,
			minwidth : 30, // 列的最小宽度
			minheight : 80, // 列的最小高度
			resizable : true, // 是否可伸缩
			url : false, // ajax方式对应的url地址
			method : 'POST', // 数据发送方式
			dataType : 'xml', // 数据加载的类型
			checkbox : false,// 是否要多选框
			errormsg : '连接错误!',// 错误提示信息
			usepager : false, // 是否分页
			nowrap : true, // 是否不换行
			page : 1, // 默认当前页
			total : 1, // 总页面数
			useRp : true, // 是否可以动态设置每页显示的结果数
			rp : 15, // 每页默认的结果数
			rpOptions : [5,10, 15, 20, 25, 30, 40],// 可选择设定的每页结果数
			title : false,// 是否包含标题
			pagestat : '显示第 {from} 条到 {to} 条,共 {total} 条数据',// 显示当前页和总页面的样式
			procmsg : '正在处理,请稍候 ...',// 正在处理的提示信息
			query : '',// 搜索查询的条件
			qtype : '',// 搜索查询的类别
			nomsg : '没有数据存在!',// 无结果的提示信息
			minColToggle : 1, // 允许显示的最小列数
			showToggleBtn : true, // 是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错
			hideOnSubmit : true,// 隐藏提交
			autoload : true,// 自动加载
			blockOpacity : 0.5,// 透明度设置
			onToggleCol : false,// 当在行之间转换时，可在此方法中重写默认实现，基本无用
			onChangeSort : false,// 当改变排序时，可在此方法中重写默认实现，自行实现客户端排序
			onSuccess : false,// 成功后执行
			onSubmit : false
			  // 调用自定义的计算函数
		  }, p);

 

 

$(function() {
	    $("#flex").flexigrid({
		        url : 'all.action',
		        dataType : 'json',
		        colModel : [{
			            display : 'ID',
			            name : 'id',
			            width : 50,// 得加上 要不IE报错
			            sortable : true,
			            align : 'center'
		            }, {
			            display : '商品名称',
			            name : 'name',
			            width : 100,
			            sortable : true,
			            align : 'center'
		            }, {
			            display : '标准',
			            name : 'stand',
			            width : 100,
			            sortable : true,
			            align : 'center'
		            }, {
			            display : '单价',
			            name : 'money',
			            width : 100,
			            sortable : true,
			            align : 'center'
		            }, {
			            display : '库存',
			            name : 'leavings',
			            width : 100,
			            sortable : true,
			            align : 'center'
		            }, {
			            display : '已经订购',
			            name : 'orders',
			            width : 100,
			            sortable : true,
			            align : 'center'
		            }],
		        buttons : [{
			            name : '添加',
			            bclass : 'add',
			            onpress : action
		            }, {
			            // 设置分割线
			            separator : true
		            }, {
			            name : '删除',
			            bclass : 'delete',
			            onpress : action
		            }, {
			            separator : true
		            }, {
			            name : '修改',
			            bclass : 'edit',
			            onpress : action
		            }, {
			            separator : true
		            }],
//		        searchitems : [{
//			            display : 'ID',
//			            name : 'id',
//			            isdefault : true
//		            }, {
//			            display : '库存',
//			            name : 'leavings'
//		            }],
		        sortname : "id",
		        sortorder : "asc",
		        usepager : true,
		        title : '商品信息',
		        useRp : true,
		        checkbox : true,// 是否要多选框
		        rowId : 'id',// 多选框绑定行的id
		        rp : 10,
		        showTableToggleBtn : true,
		        width : 700,
		        height : 263
	        });
	    var actions="";
	    function action(com, grid) {
		    switch (com) {
			    case '添加' :
				    $("#savegoods input[type='text']").each(function() {
					        $(this).val("");
				        });
				     $('#savegoods input[name="id"]').removeAttr("disabled");
				     $('#savegoods').attr("action","add.action");
				    actions="add.action";
				    $("#goods").jqmShow();
				    break;
			    case '修改' :
				    selected_count = $('.trSelected', grid).length;
				    if (selected_count == 0) {
					    alert('请选择一条记录!');
					    return;
				    }
				    if (selected_count > 1) {
					    alert('抱歉只能同时修改一条记录!');
					    return;
				    }
				    data = new Array();
				    $('.trSelected td', grid).each(function(i) {
					        data[i] = $(this).children('div').text();
				        });
				    $('#savegoods input[name="id"]').val(data[0]).attr("disabled",true);
				    $('#savegoods input[name="name"]').val(data[1]);
				    $('#savegoods input[name="stand"]').val(data[2]);
				    $('#savegoods input[name="money"]').val(data[3]);
				    $('#savegoods input[name="leavings"]').val(data[4]);
				    $('#savegoods input[name="orders"]').val(data[5]);
					
				   actions="modify.action";

				    $("#goods").jqmShow();
				    break;
			    case '删除' :
				    selected_count = $('.trSelected', grid).length;
				    if (selected_count == 0) {
					    alert('请选择一条记录!');
					    return;
				    }
				    names = '';
				    $('.trSelected td:nth-child(3) div', grid).each(function(i) {
					        if (i)
						        names += ',';
					        names += $(this).text();
				        });
				    ids = '';
				    $('.trSelected td:nth-child(2) div', grid).each(function(i) {
					        if (i)
						        ids += ',';
					        ids += $(this).text();
				        })
				    if (confirm("确定删除商品[" + names + "]?")) {
					    delUser(ids);
				    }
				    break;
		    }
	    }
	    $("#goods").jqm({
		    // trigger : 'a.showDialog',// 触发
		    // ajax: '@href',//ajax读取方式
		    // ajaxText:'',//提示语言
		    modal : true,// 限制输入（鼠标点击，按键）的对话
		    overlay : 60 // 遮罩程度%
		      // target : t,// 提示
		      // onHide : function(h) {
		      // // // t.html('Please Wait...'); // Clear Content HTML on Hide.
		      // h.o.remove(); // remove overlay
		      // // h.w.fadeOut(888); // hide window
		      // }
	      }).jqmAddClose('.close')// 添加触发关闭的selector
	      .jqDrag('.drag');// 添加拖拽的selector
		
	    function delUser(ids) {
		    $.ajax({
			        url : 'delete.action',
			        data : {
				        ids : ids
			        },
			        type : 'POST',
			        dataType : 'json',
			        success : function() {
				        $('#flex').flexReload();//表格重载
			        }
		        });
	    }
	    $("#submit").click(function(){
	    	 $.ajax({
			        url : actions,
			        data : $("#savegoods").serialize(),
			        type : 'POST',
			        dataType : 'json',
			        success : function(data) {
				    	$("#goods").jqmHide();
				        $('#flex').flexReload();
			        }
		        });
	    })
    });

  

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>商品信息</title>
		<link rel="stylesheet" type="text/css"
			href="flexigrid_my/css/flexigrid_gray.css">
		<link rel="stylesheet" type="text/css"
			href="flexigrid_my/jqModal/css/jqModal_gray.css">
		<script type="text/javascript" src="flexigrid_my/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="flexigrid_my/flexigrid.js"></script>
		<script type="text/javascript" src="flexigrid_my/jqModal/jqDnR.js"></script>
		<script type="text/javascript" src="flexigrid_my/jqModal/jqModal.js"></script>
		<script type="text/javascript" src="flexigrid_my/test.js"></script>
	</head>
	<body>
		<table id="flex" style="display: none"></table>
		<div class="jqmWindow" style="width: 300px;" id="goods">
			<div class="drag">
				商品信息编辑
				<div class="close"></div>
			</div>
			<form id="savegoods" method="post">
				<table width="252" border="0" align="center"
					cellpadding="0" cellspacing="0">
					<tr>
						<td>ID：</td>
						<td><input type="text" name="id" ></td>
					</tr>
					<tr>
						<td>商品名称：</td>
						<td><input type="text" name="name"></td>
					</tr>
					<tr>
						<td>标准：</td>
						<td><input type="text" name="stand"></td>
					</tr>
					<tr>
						<td>单价：</td>
						<td><input type="text" name="money"></td>
					</tr>
					<tr>
						<td>库存：</td>
						<td><input type="text" name="leavings"></td>
					</tr>
					<tr>
						<td>已经订购：</td>
						<td><input type="text" name="orders"></td>
					</tr>
				</table>
				<div align="center">
					<input type="button" id="submit" class="input-button" value="提交" />
					<input type="reset" class="input-button" value="重置" />
				</div>
			</form>
		</div>
	</body>
</html>
 四、部分效果图

蓝色皮肤

蓝色皮肤下的修改

 

灰色皮肤

灰色皮肤下的修改

 

五、BUG

在Firefox3.6、IE6、7、8、Chrome5下测试通过。

修复了在ie8下checkbox显示的问题。

修改了禁止修改ID,改为： $('#savegoods input[name="id"]').val(data[0]).attr("disabled",true);同时： $('#savegoods input[name="id"]').removeAttr("disabled");

 

用JQuery让GT-Grid的下拉列表实现二级联动

  • wht.7z (72.8 KB)
  • 描述: 新增加的例子，附带条件查询以及后台封装
  • 下载次数: 2369
分享到：
| 用JQuery让GT-Grid的下拉列表实现二级联动
评论
93 楼 matychen 2010-12-02  
llpllpllp 写道
楼主，请教一下：
    flexigrid带的快速查询功能如何使用呀？ searchitems 部分都变成了注释 。。该如何增加这项功能？

把注释去掉，用firebug看看传到服务端的字段叫什么，就知道怎么查询了吧。
92 楼 llpllpllp 2010-12-01  
楼主，请教一下：
    flexigrid带的快速查询功能如何使用呀？ searchitems 部分都变成了注释 。。该如何增加这项功能？
91 楼 matychen 2010-12-01  
llpllpllp 写道
比如,由于需求变化,表增加了一个字段,现在要求将该表所有内容显示.
按上面的flexigrid, test.js中字段都是编码写好了,是硬编码,要满足上面的要求,只能重新该test.js, 能不能通过动态编码,不改test.js文件，能让test.js动态根据表中字段，显示表的全部字段？？

楼主，有好建议吗？

你直接在js里面增加一个大括号，里面写上增加的字段就ok了，
你数据库增加个字段，java代码也要改吧，至少pojo要改下，才能生成新的json。

感觉没什么建议和头绪。
90 楼 llpllpllp 2010-12-01  
比如,由于需求变化,表增加了一个字段,现在要求将该表所有内容显示.
按上面的flexigrid, test.js中字段都是编码写好了,是硬编码,要满足上面的要求,只能重新该test.js, 能不能通过动态编码,不改test.js文件，能让test.js动态根据表中字段，显示表的全部字段？？

楼主，有好建议吗？
89 楼 matychen 2010-12-01  
llpllpllp 写道
另外,楼主,可以动态增加flexigrid的字段吗?比如表的字段增加了一个,可以动态将新字段显示在flexigrid中吗?

这是神马需求？还没遇见过!
88 楼 llpllpllp 2010-12-01  
另外,楼主,可以动态增加flexigrid的字段吗?比如表的字段增加了一个,可以动态将新字段显示在flexigrid中吗?
87 楼 llpllpllp 2010-12-01  
顺便说一句:这种格式每条记录都要给出字段名,重复数据太多,幸好是分页,不然...呵呵
86 楼 llpllpllp 2010-12-01  
楼主,你说的果然不错,格式是这样的,方便后来者:
{"page":1,"rows":[{"id":5,"leavings":5,"money":10,"name":"薯条","orders":4,"stand":"每箱28个"},{"id":6,"leavings":6,"money":11,"name":"瓜子","orders":5,"stand":"每箱29个"},{"id":8,"leavings":8,"money":13,"name":"李子","orders":66,"stand":"每箱31个"},{"id":9,"leavings":9,"money":55,"name":"苹果","orders":67,"stand":"每箱32个"},{"id":11,"leavings":11,"money":16,"name":"香蕉","orders":69,"stand":"每箱34个"},{"id":12,"leavings":12,"money":17,"name":"橘子","orders":70,"stand":"每箱35个"},{"id":13,"leavings":13,"money":6,"name":"薯条","orders":0,"stand":"每箱36个"},{"id":15,"leavings":15,"money":8,"name":"牛奶","orders":2,"stand":"每箱38个"},{"id":17,"leavings":17,"money":10,"name":"苹果","orders":4,"stand":"每箱40个"},{"id":18,"leavings":18,"money":11,"name":"奶油","orders":5,"stand":"每箱41个"}],"total":32}


删除\修改\增加,返回值为:
this.out.write("{\"page\":0,\"rows\":null,\"total\":0}");


看来还是strut好用,直接用sevlet烦琐些..
85 楼 matychen 2010-11-28  
llpllpllp 写道
楼主，又麻烦你了，呵呵。
有几个问题：
1、只能显示id字段，无法显示其它字段（共3个字段，字段名为id，a，b）。生成json的代码参考网上的，生成的结果格式如下（放在变量 back 中）：
{
page:1,
total:5,
rows:[
{id:'1',cell:['1','1','10']},
{id:'8',cell:['8',' 88',' 88']},
{id:'9',cell:['9','9','2']},
{id:'10',cell:['10','10','1']},
{id:'11',cell:['11','','']}
]}


    });

你这个不是标准的json格式，不要cell，你这个是官方版本要求的格式，而这个flexigrid版本要求的是另外一种格式，你可以跑下这个例子，用firebug抓下标准的格式。
84 楼 llpllpllp 2010-11-28  
楼主，又麻烦你了，呵呵。
有几个问题：
1、只能显示id字段，无法显示其它字段（共3个字段，字段名为id，a，b）。生成json的代码参考网上的，生成的结果格式如下（放在变量 back 中）：
{
page:1,
total:5,
rows:[
{id:'1',cell:['1','1','10']},
{id:'8',cell:['8',' 88',' 88']},
{id:'9',cell:['9','9','2']},
{id:'10',cell:['10','10','1']},
{id:'11',cell:['11','','']}
]}

返回结果的代码如下：
this.out.write(back);
this.out.flush();
this.out.close();

但flexigrid似乎没有收到完整信息，只能显示id字段。

2、在更新、修改和删除时，服务器能接受flexigrid传来的数据，但flexigrid似乎无法收到服务器端发送的数据。具体表现在：更新删除后，flexigrid没有刷新，还是操作之前的样子，是不是服务器端返回代码有误？相关代码见下：

服务器端代码：
this.out.write("success");


flexigrid代码：
$(function() {
    $("#flex").flexigrid({
        url : 'GetData',
        dataType : 'json',
        colModel : [{
            display : 'ID',
            name : 'id',
            width : 50,// 得加上 要不IE报错
            sortable : true,
            align : 'center'
            }, {
            display : 'a',
            name : 'a',
            width : 100,
            sortable : true,
            align : 'center'
            }, {
            display : 'b',
            name : 'b',
            width : 100,
            sortable : true,
            align : 'center'
            }],
        buttons : [{
            name : '添加',
            bclass : 'add',
            onpress : action
            }, {
            // 设置分割线
            separator : true
            }, {
            name : '删除',
            bclass : 'delete',
            onpress : action
            }, {
            separator : true
            }, {
            name : '修改',
            bclass : 'edit',
            onpress : action
            }, {
            separator : true
            }],
//         searchitems : [{
//             display : 'ID',
//             name : 'id',
//             isdefault : true
//             }, {
//             display : '库存',
//             name : 'leavings'
//             }],
        sortname : "id",
        sortorder : "asc",
        usepager : true,
        title : '商品信息',
        useRp : true,
        checkbox : true,// 是否要多选框
        rowId : 'id',// 多选框绑定行的id
        rp : 10,
        showTableToggleBtn : true,
        width : 700,
        height : 263
        });
    var actions="";
    function action(com, grid) {
    switch (com) {
    case '添加' :
    $("#savegoods input[type='text']").each(function() {
        $(this).val("");
        });
     $('#savegoods input[name="id"]').removeAttr("readonly");
     $('#savegoods').attr("action","GetData?action=add");
    actions="GetData?action=add";
    $("#goods").jqmShow();
    break;
    case '修改' :
    selected_count = $('.trSelected', grid).length;
    if (selected_count == 0) {
    alert('请选择一条记录!');
    return;
    }
    if (selected_count > 1) {
    alert('抱歉只能同时修改一条记录!');
    return;
    }
    data = new Array();
    $('.trSelected td', grid).each(function(i) {
        data[i] = $(this).children('div').text();
       
        });
    $('#savegoods input[name="id"]').val(data[0]).attr("readonly","readonly");
    $('#savegoods input[name="a"]').val(data[1]);
    $('#savegoods input[name="b"]').val(data[2]);

   actions="GetData?action=modify";

    $("#goods").jqmShow();
    break;
    case '删除' :
    selected_count = $('.trSelected', grid).length;
    if (selected_count == 0) {
    alert('请选择一条记录!');
    return;
    }
    names = '';
    $('.trSelected td:nth-child(2) div', grid).each(function(i) {
        if (i)
        names += ',';
        names += $(this).text();
        });
    ids = '';
    $('.trSelected td:nth-child(2) div', grid).each(function(i) {
        if (i)
        ids += ',';
        ids += $(this).text();
        })
    if (confirm("确定删除商品[" + names + "]?")) {
    delUser(ids);
    }    
   
    break;
    }
    }
    $("#goods").jqm({

    modal : true,// 限制输入（鼠标点击，按键）的对话
    overlay : 60 // 遮罩程度%

      // }
      }).jqmAddClose('.close')// 添加触发关闭的selector
      .jqDrag('.drag');// 添加拖拽的selector

    function delUser(ids) {
    $.ajax({
        url : 'GetData?action=delete',
        data : {
        ids : ids
        },
        type : 'POST',
        dataType : 'json',
        success : function() {
        $('#flex').flexReload();//表格重载
        }
        });
    }
    $("#submit").click(function(){
    $.ajax({
        url : actions,
        data : $("#savegoods").serialize(),
        type : 'POST',
        dataType : 'json',
        success : function(data) {
    $("#goods").jqmHide();
        $('#flex').flexReload();
        }
        });
    })
    });
83 楼 matychen 2010-11-27  
llpllpllp 写道
楼主,谢谢您慷慨的回复..
    还有一个问题要请教:返回数据是Jason格式吧,为什么在服务器端没有看见把数据生成Jason格式的代码呢?我看了AllDao、AllAction类，都没有。不知道怎么产生Jason格式数据的。另外，也没有看到将数据传回到客户端的代码，是不是漏了什么文件（比如说Servlet）？
        谢谢！

你可以看看lib包里面有个struts——json（大概这样写的），在action的是type属性里面设置的是json-deafult，这个由对象转json是由struts2默认完成的，不过你可以用printwriter输出流来打印回客户端是一个道理。
82 楼 llpllpllp 2010-11-25  
楼主,谢谢您慷慨的回复..
    还有一个问题要请教:返回数据是Jason格式吧,为什么在服务器端没有看见把数据生成Jason格式的代码呢?我看了AllDao、AllAction类，都没有。不知道怎么产生Jason格式数据的。另外，也没有看到将数据传回到客户端的代码，是不是漏了什么文件（比如说Servlet）？
        谢谢！
81 楼 matychen 2010-11-15  
llpllpllp 写道
楼主，你做的控件好厉害，很佩服，呵呵。
有个问题请教一下： 修改数据提交后，怎么中文都变成了乱码？

不是我做的
看看你的mysql的设置，mysql编码问题。
80 楼 llpllpllp 2010-11-14  
楼主，你做的控件好厉害，很佩服，呵呵。
有个问题请教一下： 修改数据提交后，怎么中文都变成了乱码？
79 楼 matychen 2010-11-09  
要设置order：true
78 楼 yucai 2010-11-09  
刚刚G到这往篇文章，谢谢下下来看看
77 楼 diandian 2010-10-26  
hi matychen.
  我用了你这个插件,其它的功能都没什么问题－很好。但在点击“列名”升降序的时候出现了问题，死活都没进行排序（默认的升序就一直是升序）暂时还没找出原因来，不知你开发过程中有没有出现过样的现象。帮忙解答一下。
thanks!
76 楼 shiren1118 2010-09-05  
hejh 写道
shiren1118 写道
hejh 写道
请教1个问题，
在弹出的dialog窗里，通过dialog里的button再做一个弹出dialog窗，怎么实现？它们之间如何传递值？



那个是easyUI的作者前期的一个dialog，没有特别的传值啊，可以写到页面里的隐藏域然后获取就可以了，不用太复杂



谢谢回复，试了一下果然如此，值是可以传了。

但是弹出的dialog对话框了想调用主页面的js函数即不知道怎么做，试了好多方法就是提示函数未定议。



如果是一个页面，直接调

如果不是，$.getScript加载一下就可以了
75 楼 hejh 2010-09-04  
shiren1118 写道
hejh 写道
请教1个问题，
在弹出的dialog窗里，通过dialog里的button再做一个弹出dialog窗，怎么实现？它们之间如何传递值？



那个是easyUI的作者前期的一个dialog，没有特别的传值啊，可以写到页面里的隐藏域然后获取就可以了，不用太复杂



谢谢回复，试了一下果然如此，值是可以传了。

但是弹出的dialog对话框了想调用主页面的js函数即不知道怎么做，试了好多方法就是提示函数未定议。
74 楼 shiren1118 2010-09-04  
hejh 写道
请教1个问题，
在弹出的dialog窗里，通过dialog里的button再做一个弹出dialog窗，怎么实现？它们之间如何传递值？



那个是easyUI的作者前期的一个dialog，没有特别的传值啊，可以写到页面里的隐藏域然后获取就可以了，不用太复杂
发表评论

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

相关推荐

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