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格式的封装
来源：
相关推荐
- **引入库文件**：在HTML文档中，需要引入jQuery库（如`jquery-1.5.min.js`）、FlexiGrid主文件（如`flexigrid.js`）以及可选的压缩包文件（如`flexigrid.pack.js`）。 - **配置FlexiGrid**：通过JavaScript设置...
资源名称：Jquery flexigrid使用 中文WORD版内容简介：本文...主要的js文件：jquery.js,flexigrid.js,query.js,thickbox.js,util.js；希望本文档会给有需要 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
2. **数据源**：Flexigrid.js可以与各种数据源配合使用，包括JSON、XML、CSV等，只需提供正确的数据格式和URL，就能动态加载和展示数据。 3. **功能丰富**：它内置了多项功能，如排序（asc/desc）、分页、搜索、...
- `flexigrid.js`: Flexigrid的核心文件，实现表格的展示和交互逻辑。 - `query.js`: 自定义的Flexigrid扩展，定义了界面显示和函数触发。 - `thickbox.js`: Thickbox插件，用于弹出模态窗口。 - `util.js`: ...
这些文件通常包括jquery.js、flexigrid.js和相应的样式表。 2. 初始化表格：在需要展示数据的元素上应用flexigrid，通过设置相关参数来定制表格功能。例如： ```html <table id="flex1"></table> ``` ```javascript...
这通常包括`flexigrid.css`和`jquery.flexigrid.js`。同时，别忘了引入jQuery库，因为Flexigrid依赖于jQuery。 2. HTML结构：创建一个基本的HTML表格，这是Flexigrid将填充数据的地方。表格的ID是Flexigrid识别的...
这个使用手册将详细介绍如何使用FlexiGrid以及其主要属性。 一、FlexiGrid概述 FlexiGrid是一个轻量级的JavaScript插件，类似于Ext Grid，它允许用户通过Ajax动态加载数据，并可从HTML表格直接转化。FlexiGrid支持...
总的来说，jQuery Flexigrid是一款功能强大且易于使用的表格组件，它简化了网页数据展示的开发过程，提供了丰富的交互体验。无论是简单的数据展示，还是复杂的业务逻辑处理，Flexigrid都能游刃有余地应对，是Web开发...
<link rel="stylesheet" href="css/flexigrid.css" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"> <script src="js/flexigrid.js" type="text/javascript"> ``` 3. **初始化...
<link rel="stylesheet" type="text/css" href="path/to/flexigrid.css"> <script src="path/to/jquery.js"> <script src="path/to/flexigrid.js"> ``` 2. **基本配置** 要创建一个FlexiGrid实例，首先需要...
**jQuery Flexigrid 前台排序实现详解** 在Web开发中，数据展示是一个重要的环节，而表格作为数据展示的常见形式，其排序功能尤为重要。jQuery Flexigrid是一款功能强大的表格插件，它提供了丰富的自定义选项和操作...
1. **jQuery基础**：Flexigrid是建立在jQuery库之上的，因此，理解jQuery的基本语法和API，如选择器、事件处理、DOM操作等，是使用Flexigrid的前提。jQuery简化了JavaScript的DOM操作，使得动态更新表格内容变得更加...
<script src="path/to/jquery.flexigrid.js"> ``` 2. 基本结构：在HTML中创建一个空的div作为FlexiGrid的容器。 ```html <div id="grid"></div> ``` 3. 初始化插件：使用jQuery选择器找到该div并调用flexigrid方法，...
- **JavaScript 文件**：主要包括`jquery.js`、`flexigrid.js`、`query.js`、`thickbox.js`和`util.js`。 - `jquery.js`：提供jQuery核心功能。 - `flexigrid.js`：Flexigrid插件的核心脚本。 - `query.js`：...
在“flexigrid.js”和“flexigrid.css”这两个核心文件中，JavaScript文件主要负责实现数据的动态加载和交互功能，而CSS文件则用于定义插件的样式，以确保其在页面上的美观呈现。 `jquery+flexigrid使用方法.doc`...
**Spring MVC + JPA + Jquery + Flexigrid 修改简单示例** 在现代Web开发中，Spring MVC作为Java企业级应用的主流框架，为开发者提供了强大的MVC（Model-View-Controller）架构支持。JPA（Java Persistence API）是...
$("#flex1").flexigrid({ url: 'post2.php', dataType: 'json', colModel : [ {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'}, {display: 'Name', name : 'name', width : 180...
jQuery简化了DOM操作、事件处理和动画效果，使得flexigrid的使用更加简单便捷。通过jQuery，开发者可以快速实现诸如行选择、分页、排序和搜索等功能。 在flexigrid中，一些关键功能包括： 1. **数据分页**：...
总结来说，这个“jquery+flexigrid+json的java例子”演示了如何利用jQuery进行前端交互，Flexigrid显示数据，JSON作为数据交换格式，以及Java处理后端逻辑。这是一个典型的前后端分离的Web应用架构，对于学习现代Web...
Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。这个例子对...