jQuery插件flexigrid使用总结

一、参考资料

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的下拉列表实现二级联动

评论

53 楼 jqwang518 2010-06-22  

请问如何在表格的数据里添加超链接？在colmodel中的function属性？

52 楼 matychen 2010-06-12  

honglu8726 写道

1.4版本的时候，自由伸缩功能好像有问题

不让它伸缩，或者默认的隐藏几列也可以。

51 楼 honglu8726 2010-06-12  

1.4版本的时候，自由伸缩功能好像有问题

50 楼 coolfire3721 2010-06-08  

loveExtJs 写道

请问楼主一个问题，能不能自动显示行号呢？ 1，2，3，4，5....显示下去。
老版本好像有，这个版本怎么设置呢？

这个我当时是在后台作为数据列传进来的，效果还行。

49 楼 loveExtJs 2010-06-02  

多写了个param

param=param.concat(p.addparams);//add chenxin**************

已测试通过，非常感谢，希望搂住能继续完善这个控件，很好强大！

48 楼 matychen 2010-06-02  

loveExtJs 写道

请教个问题，如果需要查询的条件不只一个。
参数数写在哪里呢？如果直接写在请求地址后面，是中文就不行了。

$("#groupTable").flexOptions({
newp: 1,
url : '${ctx}/userGroup/getUserGroups.do?'+'userName=test&groupName=test'
}).flexReload();

这个问题我准备另外开贴说明的，还是在这里说明了吧

在源码19行左右加上：

p = $.extend({
			addparams:[],//查询时带上的参数,$.ajax({ 这个前面一行。//add chenxin************
			height : 200, // flexigrid插件的高度，单位为px

在源码630行左右加上：

				if (p.params) {
					for (var pi = 0; pi < p.params.length; pi++)
						param[param.length] = p.params[pi];
				}

	  			param=param.concat(p.addparams);//add chenxin**************
				$.ajax({
					  type : p.method,
					  url : p.url,

查询函数如下：

function doquery() {
	var phone = $("#phone").val();
	var time = $("#time").val();
	var code = $("#code1").val();
	var url = "find.action";
	var params = [{//注意格式
		  name : 'phone',
		  value : phone
	  }, {
		  name : 'time',
		  value : time
	  }, {
		  name : 'code',
		  value : code
	  }];

	$('#flex').flexOptions({//重置表格的某些参数
		  page : 1,//设置起始页
		  addparams : params//设置查询参数
	  }).flexReload();//reload
}

不懂的可以站内信问。

47 楼 loveExtJs 2010-06-02  

请教个问题，如果需要查询的条件不只一个。
参数数写在哪里呢？如果直接写在请求地址后面，是中文就不行了。

$("#groupTable").flexOptions({
newp: 1,
url : '${ctx}/userGroup/getUserGroups.do?'+'userName=test&groupName=test'
}).flexReload();

46 楼 matychen 2010-05-27  

coldfox 写道

matychen 写道

我感觉这个弹框插件jqmodal不是很好，你这个用的是什么插件？

可以用BlockUI的，那个挺好

好的，有时间可以试一试

45 楼 coldfox 2010-05-27  

matychen 写道

我感觉这个弹框插件jqmodal不是很好，你这个用的是什么插件？

可以用BlockUI的，那个挺好

44 楼 matychen 2010-05-26  

<p>
</p>
<pre name="code" class="html"> .flexigrid div.hDiv th div
{
}

.flexigrid div.hDiv td
{
border-right: 1px solid #d2e3ec;
border-left: 1px solid #eef8ff;
}
.flexigrid div.nBtn
{
position: absolute;
height: 24px;
width: 14px;
z-index: 900;
background: #fafafa url(images_gray/fhbg.gif) repeat-x bottom;
border: 0px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
top: 0px;
left: 0px;
margin-top: 1px;
cursor: pointer;
display: block;
}
增加
border-right: 1px solid #ccc;

.flexigrid div.hDiv th.thOver div, .flexigrid div.hDiv th.sorted.thOver div
{
    /*border-bottom: 1px solid orange;*/
    padding-bottom: 4px;
}

.flexigrid div.hDiv td.cth
{
/*
    border-right:solid 2px #eee;  
*/
padding-right: 2px;
}</pre>
 

43 楼 matychen 2010-05-26  

chen8401314 写道

LZ，这个插件在列百分比上真的没法改造了么，自己尝试了N种办法总不能达到最好效果。。。

不知道你动手做了，遇到其他问题，还是没动手做。

//源码828行
if (cm.width){
					var aa=cm.width+"";
//					alert(aa);
//					alert(aa.substring(0,2));
					aa= new Number(aa.substring(0,2));//去掉百分号啊
//					alert(aa);
//					alert(new Number(p.width));
//					p.width:为你配置的表格宽度
					//为什么-100,自己慢慢试出来的-_-!
					aa=(aa/100).toFixed(3)*(new Number(p.width)-100);
//					alert(aa);
						$(th).attr('width', aa);
				}

colModel : [{
			            display : 'ID',
			            name : 'id',
			            width : "10%",// 得加上 要不IE报错
			            sortable : true,
			            align : 'center'
		            }, {
			            display : '商品名称',
			            name : 'name',
			            width : "10%",
			            sortable : true,
			            align : 'center'
		            }, {
			            display : '标准',
			            name : 'stand',
			            width : "20%",
			            sortable : true,
			            align : 'center'
		            }, {
			            display : '单价',
			            name : 'money',
			            width : "30%",
			            sortable : true,
			            align : 'center'
		            }, {
			            display : '库存',
			            name : 'leavings',
			            width : "10%",
			            sortable : true,
			            align : 'center'
		            }, {
			            display : '已经订购',
			            name : 'orders',
			            width : "20%",
			            sortable : true,
			            align : 'center'
		            }],

还有个问题没解决的就是点击表头的时候那个旁边的显示隐藏列，最右边的那条竖线不见了，等有时间了，再看看吧。

42 楼 chen8401314 2010-05-26  

LZ，这个插件在列百分比上真的没法改造了么，自己尝试了N种办法总不能达到最好效果。。。

41 楼 loveExtJs 2010-05-21  

楼主，有空能帮我看看嘛？谢谢了
我搞不定啊。

40 楼 matychen 2010-05-21  

这个就不清楚了呢，你再看看啊，现在没在公司。

39 楼 loveExtJs 2010-05-21  

matychen 写道

loveExtJs 写道

请问楼主一个问题，能不能自动显示行号呢？ 1，2，3，4，5....显示下去。
老版本好像有，这个版本怎么设置呢？

多加一列，这列是id就行了啊

这一列代码怎么写呢？
具体怎么加呢？
就这样吗？
{
     display: '行号',
     name: 'id',
     width: 100,
     sortable: false,
     align: 'left'
  }
老版本没有问题，搂主的版本加不上去啊。。。

38 楼 matychen 2010-05-21  

loveExtJs 写道

请问楼主一个问题，能不能自动显示行号呢？ 1，2，3，4，5....显示下去。
老版本好像有，这个版本怎么设置呢？

多加一列，这列是id就行了啊

37 楼 loveExtJs 2010-05-21  

请问楼主一个问题，能不能自动显示行号呢？ 1，2，3，4，5....显示下去。
老版本好像有，这个版本怎么设置呢？

36 楼 matychen 2010-05-07  

zhangbo198294 写道

选择蓝色主题 如果没有数据 显示有问题

我这边没有任何问题啊？你看看你的服务端返回数据没？跟踪一下，一般这种情况是你的服务端没有弄好，没有相关数据返回客户端。

35 楼 zhangbo198294 2010-05-04  

选择蓝色主题 如果没有数据 显示有问题

34 楼 yifeng 2010-04-29  

<div class="quote_title">joehe 写道</div>
<div class="quote_div">
<p>EXT的效果</p>
<p><img src="http://dl.iteye.com/upload/attachment/215912/87636d86-dfcd-3d1d-bfa3-52591ff8ea04.jpg" alt="" width="855" height="582"></p>
<p><img src="http://dl.iteye.com/upload/attachment/215914/087de71e-897c-384f-ad26-f28e27cf4c68.jpg" alt="" width="743" height="497"></p>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>哥们这界面用什么做的？能否分享下？</p>
<p>[e-mail]</p>
<p> </p>
<p>多谢哈</p>