jqueryflexigrid使用手册.doc

Jquery.flexigrid使用手册编写人：孟令国编写日期：2010-8-23一、 编写目的对于项目开发中，不可避免的需要使用一些grid。对于由div标签或者table标签拼接而成的表格，无论从外观还有实用性都较差。在资料搜集过程中找到jquery此插件。对于功能和外观均是完美的表现。为了在以后使用中能够更好、更快速的开发实用的功能，撰写此文档。二、 前提条件对于一个项目如果想要使用flexigrid，需要满足以下条件（版本兼容性不在此说明）。1、 jquery.js(原则上版本在1.3以上。)2、 flexigrid.js3、 其他需要扩展功能的插件。三、 使用说明对于flexigrid的使用分为如下几个步骤，总体来说，分为前台表现层，与后台业务处理。1、 前台表现层：$(document).ready(function()/table初始化var grid=$(#JUserTable).flexigrid(width: 695,/表格宽度height: 270,/表格高度 url: admin/UserManagerServlet,/数据请求地址 dataType: json,/请求数据的格式 colModel : /表格的题头与索要填充的内容。 display: 用户ID, name : userId, width : 40, sortable : true, align: center,toggle : false, 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,/透明度设置 showcheckbox: true,/是否显示第一列的checkbox（用于全选） gridClass: bbit-grid/样式 );/按钮操作函数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: 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).length1) hiAlert(请选择一个修改,不能同时修改多个记录!); else if($(.trSelected,grid).length=0) hiAlert(请选择一个您要修改的记录!) );/用户密码初始化function init_pwd(userId)hiConfirm(你确定对该用户密码初始化?, 操作提示, function(r) if(r)$.ajax(type: POST,url: admin/UserManagerServlet?action=initPwd,data: userId=+userId,dataType:text,success: function(msg)if(msg=success)hiAlert(操作成功！);$(#JUserTable).flexReload();elsehiAlert(有错误发生,msg=+msg);,error: function(msg)hiAlert(msg=+msg);););/用户状态更改function change_state(userId)hiConfirm(你确定更改该用户的状态?, 操作提示, function(r) if(r)$.ajax(type: POST,url: admin/UserManagerServlet?action=changeState,data: userId=+userId,dataType:text,success: function(msg)if(msg=success)hiAlert(操作成功！);$(#JUserTable).flexReload();elsehiAlert(有错误发生,msg=+msg);,error: function(msg)hiAlert(msg=+msg);););在此示例代码中，有一下几点说明：第一：使用了第三方提示信息插件，HiAlert。如无此插件，可用js默认的alert代替。第二：json的数据格式（后台处理），与表格题头信息的关联。如果没有显示数据的必要，只能隐藏，而不能不写。第三：数据加载方式为ajax异步调用。2、 后台处理：在此后台业务处理采用servlet处理。采用什么方式处理关系不大。第一：json格式的封装package com.ks.util;import java.lang.reflect.Field;import java.lang.reflect.Method;import java.util.List;/* * * author 孟令国 * email * version 1.0 *Flexigred 插件对于json格式有特殊要求，所以，写了这个方法。专门，生成特定格式的json */public class FlexiGridJsonUtil /* * param page 当前页数 * param total 记录总条数 * param list 符合要求的记录列表。 * return 返回符合Flexigred格式要求的json字符串。 * throws Exception */public static String getJson(String page,String total,List list)throws ExceptionStringBuffer sb = new StringBuffer();sb.append(total:+total+,page:+page+,rows:);sb.append(list2Json(list);sb.append();return sb.toString();/* * param list 对象列表。 * return * throws Exception */private static String list2Json(List list)throws ExceptionStringBuffer sb = new StringBuffer();for (int i = 0; i list.size(); i+) sb.append(obj2Json(list.get(i)+,);sb.delete(sb.length()-1, sb.length();sb.append();return sb.toString();/* * param o 对象，只支持基本类型和String，自定类型请勿使用。 * return * throws Exception */private static String obj2Json(Object o)throws ExceptionObject obj = getObjectValue(o);StringBuffer sb = new StringBuffer();sb.append(id:+obj0+,cell:);for (int i = 0; i obj.length; i+) if(obji instanceof String)sb.append(+obji+,);else if(obji instanceof Character)sb.append(+obji+,);elsesb.append(+obji+,);sb.delete(sb.length()-1, sb.length();sb.append();return sb.toString();private static Object getObjectValue(Object o) throws Exception Class c = o.getClass();Field f = c.getDeclaredFields();Object value = new Objectf.length;for (int i = 0; i f.length; i+) valuei = getMethodValue(o, fi.getName();return value;private static Object getMethodValue(Object owner, String methodName)throws Exception Class ownerClass = owner.getClass();methodName = methodName.substring(0, 1).toUpperCase()+ methodName.substring(1);Method method = null;try method = ownerClass.getMethod(get + methodName); catch (SecurityException e) catch (NoSuchMethodException e) return cant find get + methodName + method;return method.invoke(owner);第二：业务逻辑servletpackage com.ks.servlet.admin;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.ks.dao.KsWebUserDAO;import com.ks.util.DateUtil;import com.ks.util.FlexiGridJsonUtil;import com.ks.util.LogUtil;import com.ks.util.OperateUtil;import com.ks.util.StringUtil;import com.ks.vo.KsWebUser;import com.ks.vo.UserBean;import com.ks.vo.json.UserJsonBean;public class UserManagerServlet extends HttpServlet private static final long serialVersionUID = -4899691758229960625L;private PrintWriter out;public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException doPost(request, response);public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException 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);this.out = response.getWriter();String action = request.getParameter(action);if (action = null | action.equals() action = list;if (action.equals(list) list(request, response); else if (action.equals(add) add(request, response); else if (action.equals(delete) delete(request, response); else if (action.equals(update) update(request, response); else if (action.equals(initPwd) initPwd(request, response); else if (action.equals(changeState) changeState(request, response); else if (action.equals(isUserExite) isUserExite(request, response);private void isUserExite(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException String userName = request.getParameter(userName);System.out.println(userName);KsWebUserDAO kwudao = new KsWebUserDAO();int count = kwudao.findByHqlCount(from KsWebUser where userName=+ userName + );if (count 0) this.out.write(error); else this.out.write(ok);private void changeState(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException String userId = request.getParameter(userId);if (userId = null | userId.equals() this.out.write(参数错误！); else KsWebUserDAO kwudao = new KsWebUserDAO();if (userId.equals(1) this.out.write(超级管理员不允许更改！); else if (kwudao.changeState(userId) OperateUtil.addOperate(UserBean) request.getSession().getAttribute(ub), 更改用户状态，用户id为： + userId);this.out.write(success); else this.out.write(更改不成功，请重新尝试！);this.out.flush();this.out.close();private void initPwd(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException String userId = request.getParameter(userId);if (userId = null | userId.equals() this.out.write(参数错误！); else KsWebUserDAO kwudao = new KsWebUserDAO();if (userId.equals(1) this.out.write(超级管理员不允许更改！); else if (kwudao.initPwd(userId) OperateUtil.addOperate(UserBean) request.getSession().getAttribute(ub), 初始化用户密码，用户id为： + userId);this.out.write(success); else this.out.write(更改不成功，请重新尝试！);this.out.flush();this.out.close();private void update(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException String userId = request.getParameter(userId);String userName = request.getParameter(userName);String userRealName = request.getParameter(userRealName);String userState = request.getParameter(userState);if (userId = null | userId.equals() | userName = null| userName.equals() | userRealName = null| userRealName.equals() | userState = null| userState.equals() | !StringUtil.isInt(userId)| !StringUtil.isLitterAndNum(userName)| !StringUtil.isZh(userRealName) this.out.write(信息给定不正确！); else KsWebUserDAO kwudao = new KsWebUserDAO();KsWebUser kwu = kwudao.findById(userId);if (kwu = null) this.out.write(需要更新的记录不存在！); else kwu.setUserId(Integer.parseInt(userId);kwu.setUserName(userName);kwu.setUserRealName(userRealName);kwu.setUserState(Integer.parseInt(userState);if (kwudao.updateUser(kwu) OperateUtil.addOperate(UserBean) request.getSession().getAttribute(ub), 更改用户，用户id为： + userId);this.out.write(ok); else this.out.write(更改失败，请重新尝试！);this.out.flush();this.out.close();private void delete(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException String ids = request.getParameter(ids);String userId;if (ids = null | ids.equals() this.out.write(请选择需要删除的记录！);this.out.flush();this.out.close(); else userId = ids.split(,);KsWebUserDAO kwudao = new KsWebUserDAO();for (int i = 0; i userId.length; i+) if (StringUtil.isInt(userIdi) if (Integer.parseInt(userIdi) = 1) this.out.write(超级管理员不允许删除！);this.out.flush();this.out.close();break; else if (kwudao.deleteUser(userIdi) OperateUtil.addOperate(UserBean) request.getSession().getAttribute(ub), 删除用户，用户id为： + userId);elsethis.out.write(删除失败，请重新尝试！);this.out.flush();this.out.close();break; else this.out.write(参数错误！);this.out.flush();this.out.close();OperateUtil.addOperate(UserBean) request.getSession().getAttribute(ub), 删除用户，用户id为： + userId);this.out.write(success);this.out.flush();this.out.close();private void add(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException String userName = request.getParameter(userName);String userRealName = request.getParameter(userRealName);String userState = request.getParameter(userState);if (userName = null | userName.equals() | userRealName = null| userRealName.equals() | userState = null| userState.equals() | !StringUtil.isLitterAndNum(userName)| !StringUtil.isZh(userRealName) this.out.write(error); else KsWebUser kwu = new KsWebUser();KsWebUserDAO kwudao = new KsWebUserDAO();kwu.setUserName(userName);kwu.setUserPower(1);kwu.setUserRealName(userRealName);kwu.setUserState(Integer.parseInt(userState);kwu.setUserCreateTime(DateUtil.getNowDate(yyyy-MM-dd HH:mm:ss);if (kwudao.addUser(kwu) OperateUtil.addOperate(UserBean) request.getSession().getAttribute(ub), 增加用户，用户名称为： + userName);this.out.write(ok); else