1、Jquery.flexigrid使用手冊編寫人：孟令國編寫日期：2010-8-23一、 編寫目的對于項目開發中，不可避免的需要使用一些grid。對于由div標簽或者table標簽拼接而成的表格，無論從外觀還有實用性都較差。在資料搜集過程中找到jquery此插件。對于功能和外觀均是完美的表現。為了在以后使用中能夠更好、更快速的開發實用的功能，撰寫此文檔。二、 前提條件對于一個項目如果想要使用flexigrid，需要滿足以下條件（版本兼容性不在此說明）。1、 jquery.js(原則上版本在1.3以上。)2、 flexigrid.js3、 其他需要擴展功能的插件。三、 使用說明對于flexigri

2、d的使用分為如下幾個步驟，總體來說，分為前臺表現層，與后臺業務處理。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,

3、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 : 8

4、0, 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: tru

5、e, 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: u

6、serId,/默認排序字段名稱 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:

7、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(是否刪除這

8、 + $(.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) , er

9、ror: function(msg) hiAlert(msg=+msg); if(msg=success) hiAlert(操作成功！); $(#JUserTable).flexReload(); else 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(returnVa

10、lue = 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=53

11、0px);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

12、/UserManagerServlet?action=initPwd, data: userId=+userId, dataType:text, success: function(msg) , error: function(msg) hiAlert(msg=+msg); if(msg=success) hiAlert(操作成功！); $(#JUserTable).flexReload(); else hiAlert(有錯誤發生,msg=+msg); ); /用戶狀態更改 function change_state(userId) hiConfirm(你確定更改該用戶的狀態?, 操作提示,

13、function(r) if(r) $.ajax( type: POST, url: admin/UserManagerServlet?action=changeState, data: userId=+userId, dataType:text, success: function(msg) , error: function(msg) hiAlert(msg=+msg); if(msg=success) hiAlert(操作成功！); $(#JUserTable).flexReload(); else hiAlert(有錯誤發生,msg=+msg); ); );在此示例代碼中，有一下幾點說

14、明：第一：使用了第三方提示信息插件，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 m

15、englingguo5210* 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)th

16、rows Exception /* * param list 對象列表。 * return StringBuffer sb = new StringBuffer(); sb.append(total:+total+,page:+page+,rows:); sb.append(list2Json(list); sb.append(); return sb.toString();* throws Exception */ private static String list2Json(List list)throws Exception /* * param o 對象，只支持基本類型和String

17、，自定類型請勿使用。 * return * throws Exception */ private static String obj2Json(Object o)throws Exception Object obj = getObjectValue(o); StringBuffer sb = new StringBuffer(); sb.append(id:+obj0+,cell:); for (int i = 0; i obj.length; i+) sb.delete(sb.length()-1, sb.length(); sb.append(); return sb.toString

18、(); if(obji instanceof String) sb.append(+obji+,); StringBuffer sb = new StringBuffer(); for (int i = 0; i list.size(); i+) sb.delete(sb.length()-1, sb.length(); sb.append(); return sb.toString(); sb.append(obj2Json(list.get(i)+,); else if(obji instanceof Character) sb.append(+obji+,); else sb.appen

19、d(+obji+,); private static Object getObjectValue(Object o) throws Exception private static Object getMethodValue(Object owner, String methodName) throws Exception Class c = o.getClass(); Field f = c.getDeclaredFields(); Object value = new Objectf.length; for (int i = 0; i f.length; i+) return value;

20、 valuei = getMethodValue(o, fi.getName(); 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) retur

21、n method.invoke(owner); return cant find get + methodName + method;第二：業務邏輯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 java

22、x.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

23、com.ks.vo.UserBean;import com.ks.vo.json.UserJsonBean;public class UserManagerServlet extends HttpServlet public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException public void doGet(HttpServletRequest request, HttpServletResponse response) thro

24、ws ServletException, IOException private static final long serialVersionUID = -4899691758229960625L; private PrintWriter out; doPost(request, response); response.setContentType(text/html); response.setCharacterEncoding(utf-8); response.setHeader(Pragma, no-cache); response.setHeader(Cache-Control, n

25、o-cache, must-revalidate); response.setHeader(Pragma, no-cache); this.out = response.getWriter(); String action = request.getParameter(action); if (action = null | action.equals() if (action.equals(list) list(request, response); action = list; else if (action.equals(add) add(request, response); else

26、 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, res

27、ponse); 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 w

28、here 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.o

29、ut.write(參數錯誤！); else this.out.flush(); this.out.close(); 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(s

30、uccess); else this.out.write(更改不成功，請重新嘗試！); private void initPwd(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException String userId = request.getParameter(userId); if (userId = null | userId.equals() this.out.write(參數錯誤！); else this.out.flush(); this.out.clo

31、se(); 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(更改不成功，請重新嘗試！); private voi

32、d 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(use

33、rState); 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

34、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.updateUs

35、er(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, IOE

36、xception 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+) OperateUtil.addOperate(UserBean) r

37、equest.getSession() .getAttribute(ub), 刪除用戶，用戶id為： + userId); 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() .getAttribu

38、te(ub), 刪除用戶，用戶id為： + userId); else this.out.write(刪除失敗，請重新嘗試！); this.out.flush(); this.out.close(); break; else this.out.write(參數錯誤！); this.out.flush(); this.out.close(); this.out.write(success); this.out.flush(); this.out.close(); private void add(HttpServletRequest request, HttpServletResponse re

39、sponse) 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() | userSta

40、te = 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 this.out.wri