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文件引入到页面

2)在<body>中增加FlexiGrid的容器

</div>

3）编写生成FlexiGrid的js代码：

$(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-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使用手册的更多相关文章

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/ 手册网

随机推荐

Android 让他们自己控制开发的定义（一个）
作为一个创意开发.或软件UI设计要求比较高,你经常会遇到的情况来圣安德鲁斯控制不符合您的需求.这样的时候.件.同一时候.安卓也同意你去继承已经存在的控件或者实现你自己的控件以便优化界面和创造更加丰富的 ...
OpenGL 实现Interpolation插值算法
这是一个静态插值算法的效果,图形学中插值算法应用十分广.如动画.photoshop, autocAD等软件画曲线,还有shader中的渐变上色也是一个硬件支持的插值算法. Interpolation是 ...
poj3414--Pots(bfs,记录路径)
Pots Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10149 Accepted: 4275 Special J ...
vs2010模板修改
使用visual studio 2010好久了,也遇到了不少问题,下面跟大家分享一些. 模板修改说明: 主要工具: 以visual studio 2010作为例子,具体目录可能会根据不同的安装目录 ...
sdut 在机器上面向对象编程练习11（运算符重载）
在机器上面向对象编程练习11(运算符重载) Time Limit: 1000MS Memory limit: 65536K 标题叙述性说明有两个矩阵a和b,均为2行3列,求两个矩阵之和.重载运算符& ...
java.lang.ClassCastException: java.lang.NoClassDefFoundError cannot be cast to java.lang.RuntimeException
不是一个Exception,而是一个Error,要强制转成Exception类型,就出错了java.lang.NoClassDefFoundError java.lang.RuntimeExcepti ...
apk当安装程序将文件复制到手机自带的指定文件夹
项目已获得,今天.apk文件以获得另一个非调试手机,发现一个问题. 由于涂料.所以绘图数据的点存储在一个.txt文字档.把它用usb传到指定目录下的,可是明显不科学,由于用户下载了你的.apk文件,你 ...
Loadrunner11.00破解方法
1.下载从http://www.jb51.net/softs/71240.html上面下载到loadrunner 11.0 2.安装loadrunner 11.0 下载之后,我是直接解压到硬盘,再安 ...
POJ 1066 Treasure Hunt（相交线段&&更改）
Treasure Hunt 大意:在一个矩形区域内.有n条线段,线段的端点是在矩形边上的,有一个特殊点,问从这个点到矩形边的最少经过的线段条数最少的书目,穿越仅仅能在中点穿越. 思路:须要巧妙的转换一 ...
Java迭代器[转]
迭代器是一种模式,它可以使得对于序列类型的数据结构的遍历行为与被遍历的对象分离,即我们无需关心该序列的底层结构是什么样子的.只要拿到这个对象,使用迭代器就可以遍历这个对象的内部. 1.Iterator ...

FlexiGrid使用手册

FlexiGrid使用手册

FlexiGrid使用手册的更多相关文章

随机推荐

热门专题