`
matychen
  • 浏览: 172903 次
  • 性别: 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的下拉列表实现二级联动
评论
73 楼 hejh 2010-09-04  
请教1个问题，
在弹出的dialog窗里，通过dialog里的button再做一个弹出dialog窗，怎么实现？它们之间如何传递值？
72 楼 hejh 2010-09-04  
请教1个问题，
在弹出的dialog窗里，通过dialog里的button再做一个弹出dialog窗，怎么实现？它们之间如何传递值？
71 楼 shiren1118 2010-09-01  
jquery的ajax在gbk下乱码，问题很严重···
70 楼 matychen 2010-08-31  
locka 写道
比如本来第一列是name 第二列是age，第三列是grade，这三列顺序拖乱了后，就无法知道选中行的name是什么了，
如果能直接从grid中明确取得各列的值，就可以在赋值给弹出层界面的相应表单进行修改

我现在处理的方法是通过取得选中行的主键（通过id获得），在弹出修改层前ajax从数据库中再取一下赋给相应表单，感觉对字段比较少的表这样处理有点罗嗦。


另外在firefox下界面有个问题： 
<table width='100%'>
	<tr>
	<td width="200">&nbsp;</td>
	<td><table id="flex" style="display: none"></table></td>
	</tr>
</table>

我把flex放在一个table的第二列，第一列固定宽度，flexgrid的width='auto',grid一共三列，每列固定宽度100，在firefox下flexgrid的宽度总是很宽，出现左右scrollbar，在ie6 ie7下没问题


第一个问题，你得到了他的id，你可以用jquery得到这个<tr id="1">下面的其他列的值啊。
第二个问题，我还没遇到过，没有固定宽度的需求。不过可以改改代码，你在firefox下面用firebug调试看看。
69 楼 locka 2010-08-31  
比如本来第一列是name 第二列是age，第三列是grade，这三列顺序拖乱了后，就无法知道选中行的name是什么了，
如果能直接从grid中明确取得各列的值，就可以在赋值给弹出层界面的相应表单进行修改

我现在处理的方法是通过取得选中行的主键（通过id获得），在弹出修改层前ajax从数据库中再取一下赋给相应表单，感觉对字段比较少的表这样处理有点罗嗦。


另外在firefox下界面有个问题： 
<table width='100%'>
	<tr>
	<td width="200">&nbsp;</td>
	<td><table id="flex" style="display: none"></table></td>
	</tr>
</table>

我把flex放在一个table的第二列，第一列固定宽度，flexgrid的width='auto',grid一共三列，每列固定宽度100，在firefox下flexgrid的宽度总是很宽，出现左右scrollbar，在ie6 ie7下没问题
68 楼 matychen 2010-08-31  
locka 写道
修改或删除操作前，如果gird的列的顺序拖动改变了，根据列顺序获得关键列值就不对了，有没有根据列名获取列值的方法？


 // 获取选中的行，返回选中行的主键
    $.fn.getCheckedRows = function () {
        if (this[0].grid) {
            return this[0].grid.getCheckedRows();
        }
        return [];
    };
    // 获取选中的行，返回选中行的所有数据
    $.fn.getSelectedRows = function () {
        if (this[0].grid) {
            return this[0].grid.getSelectedRows();
        }
        return [];
    };


没有根据列名取得列值的方法。不过能知道行了，取得这列的值应该比较容易了吧，不知道你要实现什么功能。
67 楼 locka 2010-08-30  
修改或删除操作前，如果gird的列的顺序拖动改变了，根据列顺序获得关键列值就不对了，有没有根据列名获取列值的方法？
66 楼 matychen 2010-08-15  
xyczx 写道
我发现在IE8下，快速搜索失效了，就是那个query的值在服务端取不到了，而qtype的值能取到，请楼主留意一下

如果你有时间可以看看源码，比较简单的，就是和平常的ajax请求一样的。
65 楼 xyczx 2010-08-15  
我发现在IE8下，快速搜索失效了，就是那个query的值在服务端取不到了，而qtype的值能取到，请楼主留意一下
64 楼 matychen 2010-08-04  
phoenix_85 写道
楼主，为什么不把jquery easyUI改一改呢，jquery easyUI里有个gridTable,如果用一整套的UI更好，flexigrid的功能确实 比jquery easyUI中的gridrTable强大

上次看见了，现在没什么事情看。不过你可以自己先看看啊。
63 楼 phoenix_85 2010-08-03  
楼主，为什么不把jquery easyUI改一改呢，jquery easyUI里有个gridTable,如果用一整套的UI更好，flexigrid的功能确实 比jquery easyUI中的gridrTable强大
62 楼 matychen 2010-08-02  
eimsteim 写道
matychen 写道
lyyb2001 写道
如何对colModel 的各列设置样式(class),如何设置colModel 的各列宽度的百分比

你可以用firebug查看它的样式设置，
列的宽度不能设置百分比，只能设置px；



没错，但是令人高兴的是，它支持变量和计算式
也就是可以变相做百分比了
奇怪的是，我做成百分比显示以后，总是会出现横向滚动条
上面有人发帖问过了，不知道还有没有人遇到过？

你的百分比显示 ，在最里层的div里面还是px还是百分比？这个你要弄清楚。如果不能随着外面表格的变化列的宽度也跟着变化，那还是不是很好。
做成百分比的宽度了，列宽的变化不好控制了。
61 楼 eimsteim 2010-08-02  
matychen 写道
lyyb2001 写道
如何对colModel 的各列设置样式(class),如何设置colModel 的各列宽度的百分比

你可以用firebug查看它的样式设置，
列的宽度不能设置百分比，只能设置px；



没错，但是令人高兴的是，它支持变量和计算式
也就是可以变相做百分比了
奇怪的是，我做成百分比显示以后，总是会出现横向滚动条
上面有人发帖问过了，不知道还有没有人遇到过？
60 楼 zqding 2010-07-28  
LZ总结的很好，学习了
59 楼 javabrother 2010-07-17  
matychen 写道
javabrother 写道
matychen 写道
javabrother 写道
楼主写的很好，
有两个问题需要请教下，
1.像楼主列表里面的数据，我想实现 库存这个标题居中，下面的数据靠右，商品名称居中，下面的数据靠坐，怎么调试？
2.UI里面的按钮，我想把他放到头部，能实现吗？
谢谢！

1.你可以用firebug调试，看看他的属性，你说的这个功能如果你不改源码的话，你可以用jquery操作修改。
2.你说的是放到title栏吗？你可以修改源码，或者自己手动的在title栏，用jquery加入相关按钮

第二個問題已經解決了，第一個問題一直困擾著！謝謝斑竹


第一个问题，你用firebug看看他的class是哪个？自己手动的在页面写一个试一试。


這個問題已經ok了，呵呵！

合併數據的單元格又是個麻煩事！
58 楼 matychen 2010-06-28  
javabrother 写道
matychen 写道
javabrother 写道
楼主写的很好，
有两个问题需要请教下，
1.像楼主列表里面的数据，我想实现 库存这个标题居中，下面的数据靠右，商品名称居中，下面的数据靠坐，怎么调试？
2.UI里面的按钮，我想把他放到头部，能实现吗？
谢谢！

1.你可以用firebug调试，看看他的属性，你说的这个功能如果你不改源码的话，你可以用jquery操作修改。
2.你说的是放到title栏吗？你可以修改源码，或者自己手动的在title栏，用jquery加入相关按钮

第二個問題已經解決了，第一個問題一直困擾著！謝謝斑竹


第一个问题，你用firebug看看他的class是哪个？自己手动的在页面写一个试一试。
57 楼 javabrother 2010-06-28  
matychen 写道
javabrother 写道
楼主写的很好，
有两个问题需要请教下，
1.像楼主列表里面的数据，我想实现 库存这个标题居中，下面的数据靠右，商品名称居中，下面的数据靠坐，怎么调试？
2.UI里面的按钮，我想把他放到头部，能实现吗？
谢谢！

1.你可以用firebug调试，看看他的属性，你说的这个功能如果你不改源码的话，你可以用jquery操作修改。
2.你说的是放到title栏吗？你可以修改源码，或者自己手动的在title栏，用jquery加入相关按钮

第二個問題已經解決了，第一個問題一直困擾著！謝謝斑竹
56 楼 matychen 2010-06-27  
javabrother 写道
楼主写的很好，
有两个问题需要请教下，
1.像楼主列表里面的数据，我想实现 库存这个标题居中，下面的数据靠右，商品名称居中，下面的数据靠坐，怎么调试？
2.UI里面的按钮，我想把他放到头部，能实现吗？
谢谢！

1.你可以用firebug调试，看看他的属性，你说的这个功能如果你不改源码的话，你可以用jquery操作修改。
2.你说的是放到title栏吗？你可以修改源码，或者自己手动的在title栏，用jquery加入相关按钮
55 楼 javabrother 2010-06-27  
楼主写的很好，
有两个问题需要请教下，
1.像楼主列表里面的数据，我想实现 库存这个标题居中，下面的数据靠右，商品名称居中，下面的数据靠坐，怎么调试？
2.UI里面的按钮，我想把他放到头部，能实现吗？
谢谢！
54 楼 matychen 2010-06-22  
jqwang518 写道
请问如何在表格的数据里添加超链接？在colmodel中的function属性？

}, {
			display : '标准',
			name : 'stand',
			width : 100,
			sortable : true,
			align : 'center',
			jiagong : function(value) {//加工过后
				return "<a href='#' >" + value + "<a/>";
			}
		}, {

源码423行左右 
  if (p.colModel) {
							    for (j = 0; j < p.colModel.length; j++) {
								    var cm = p.colModel[j];
								    // 取列名
								    var seleceName = cm.name;
								    // json Bug修复://打包文件中未加入,请自行加入
								    if (typeof(data.rows[i][seleceName]) == 'undefined') {
									    data.rows[i][seleceName] = ''
								    }
								    // 过滤key
								    $.each(data.rows[i], function(x, y) {
								    	if(seleceName == x&&cm.jiagong){
								    		tdVal.push(cm.jiagong(y));
								    	} else if (seleceName == x) {
										        tdVal.push(y)
									        }
								        })
							    }
						    }


剩下的看你自己发挥了，临时想的，难免有不足，已经能初步运行。
发表评论

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

相关推荐

    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学习实例

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

    jquery 表格插件 Flexigrid

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

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

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

    jquery表格插件flexigrid-1.1.zip

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

    jquery flexigrid插件

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

    Jquery FlexiGrid JS

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

    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