FlexiGrid使用手册
|
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 三、实例 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, ??????????????? {display: '工资', name : 'salary', width : 60, align: 'right', process:formatMoney }, ??????????????? {display: '日期', name : 'date', width : 120, ??????????????? {display: '语言', name : 'language', width : 80, align: 'center' }?????????????????????????????????????????????????????????????? ?????????? ], ??????????? ?? buttons : [ ??????????????? {name: 'add', displayname: '新增', bclass: 'add', onpress: toolbarItem }, ??????????????? {separator: true}, ??????????? ??? { name: 'modify', displayname: '修改', bclass: 'modify', ??????????? ? ???{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.2','中文'); INSERT INTO `job_info1` VALUES ('111','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','3234.00','中文'); INSERT INTO `job_info1` VALUES ('121','我的k','说到底','10000','英文'); INSERT INTO `job_info1` VALUES ('122','我的kk','啊可怜的','10','英文'); INSERT INTO `job_info1` VALUES ('123','去1','2009-12-07','iwio','英文'); INSERT INTO `job_info1` VALUES ('124','1噢o','2009-12-08','2030','1900','中文'); INSERT INTO `job_info1` VALUES ('129','其实','阿斯科','221','英文'); INSERT INTO `job_info1` VALUES ('131','英文'); INSERT INTO `job_info1` VALUES ('134','世界','东方方法','14.00','中文'); INSERT INTO `job_info1` VALUES ('135','就啊是','可看到','22.00','英文'); INSERT INTO `job_info1` VALUES ('136','阿斯','中文'); INSERT INTO `job_info1` VALUES ('137','世康','萨芬成都市','123','英文'); INSERT INTO `job_info1` VALUES ('138','显示卡','收到反看','中文'); INSERT INTO `job_info1` VALUES ('139','1东方法','244ss','中文'); INSERT INTO `job_info1` VALUES ('140','发卡量','w','45','中文'); INSERT INTO `job_info1` VALUES ('141','晚上','2009-12-10','时间','100','英文'); INSERT INTO `job_info1` VALUES ('142','阿克接口','问问','英文'); INSERT INTO `job_info1` VALUES ('143','wwwree','23','300.00','英文'); INSERT INTO `job_info1` VALUES ('144','122','12.00','中文'); INSERT INTO `job_info1` VALUES ('145','23456','山东省','1211','英文'); INSERT INTO `job_info1` VALUES ('146','请求权','2009-12-25','2111','11112','英文'); INSERT INTO `job_info1` VALUES ('148','12112','3','22','中文'); INSERT INTO `job_info1` VALUES ('149','222','121','2121','中文'); INSERT INTO `job_info1` VALUES ('150','失算','却完全','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,25,可选择设定的每页结果数 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) ??? 禁止选中 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |