一、参考资料
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插件flexigrid使用总结与进一步优化》 在Web开发中，数据展示和交互是不可或缺的一部分。jQuery插件flexigrid是一款轻量级、功能强大的表格插件，能够帮助开发者快速构建具有分页、排序、搜索等功能的动态...
### JQuery插件FlexiGrid之完全配置与使用 #### 一、引言 FlexiGrid是一款基于jQuery的轻量级表格插件，它为开发者提供了简单易用的方式来展示和操作数据表格。FlexiGrid支持多种功能，如排序、分页、筛选等，非常...
Flexigrid是一款基于jQuery的强大的表格插件，它允许开发者将数据以美观、可操作的表格形式呈现出来，类似于知名的JavaScript框架ExtJS的表格组件。这个插件的主要优点在于其灵活性和可定制性，能够满足各种复杂的...
综上所述，FlexiGrid是一个强大的jQuery插件，它能帮助开发者快速构建具有高级特性的数据表格。通过灵活配置和丰富的API，你可以根据项目需求定制出满足各种需求的表格组件。在实际应用中，记得结合自己的数据源和...
Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。这个例子对...
Tablesorter是一个轻量级的jQuery插件，它可以对HTML表格进行排序，无需任何服务器端的支持。 接下来，我们需要对Flexigrid的表格元素应用Tablesorter。首先，确保已经正确引入了Tablesorter的相关库，然后在页面...
总的来说，jQuery插件flexigrid是一个强大的工具，为Web开发人员提供了一种高效的数据展示解决方案。通过深入理解和应用，你可以创建出具有专业水准的数据管理界面，提升用户的操作体验。对于PHP开发者来说，它更是...
jQuery与Flexigrid的结合使用在Web开发中常用于创建动态、交互性强的数据表格。Flexigrid是一款基于jQuery的插件，它提供了一种轻量级的方式来展示和操作网格数据，具有分页、排序、搜索等功能，特别适用于数据密集...
jQuery Flexigrid是一款基于jQuery库的表格插件，专为网页数据展示提供强大的功能。它具有高度可定制性，支持分页、排序、搜索以及自定义列宽，使得网页中的数据管理更加便捷和灵活。 Flexigrid的核心特性在于其...
在"jquery插件之flexigrid学习实例-jar包"中，我们主要关注的是如何将Flexigrid集成到基于Struts2和JSON的Java应用中。以下是对这个主题的详细讲解： 首先，让我们了解Flexigrid。Flexigrid是一款轻量级的...
总结来说，Flexigrid是jQuery生态中一款功能强大、易于使用的表格插件，对于需要展示和操作表格数据的Web应用来说，是一个值得考虑的选择。通过熟练掌握其配置和API，开发者可以构建出高性能、交互性强的数据展示...
在这个"jquery插件之flexigrid学习实例"中，我们将深入探讨如何在Struts2框架下结合JSON进行数据交互，以实现一个完整的应用。 首先，我们需要了解Flexigrid的基本使用方法。在HTML页面中，我们需要引入jQuery库和...
6. 插件扩展：利用jQuery插件机制，编写自己的扩展插件，实现更高级的功能，如拖拽列宽、列隐藏、列排序方式切换等。 通过以上介绍，我们可以了解到FlexiGrid的基本使用、功能扩展以及可能的改造方向。在实际开发中...
Flexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性，如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。 一个中文实例教程： http://www.javaeye.com/topic/414611
- **Ajax请求**：FlexiGrid使用jQuery的Ajax方法向服务器发送GET或POST请求，请求参数包括当前的排序条件、分页信息等。 - **服务器响应**：服务器接收到请求后，解析参数，执行相应的数据库操作，然后将结果集以...
Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
Flexigrid是一款基于jQuery的网格插件，它提供了一种灵活、强大的方式来展示和操作数据，常用于创建数据密集型的Web应用。这个插件以其丰富的功能、自定义选项和用户友好的界面而受到开发者的青睐。在与servlet结合...
JQuery FlexiGrid 插件是一款强大的数据网格组件，用于在网页中展示和管理结构化的数据。它提供了丰富的功能，包括排序、分页、搜索、编辑和自定义操作按钮等。下面将详细介绍FlexiGrid的配置和使用方法。 首先，你...
总结，"Spring MVC+JPA+Jquery+Flexigrid修改简单示例"是一个完整的Web应用开发案例，它涵盖了后端数据处理、前端交互以及数据展示等多个方面。这个示例可以帮助开发者快速理解并掌握这些技术的集成和使用，为构建...