`
matychen
  • 浏览: 172482 次
  • 性别: 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的下拉列表实现二级联动
评论
113 楼 aiwode 2015-07-21  
[b][/b]
112 楼 slbszq 2012-07-17  
增加、删除、修改、和模糊查询都能实现了  但是还有一个 根据多个字段进行高级查询怎么弄？ 
111 楼 david01205 2012-07-07  
马上要用到，先顶个。
110 楼 tianma2008 2011-09-02  
写得真不错，谢谢
109 楼 冰寒Alicv 2011-08-15  
尝尝看~
108 楼 matychen 2011-03-09  
yangguo 写道
我爱死你了，楼主。你加个查询的例子看下？


增加了一些功能：
也来说说jQuery的grid插件Flexigrid的几点重要改进
把这个博客的几个功能加入进来了

新增加了个附件。里面附带了查询功能，jar自己根据classpath下面缺失的查找。

值得下载
107 楼 yangguo 2011-03-08  
我爱死你了，楼主。你加个查询的例子看下？
106 楼 spakezs 2011-03-08  
本人也喜欢研究jquery，上面各位的成果，都是大局研究价值的，呵呵，收藏下来研究啦
105 楼 itstarting 2011-01-13  
另外，这个UI组件在firefox上会出现拖动后错乱现象。

我还以为楼主修复了呢，我用了你的版本还是有这个问题。

开始状态：



拖动后状态：



104 楼 itstarting 2011-01-06  
晕，习惯性的写2010年——那已经是历史了
103 楼 itstarting 2011-01-06  
matychen 写道
itstarting 写道
这个grid能否加上subtotal小计功能？

有2个思路：
1.后台计算了加到数据里面。
2.前台js操作它里面的dataset，在dataset里面加对应的对象后，再重载下表格。


还真没这个功能啊
万般无奈之下，自己做了个简单的前端summary功能：
1）定义
{display: 'Price_a', name : 'price', width : 60, align: 'right',summary: 'average:2'},//sum
{display: 'Price_s', name : 'price', width : 60, align: 'right',summary: 'sum:0'},//average
{display: 'Price_c', name : 'price', width : 60, align: 'right',summary: customSum},//custom

custom的话，可以定义个自己的计算方法： 
function customSum(arrayOfValue){
	var resultValue = 0.00;
	$(arrayOfValue).each(function(i,value){
		resultValue += parseFloat(value);
	});
	return resultValue.toFixed(3);
}


2）在grid里加了一个方法： 
//06012010 add by Bright Zheng
			appendSummaryFooter: function(tbody){
				var data = [];
				for (j=0;j<p.colModel.length;j++){
					var cm = p.colModel[j];
					var summary = cm.summary;
					if(summary){
						var vals = []; 
					    var trs = $(".flexigrid .bDiv table tbody tr"); 
					    if(trs.length > 0){ 
					    	for(var x=0; x<trs.length; x++){
					    		var v = $("td:eq("+j+")",trs[x]).text();
					    		vals.push(v);
			                } 
					    }
					    var resultValue = 0.00;
				    	var fixed = 0;
					    if(typeof(summary)=="function"){
					    	resultValue = summary(vals);
					    }else if(summary.indexOf("average")==0){
					    	var parts = summary.split(":");
					    	fixed = (parts[1] != null) ? parts[1] : 0;
					    	var cnt = 0;
					    	$(vals).each(function(i,value){
					    		cnt++;
					    		resultValue += parseFloat(value);
					    	});
					    	resultValue = resultValue / cnt;
					    	resultValue = resultValue.toFixed(fixed);
					    }else if(summary.indexOf("sum")==0){
					    	var parts = summary.split(":");
					    	fixed = (parts[1] != null) ? parts[1] : 0;
					    	$(vals).each(function(i,value){
					    		resultValue += parseFloat(value);
					    	});
					    	resultValue = resultValue.toFixed(fixed);
					    }
					    //push to the reslut array
					    data.push(resultValue);
					}else{
						data.push("");
					}
				}
				if(data){
			        var footer = $('<tr id="trSummary" style="background:gray"></tr>');
			        $(data).each(function(i,v){
			        	var div = $('<div style="text-align: right;">' + v + '</div>'); 
			        	$(footer).append($('<td align="right"></td>').append(div)); 
			    	});
			        $(tbody).append(footer); 
				}
			}


3）这个方法调用处为原addData的$(t).append(tbody)之后： 

				$(t).append(tbody);
				
				//06012010 add by Bright Zheng
				this.appendSummaryFooter(tbody);


呵呵，js始终不是强项，只能说基本可用
102 楼 matychen 2011-01-05  
itstarting 写道
这个grid能否加上subtotal小计功能？

有2个思路：
1.后台计算了加到数据里面。
2.前台js操作它里面的dataset，在dataset里面加对应的对象后，再重载下表格。
101 楼 itstarting 2011-01-05  
这个grid能否加上subtotal小计功能？
100 楼 llpllpllp 2010-12-30  
楼上,估计传回的数据格式不对//
99 楼 lewter 2010-12-26  
非常感谢楼主的例子
用ssh1 把增删改查做出来了
不过还有个问题就是
每次添加和删除以及修改之后
不能够自动关闭遮罩层
这个应该怎么改？
98 楼 java_doc 2010-12-23  
不错啊，开始下载了一个官方的，结果和jQuery1.4.2整合有问题，1.3.2没有问题，研究了半天不知道什么原因，才搜到这篇文章，不错啊，楼主继续发扬！
97 楼 olived 2010-12-22  
matychen 写道
maque0312 写道
flexigrid可以实现直接从EXCEL复制粘贴空间界面这样的功能吗？而不是点击添加，一项一项填写。
如果flexigrid不能实现，那么jq.grid可以实现吗？

呵呵，你要是能发现这样的控件，欢迎你写个教程！

ecside有这样的功能，现在没人维护了，你可以改改
96 楼 llpllpllp 2010-12-21  
对于表结构变化的表,似乎不适合用flexigrid?
95 楼 llpllpllp 2010-12-03  
楼主,我是用控件提供的query和qtype来搜集用户的查询选择,利用savegoods表单作为查询条件.不过这样要改一下flexigrid.js,以便传递查询信息.

不知道还有其它好办法没///
94 楼 llpllpllp 2010-12-02  
楼主:
     对于多条件查询,该怎么实现比较好?
发表评论

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

相关推荐

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

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

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

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

    jquery表格插件Flexigrid

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

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

    综上所述，FlexiGrid是一个强大的jQuery插件，它能帮助开发者快速构建具有高级特性的数据表格。通过灵活配置和丰富的API，你可以根据项目需求定制出满足各种需求的表格组件。在实际应用中，记得结合自己的数据源和...

    jQuery表格插件 Flexigrid的例子

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

    jquery flexigrid 支持前台排序

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

    jquery插件之flexigrid篇

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

    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修改简单示例

    总结，"Spring MVC+JPA+Jquery+Flexigrid修改简单示例"是一个完整的Web应用开发案例，它涵盖了后端数据处理、前端交互以及数据展示等多个方面。这个示例可以帮助开发者快速理解并掌握这些技术的集成和使用，为构建...

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