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格式的封装
来源：