Jquery.flexigrid使用手册
编写人：孟令国
编写日期：2010-8-23
一、 编写目的
对于项目开发中，不可避免的需要使用一些grid。对于由div标签或者table标签拼接而成的表格，无论从外观还有实用性都较差。在资料搜集过程中找到jquery此插件。对于功能和外观均是完美的表现。为了在以后使用中能够更好、更快速的开发实用的功能，撰写此文档。
二、 前提条件
对于一个项目如果想要使用flexigrid，需要满足以下条件（版本兼容性不在此说明）。
1、 jquery.js(原则上版本在1.3以上。)
2、 flexigrid.js
3、 其他需要扩展功能的插件。
三、 使用说明
对于flexigrid的使用分为如下几个步骤，总体来说，分为前台表现层，与后台业务处理。
1、 前台表现层：
<script type="text/javascript">
$(document).ready(function(){
//table初始化
var grid=$("#JUserTable").flexigrid({
width: 695,//表格宽度
height: 270,//表格高度
url: '<%=basePath %>admin/UserManagerServlet',//数据请求地址
dataType: 'json',//请求数据的格式
colModel : [//表格的题头与索要填充的内容。
{display: '用户ID', name : 'userId', width : 40, sortable : true, align: 'center',toggle : false},//sortable:是否用于排序
{display: '登陆名称', name : 'userName', width : 80, sortable : true, align: 'center'},
{display: '密码管理', name : 'userPwd', width : 80, sortable : true, align: 'center'},
{display: '真实姓名', name : 'userRealName', width : 80, sortable : true, align: 'center'},
{display: '权限', name : 'userPower', width : 80, sortable : true,hide:true, align: 'center'},
{display: '当前状态', name : 'userState', width : 80, sortable : true, align: 'center'},
{display: '创建时间', name : 'userCreateTime', width : 160, sortable : true, align: 'center'}
],
buttons : [//表格上面的按钮
{name: 'add', displayname: '新增', bclass: 'add' ,onpress: toolbarItem},
{separator: true},
{name: 'modify', displayname: '修改', bclass: 'modify',onpress: toolbarItem},
{separator: true},
{name: 'delete', displayname: '删除', bclass: 'delete',onpress: toolbarItem}
],
searchitems : [//查询条件
{display: '登陆名称', name : 'userName',isdefault:true},
{display: '真实姓名', name : 'userRealName'}
],
errormsg: '发生异常',//发生异常时提示信息
sortname: "userId",//默认排序字段名称
sortorder: "desc",//升序还是降序
usepager: true,
title: '后台用户管理',//标题信息
pagestat: '显示记录从{from}到{to}，总数 {total} 条',//分页显示信息
useRp: true,
rp: 10,//默认分页条数
rpOptions: [10,20,50], //可选择设定的每页结果数
nomsg: '没有符合条件的记录存在',
minColToggle: 1, //允许显示的最小列数
showTableToggleBtn: true,
autoload: true, //自动加载，即第一次发起ajax请求
resizable: false, //table是否可伸缩
procmsg: '加载中, 请稍等 ...',
hideOnSubmit: true, //是否在回调时显示遮盖
blockOpacity: 0.5,//透明度设置
onDblclick:selectDblclick, //设置双击功能
showcheckbox: true,//是否显示第一列的checkbox（用于全选）
gridClass: "bbit-grid"//样式
});
function selectDblclick(rowid){ //根据传入的行号进行操作
}
//按钮操作函数
function toolbarItem(com, grid)
//删除记录
if (com=='delete'){
if($('.trSelected',grid).length==0){
hiAlert("请选择要删除的数据!");
}else{
hiConfirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?', '操作提示', function(r) {
if(r){
var ids ="";
$('.trSelected td:nth-child(2)',grid).each(function(){
ids+=","+$(this).text();
});
ids=ids.substring(1);
$.ajax({
type: "POST",
url: "<%=basePath %>admin/UserManagerServlet?action=delete",
data: "ids="+ids,
dataType:"text",
success: function(msg){
if(msg=="success"){
hiAlert("操作成功！");
$("#JUserTable").flexReload();
}else{
hiAlert("有错误发生,msg="+msg);
}
},
error: function(msg){
hiAlert("msg="+msg);
}
});
}
});
}
//增加记录
}else if (com=='add'){
var returnValue = window.showModalDialog('user_add.jsp','title','=yes;resizable=no;help=no;status=no;dialogHeight=600px;dialogWidth=530px');
if(returnValue == "ok"){
$('#JUserTable').flexReload();
}
//更改记录
}else if (com=='modify'){
if($(".trSelected",grid).length==1){
var id=$('.trSelected td:nth-child(2)',grid).text();
var returnValue = window.showModalDialog('user_add.jsp?action=update&UId='+id,'title','=yes;resizable=no;help=no;status=no;dialogHeight=600px;dialogWidth=530px');
if(returnValue == "ok"){
$('#JUserTable').flexReload();
}
}else if($(".trSelected",grid).length>1){
hiAlert("请选择一个修改,不能同时修改多个记录!");
}else if($(".trSelected",grid).length==0){
hiAlert("请选择一个您要修改的记录!")
}
}
}
}
);
//用户密码初始化
function init_pwd(userId){
hiConfirm('你确定对该用户密码初始化?', '操作提示', function(r) {
if(r){
$.ajax({
type: "POST",
url: "<%=basePath %>admin/UserManagerServlet?action=initPwd",
data: "userId="+userId,
dataType:"text",
success: function(msg){
if(msg=="success"){
hiAlert("操作成功！");
$("#JUserTable").flexReload();
}else{
hiAlert("有错误发生,msg="+msg);
}
},
error: function(msg){
hiAlert("msg="+msg);
}
});
}
});
}
//用户状态更改
function change_state(userId){
hiConfirm('你确定更改该用户的状态?', '操作提示', function(r) {
if(r){
$.ajax({
type: "POST",
url: "<%=basePath %>admin/UserManagerServlet?action=changeState",
data: "userId="+userId,
dataType:"text",
success: function(msg){
if(msg=="success"){
hiAlert("操作成功！");
$("#JUserTable").flexReload();
}else{
hiAlert("有错误发生,msg="+msg);
}
},
error: function(msg){
hiAlert("msg="+msg);
}
});
}
});
}
</script>
<table id="JUserTable" style="display:none"></table>
在此示例代码中，有一下几点说明：
第一：使用了第三方提示信息插件，HiAlert。如无此插件，可用js默认的alert代替。
第二：json的数据格式（后台处理），与表格题头信息的关联。如果没有显示数据的必要，只能隐藏，而不能不写。
第三：数据加载方式为ajax异步调用。
2、 后台处理：
在此后台业务处理采用servlet处理。采用什么方式处理关系不大。
第一：json格式的封装
来源：
相关推荐
Jquery FlexiGrid JS 前后台数据的传值、对象 前台使用FlexiGrid 插件显示数据条数 注意：action层变量名对应
资源名称：Jquery flexigrid使用 中文WORD版内容简介：本文...主要的js文件：jquery.js,flexigrid.js,query.js,thickbox.js,util.js；希望本文档会给有需要 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
jquery+flexigrid使用方法.pdfjquery+flexigrid使用方法.pdf
jquery flexigrid；jquery flexigrid
flexigrid.jsflexigrid.jsflexigrid.jsflexigrid.jsflexigrid.jsflexigrid.jsflexigrid.js
FlexiGrid使用手册，主要介绍FlexiGrid的主要属性和使用方法。
JQuery_插件FlexiGrid_之完全配置与使用
jquery flexigrid与jquery tablesort 配合实现flexigrid的客户端排序功能。jsp项目，无需数据库即可运行
jquery表格插件Flexigrid 将数据按照表格排列，类似与ext。
NULL 博文链接：https://zhy6599.iteye.com/blog/1098301
$("#flex1").flexigrid({ url: 'post2.php', dataType: 'json', colModel : [ {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'}, {display: 'Name', name : 'name', width : 180...
NULL 博文链接：https://gundumw100.iteye.com/blog/531131
Flexigrid与struts2 说明，还有Flexigrid的使用说明和Flexigrid的实例。Flexigrid的包。
jquery+flexigrid+json的java例子（网上收集的） 适合初学的兄弟姐妹们参考~~
struts2.1.6+spring+hibernate+jquery+flexigrid+thickbox+mysql Struts2返回Json类型，分页显示在flexigrid表中 下载后进行评价获得积分：评价时要选择五角星才能获取积分，不然分数还是会被扣除
struts2+spring3+hibernate3+jquery+flexigrid+mysql实例
Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
jquery 表格插件 Flexigrid
Flexigrid-Web2.0 jQuery表格插件 Flexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性，如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。 一个中文实例教程： ...
flexigrid表格插件 非常漂亮的表格插件