FlexiGrid使用手册
一、概览
Flexigrid是一个基于jQuery开发的Grid，与 Ext Gird类似。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
它的功能包括：
s 调整列宽
s 合并列标题
s 自定义查找
s 隐藏列
s 隔行变色
s 行扩展事件
s 动态注册外部参数
s 分页
s 排序
s 显示/隐藏表格等。
二、环境准备
首先.去官网http://www.flexigrid.info/下载FlexiGrid .下载完成后,解压缩文件得到如下目录结构：
flexigrid-1.1
+css
+images
+bg.gif
+btn-sprite.gif
+…
+flexigrid.css
+flexigrid.pack.css
+js
+flexigrid.js
+flexigrid.pack.js
其中css文件夹为FlexiGrid的css样式表文件及所需的图片，js文件夹为FlexiGrid的js文件
三、实例
1.在MyEclipse下新建Web project,命名为flexiGridDemo
2.把FlexiGrid包下所有的文件拷贝到WebRoot下
3.修改index.jsp页面
1)将FlexiGrid的样式表文件和js文件引入到页面
<link href="css/flexigrid.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> <script src="js/jquery.flexigrid.js" type="text/javascript"></script>
2)在<body>中增加FlexiGrid的容器
<div id="ptable" style="margin: 10px">
<table id="flexTable" style="display: none"></table>
</div>
3）编写生成FlexiGrid的js代码：
<script type="text/javascript">
$(document).ready(function(){
var grid=$("#flexTable").flexigrid({
width: 760,
height: 280,
url: 'flexGridServlet.do',
dataType: 'json',
colModel : [
{display: '编号',
name : 'id',
width : 50,
sortable : true,
align: 'center',
hide: false,
toggle : false
},
{display: '工作名称',
name : 'job_name',
width : 250,
sortable : false,
align: 'center'
},
{display: '工作地址',
name : 'work_address',
width : 100,
sortable : true,
align: 'center'
},
{display: '工资',
name : 'salary',
width : 60,
sortable : true,
align: 'right',
process:formatMoney
},
{display: '日期',
name : 'date',
width : 120,
sortable : true,
align: 'center'
},
{display: '语言',
name : 'language',
width : 80,
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 : 'id', isdefault: true},
{display: '工作名称', name : 'job_name'},
{display: '工作地址', name : 'work_address'},
{display: '语言', name : 'language'}
],
errormsg: '发生异常',
sortname: "id",
sortorder: "desc",
usepager: true,
title: '信息发布管理Flexigrid',
pagestat: '显示记录从{from}到{to}，总数{total}条',
useRp: true,
rp: 10,
rpOptions: [10, 15, 20, 30, 40, 100],
nomsg: '没有符合条件的记录存在',
minColToggle: 1,
showTableToggleBtn: true,
autoload: true,
resizable: false,
procmsg: '加载中, 请稍等 ...',
hideOnSubmit: true,
blockOpacity: 0.5,
showcheckbox: true,
gridClass: "bbit-grid",
rowhandler: false,
rowbinddata: true,
onrowchecked: callme
});
function callme(){
alert("选中了");
}
function toolbarItem(com, grid) {
if (com=='delete'){
deleteMe();
}else if (com=='add'){
openDialogAdd();
}else if (com=='modify'){
openDialogModify();
}
}
//操作函数
function formatMoney(value, pid) {
return "￥" + parseFloat(value).toFixed(2);
}
function openDialogAdd(){
}
function openDialogModify(){
}
function deleteMe(){
}
});
</script>
4)编写后台代码
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache, must-revalidate");
response.setHeader("Pragma", "no-cache");
String sql = "";
// 当前第几页
String pageIndex = request.getParameter("page");
// 每页多少条
String pageSize = request.getParameter("rp");
// 条件字段值ֵ
String query = new String(request.getParameter("query").getBytes("ISO8859-1"), "UTF-8");
// 条件字段
String qtype = request.getParameter("qtype");
// 排序字段
String sortname = request.getParameter("sortname");
// desc or asc
String sortorder = request.getParameter("sortorder");
// 操作符
String qop = request.getParameter("qop");
int count = 0;
List list = null;
try {
sql = "select count(*) from job_info1" ;
if (!query.equals("")) {
sql += " where " + qtype + " like " + "'%" + query + "%'";
}
count = db.executeQuery(sql);
sql = "select * from job_info1";
if (!query.equals("")) {
sql += " where " + qtype + " like " + "'%" + query + "%'";
}
sql += " order by " + sortname + " " + sortorder;
sql += " limit " + ((Integer.parseInt(pageIndex) - 1) * Integer.parseInt(pageSize)) + "," + pageSize;
list = db.executeQueryList(sql);
if (list == null) {
System.out.println("======出错啦======");
return;
}
} catch (Exception e) {
e.printStackTrace();
}
Map map = new HashMap();
map.put("page", pageIndex);
map.put("total", count + "");
// to JSON
String json = toJSON(list, map);
response.getWriter().write(json);
response.getWriter().flush();
response.getWriter().close();
5）配置web.xml
<servlet>
<servlet-name>flexGridServlet</servlet-name>
<servlet-class>servlet.FlexiGridServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>flexGridServlet</servlet-name>
<url-pattern>/flexGridServlet.do</url-pattern>
</servlet-mapping>
6)sql脚本
CREATE TABLE `job_info1` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`job_name` varchar(255) DEFAULT NULL,
`date` varchar(255) DEFAULT NULL,
`work_address` varchar(255) DEFAULT NULL,
`salary` varchar(255) DEFAULT NULL,
`language` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=163 DEFAULT CHARSET=gbk;
INSERT INTO job_info1 VALUES ('3', '我的名声', '2009-12-04', '2009', '30.01', '英文');
INSERT INTO `job_info1` VALUES ('14', '14', '2009-12-05', '14io', '14.51', '英文');
INSERT INTO `job_info1` VALUES ('15', '15', '15', '15', '15.2', '中文');
INSERT INTO `job_info1` VALUES ('111', '111', '2009-12-04', '111', '12.2', '中文');
INSERT INTO `job_info1` VALUES ('116', 'qqq', '2009-12-01', 'www', '11.00', '英文');
INSERT INTO `job_info1` VALUES ('120', '12', '2009-12-15', '12', '3234.00', '中文');
INSERT INTO `job_info1` VALUES ('121', '我的k', '2009-12-04', '说到底', '10000', '英文');
INSERT INTO `job_info1` VALUES ('122', '我的kk', '2009-12-04', '啊可怜的', '10', '英文');
INSERT INTO `job_info1` VALUES ('123', '去1', '2009-12-07', 'iwio', '10', '英文');
INSERT INTO `job_info1` VALUES ('124', '1噢o', '2009-12-08', '2030', '1900', '中文');
INSERT INTO `job_info1` VALUES ('129', '其实', '2009-12-08', '阿斯科', '221', '英文');
INSERT INTO `job_info1` VALUES ('131', '其实', '2009-12-08', '阿斯科', '221', '英文');
INSERT INTO `job_info1` VALUES ('134', '世界', '2009-12-08', '东方方法', '14.00', '中文');
INSERT INTO `job_info1` VALUES ('135', '就啊是', '2009-12-08', '可看到', '22.00', '英文');
INSERT INTO `job_info1` VALUES ('136', '就啊是', '2009-12-08', '阿斯', '22.00', '中文');
INSERT INTO `job_info1` VALUES ('137', '世康', '2009-12-08', '萨芬成都市', '123', '英文');
INSERT INTO `job_info1` VALUES ('138', '显示卡', '2009-12-08', '收到反看', '123', '中文');
INSERT INTO `job_info1` VALUES ('139', '1东方法', '2009-12-08', '244ss', 'www', '中文');
INSERT INTO `job_info1` VALUES ('140', '发卡量', '2009-12-08', 'w', '45', '中文');
INSERT INTO `job_info1` VALUES ('141', '晚上', '2009-12-10', '时间', '100', '英文');
INSERT INTO `job_info1` VALUES ('142', '阿克接口', '2009-12-10', '问问', '10', '英文');
INSERT INTO `job_info1` VALUES ('143', 'wwwree', '2009-12-10', '23', '300.00', '英文');
INSERT INTO `job_info1` VALUES ('144', '111', '2009-12-10', '122', '12.00', '中文');
INSERT INTO `job_info1` VALUES ('145', '23456', '2009-12-10', '山东省', '1211', '英文');
INSERT INTO `job_info1` VALUES ('146', '请求权', '2009-12-25', '2111', '11112', '英文');
INSERT INTO `job_info1` VALUES ('148', '12112', '2009-12-10', '3', '22', '中文');
INSERT INTO `job_info1` VALUES ('149', '222', '2009-12-10', '121', '2121', '中文');
INSERT INTO `job_info1` VALUES ('150', '失算', '2009-12-10', '却完全', '1', '中文');
7）启动tomcat测试页面
四、API详解
1.FlexiGrid属性：
height:
默认值200, flexigrid的高度，单位为px
width:
默认值'auto', flexigrid的宽度，auto表示根据每列的宽度自动计算
striped:
默认值true, 是否显示斑纹效果，默认是奇偶交互的形式
novstripe:
默认值false,是否显示垂直分隔条，默认显示
minwidth:
默认值30, flexigrid列的最小宽度
minheight:
默认值80, flexigrid列的最小高度
resizable:
默认值false, 是否可调整大小
url:
默认值false, ajax方式获取数据对应的url地址
method:
默认值'POST', 数据发送方式
dataType:
默认值'json', 数据加载的类型，xml,json
errormsg:
默认值'发生错误', 错误提升信息
usepager:
默认值false, 是否显示分页条
nowrap:
默认值true, 是否不换行
page:
默认值1, 默认当前页
total:
默认值1,总页数
useRp:
默认值true, 是否可以动态设置每页显示的结果数
rp:
默认值25,默认每页显示的结果数
rpOptions:
默认值[10, 15, 20, 25, 40, 100], 可选择设定的每页结果数
title:
默认值false,标题
pagestat:
默认值'显示记录从{from}到{to}，总数 {total} 条', 显示当前页和总页面的样式
procmsg:
默认值 '正在处理数据，请稍候 ...', 正在处理的提示信息
query:
默认值'', 搜索查询的条件
qtype:
默认值'', 搜索查询的类别
qop:
默认值"Eq", 搜索的操作符
nomsg:
默认值'没有符合条件的记录存在', 无结果的提示信息
minColToggle:
默认值1, 最少保留的列数
showToggleBtn:
默认值true, 是否显示隐藏列按钮
hideOnSubmit:
默认值true, 提交时是否显示遮盖
showTableToggleBtn:
默认值false, 是否显示伸缩按钮
autoload:
默认值true, 是否自动加载
blockOpacity:
默认值0.5, 透明度设置
onToggleCol:
默认值false,隐藏列时触发的函数
onChangeSort:
默认值false, 当改变排序时触发的函数
onSuccess:
默认值false, 成功后执行的函数
onSubmit:
默认值false, 调用自定义的函数
showcheckbox:
默认值false, 是否显示第一列的checkbox（用于全选）
rowhandler:
默认值false,启用行的扩展事件功能,在生成行时绑定事件，如双击，右键等
rowbinddata:
默认值false,配合上一个操作，如在双击事件中获取该行的数据
extParam:
默认值{},添加extParam参数可将外部参数动态注册到grid，实现如查询等操作
gridClass:
默认值"bbit-grid",flexigrid的样式
onrowchecked:
默认值false,在每一行的的checkbox选中状态发生变化时触发某个事件
2.FlexiGrid的方法：
flexigrid(p):
根据属性p创建flexigrid
flexReload(p)
根据属性p重新加载flexigrid
flexResize(w,h)
重新指定flexigrid宽度和高度
ChangePage(type)
改变当前页
flexOptions(p)
更新Option
GetOptions
获取Option
getCheckedRows
获取选中的行
flexToggleCol(cid, visible)
重新加载flexigrid
flexAddData(data)
为flexigrid增加数据
noSelect(p)
禁止选中
FlexiGrid使用手册的更多相关文章
- FREERTOS 手册阅读笔记
郑重声明,版权所有! 转载需说明. FREERTOS堆栈大小的单位是word,不是byte. 根据处理器架构优化系统的任务优先级不能超过32,If the architecture optimized ...
- JS魔法堂:不完全国际化&本地化手册 之 理論篇
前言 最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...
- 转职成为TypeScript程序员的参考手册
写在前面 作者并没有任何可以作为背书的履历来证明自己写作这份手册的分量. 其内容大都来自于TypeScript官方资料或者搜索引擎获得,期间掺杂少量作者的私见,并会标明. 大部分内容来自于http:/ ...
- Redis学习手册(目录)
为什么自己当初要选择Redis作为数据存储解决方案中的一员呢?现在能想到的原因主要有三.其一,Redis不仅性能高效,而且完全免费.其二,是基于C/C++开发的服务器,这里应该有一定的感情因素吧.最后 ...
- JS魔法堂:不完全国际化&本地化手册 之 实战篇
前言 最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...
- Windows API 函数列表 附帮助手册
所有Windows API函数列表,为了方便查询,也为了大家查找,所以整理一下贡献出来了. 帮助手册:700多个Windows API的函数手册 免费下载 API之网络函数 API之消息函数 API之 ...
- linux命令在线手册
下面几个网址有一些 Linux命令的在线手册,而且还是中文的,还可以搜索.非常方便 Linux命令手册 Linux命令大全 Linux中文man在线手册 每日一linux命令
- Mysql完全手册（笔记二，使用数据与性能优化）
一.使用数据 1.使用变量 MySQL也可以让我们以用户自定义的变量来存储select查询的结果,以便在将来select查询中使用.它们只会在客户会话期间存在,但是它们提供一个方便有效的方法来连接查询 ...
- html javascript css3 php3.2.3离线手册
各位新年快乐! 愿大家"愿有前程可奔赴,也有岁月可回头"! 发现个离线手册很全的网站,分享大家,也mark自用. http://www.shouce.ren/ 手册网
随机推荐
- c# serialport读取不限数量的16进制数据
//private char[] HexChar = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', ' ...
- asp.net webapi 多文件上传
使用enctype="multipart/form-data"来进行操作 /// <summary> /// 上传图片 /// </summary> /// ...
- 关于sql中去换行符的问题
今天要用bootstrap开发一个网页,要使用到JSON,但是JSON的格式不正确,然后在http://www.bejson.com/[Be JSON]中测试了一下JSON. 发现JSON中多了一个换 ...
- Android有关JNI 学习（两）为JNI方法名称，数据类型和方法签名的一些知识
我们知道,使用javah产生c/c++当在头文件,将java定义 native 功能,以产生相应jni层功能,如下面: /* * Class: com_lms_jni_JniTest * Method ...
- bcp sqlcmd bulkinsert在unicode问题,Unexpected EOF encountered in BCP data-file
senario 进入sqlcmd使用:out xxx产生的数据文件,因为sqlcmd export to file 默认情况下,中国的乱码.因此,使用-u(unicode)开关 @echo off & ...
- Cocos2d-X中间应用
(层)Laye:与球员打交道响应事件Node子类. 不同的场景,层通常包括直接在屏幕上呈现的内容.而且能够接受用户的输入事件.包括触摸,加速度计和键盘输入等. 我们须要在层中加入精灵,文本标签或者其它 ...
- 移动端 (基于jquery的3个)touch插件
//第一个 Author: Alone Antroduction: 高级前端开发工程师 Sign: 人生没有失败,只有没到的成功. //依赖jQuery 或者Zepto <script> ...
- 树莓派的演奏音符3 -- LCD1602显示文章
LCD1602它是低-cost输出装置.它具有体积小.简单的操作.低功耗优势.因此,在一些DIY 用它来输出关于产品的一些信息. 昨日在使用,尽管平局网上资源,但仍存在一些问题,确处理. 一.LCD1 ...
- Linux内核分析（五）----字符设备驱动实现
原文:Linux内核分析(五)----字符设备驱动实现 Linux内核分析(五) 昨天我们对linux内核的子系统进行简单的认识,今天我们正式进入驱动的开发,我们今后的学习为了避免大家没有硬件的缺陷, ...
- matlab练习程序（PCA<SVD>）
clear all;close all;clc;img1=imread('Corner.png');img2=imread('Corner1.png');img3=imread('Corner2.pn ...