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) ??? 禁止选中 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |