Jquery表格插件flexgrid使用心得.docx

Jquery表格插件flexgrid使用心得基本环境的配置。所需要的JS文件和CSS文件如下所示：一、 基本容器与设置。1.首先先建立一个空的表格，设置好ID。2.在表格代码的下方初始化表格。$(function() $(#t_user0).flexigrid(url : bguser!CommonUsers,dataType : json,colModel : display : 用户ID,name : usrRegname,sortable : true,width : 120, display : 用户名,sortable : true,width : 80, display : 真实姓名,sortable : true,width : 100, display : 生日,sortable : true,width : 60, display : 身份证号码,sortable : true,width : 80, display : 密码提示问题,sortable : true,width : 320, display : 密码提示答案,sortable : true,width : 320, display : 所在大学,sortable : true,width : 320, display : 所在学院,sortable : true,width : 320, display : 专业班级,sortable : true,width : 320, display : 入学年份,sortable : true,width : 160, display : 性别,sortable : true,width : 320, display : 电子邮件,sortable : true,width : 320, display : 联系方式,sortable : true,width : 320, display : QQ号码,sortable : true,width : 320, display : 特长爱好,sortable : true,width : 320, display : 用户权限,sortable : true,width : 320 ,buttons : name : 设为内部人员,bclass : add,onpress : setinner, name : 删除,bclass : delete,onpress : deleteitem ,searchitems : display : 用户名,name : usrRegname, separator : true ,sortname : usrId,sortorder : desc,usepager : true,title : 普通用户管理,usrRp : true,rp : 10,showTableToggleBtn : true,height : 300,width : auto););注：参数列表（来自网络，未验证是否齐全）1. height:200,/flexigrid插件的高度，单位为px2. width:auto,/宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题3. striped:true,/是否显示斑纹效果，默认是奇偶交互的形式4. novstripe:false,/没用过这个属性5. minwidth:30,/列的最小宽度6. minheight:80,/列的最小高度7. resizable:false,/resizabletable是否可伸缩8. url:false,/ajaxurl,ajax方式对应的url地址9. method:POST,/datasendingmethod,数据发送方式10. dataType:json,/typeofdataloaded,数据加载的类型，xml,json11. errormsg:发生错误,/错误提升信息12. usepager:false,/是否分页13. nowrap:true,/是否不换行14. page:1,/currentpage,默认当前页15. total:1,/totalpages,总页面数16. useRp:true,/usetheresultsperpageselectbox,是否可以动态设置每页显示的结果数17. rp:25,/resultsperpage,每页默认的结果数18. rpOptions:10,15,20,25,40,100,/可选择设定的每页结果数19. title:false,/是否包含标题20. pagestat:显示记录从from到to，总数total条,/显示当前页和总页面的样式21. procmsg:正在处理数据，请稍候.,/正在处理的提示信息22. query:,/搜索查询的条件23. qtype:,/搜索查询的类别24. qop:Eq,/搜索的操作符25. nomsg:没有符合条件的记录存在,/无结果的提示信息26. minColToggle:1,/允许显示的最小列数27. showToggleBtn:true,/是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错。28. hideOnSubmit:true,/是否在回调时显示遮盖29. showTableToggleBtn:false,/是否显示【显示隐藏Grid】的按钮30. autoload:true,/自动加载，即第一次发起ajax请求31. blockOpacity:0.5,/透明度设置32. onToggleCol:false,/当在行之间转换时，可在此方法中重写默认实现，基本无用33. onChangeSort:false,/当改变排序时，可在此方法中重写默认实现，自行实现客户端排序34. onSuccess:false,/成功后执行35. onSubmit:false,/调用自定义的计算函数，基本没用二、 编写按钮的回调函数。function deleteitem(com, grid) var length = $(.trSelected, grid).length;if (length 1) alert(一次只能删除一条记录。); else if (length = 1) var uid = $(.trSelected, grid).find(td:first div).html();if (confirm(确定要删除ID为 + uid + 的用户吗？) $.post(bguser!delUser, usrId : uid, function(data) if (data.flag) alert(删除成功！); else alert(删除失败，请重试！);$(#t_user0).flexOptions(newp : 1).flexReload();, json);function setinner(com, grid) var length = $(.trSelected, grid).length;if (length 1) alert(一次只能修改一条记录。); else if (length = 1) var uid = $(.trSelected, grid).find(td:first div).html();if (confirm(确定要提升ID为 + uid + 的用户为内部人员吗？) $.post(bguser!addInner, usrId : uid, function(data) if (data.flag) alert(设置成功！); else alert(设置失败，请重试！);$(#t_user0).flexOptions(newp : 1).flexReload();, json);三、 异步传输数据（以JSP的SSH框架为例）1.Action层。在action类里定义以下几个成员变量：private int page;/当前的页码private int total;/总页数private int rp;/每页显示的数量private String rows;/要返回的JSON数组private String query;/查询的字段的关键字private String qtype;/查询的字段类型的名字完整的action样例代码：package com.bangit.action;import java.text.SimpleDateFormat;import java.util.Date;import java.util.List;import net.sf.json.JSONArray;import net.sf.json.JSONObject;import net.sf.json.JsonConfig;import net.sf.json.util.PropertyFilter;import com.bangit.entity.BangitUsers;import com.bangit.entity.Page;import com.bangit.exception.UserException;import com.bangit.json.DateTransfer;import com.bangit.service.BangitUsersService;import com.bangit.utils.PropertiesList;/* * 后台对用户的操作 * * author wuxinwei * */public class BgUserAction extends BaseAction private BangitUsersService userService;private int page;private int total;private int rp;private String rows;private String query;private String qtype;private int usrId;private boolean flag;/* * 分页获取普通用户，并转成json字符串返回 * * return */public String CommonUsers() Page user_page = new Page(page, total, rp);user_page = userService.findUsersByPage(user_page, query, qtype,PropertiesList.LOGIN_TYPE_COMM);rows = parseUserPage2Json(user_page);return RETURN_JSON;/* * 分页获取内部用户，并转成json字符串返回 * * return */public String InnerUsers() Page user_page = new Page(page, total, rp);user_page = userService.findUsersByPage(user_page, query, qtype,PropertiesList.LOGIN_TYPE_INNER);rows = parseUserPage2Json(user_page);return RETURN_JSON;/* * 分页获取管理员，并转成json字符串返回 * * return */public String AdminUsers() Page user_page = new Page(page, total, rp);user_page = userService.findUsersByPage(user_page, query, qtype,PropertiesList.LOGIN_TYPE_ADMIN);rows = parseUserPage2Json(user_page);return RETURN_JSON;/* * 删除指定用户 * * return */public String delUser() try userService.deleteUser(usrId);flag = true; catch (UserException e) e.printStackTrace();flag = false;return RETURN_VALI_JSON;/* * 将某用户转为普通用户，并转成json字符串返回 * * return */public String addComm() try userService.changePrivilege(usrId, PropertiesList.LOGIN_TYPE_COMM);flag = true; catch (UserException e) e.printStackTrace();flag = false;return RETURN_VALI_JSON;/* * 将某用户转为内部用户，并转成json字符串返回 * * return */public String addInner() try userService.changePrivilege(usrId, PropertiesList.LOGIN_TYPE_INNER);flag = true; catch (UserException e) e.printStackTrace();flag = false;return RETURN_VALI_JSON;/* * 将某用户转为管理员，并转成json字符串返回 * * return */public String addAdmin() try userService.changePrivilege(usrId, PropertiesList.LOGIN_TYPE_ADMIN);flag = true; catch (UserException e) e.printStackTrace();flag = false;return RETURN_VALI_JSON;/* * 将一个page解析成json字符串返回 * * param p * return */private String parseUserPage2Json(Page p) page = p.getCurrentPage();total = p.getTotal();rp = p.getRp();List l = p.getObjs();JsonConfig jsonConfig = new JsonConfig();PropertyFilter filter = new PropertyFilter() Overridepublic boolean apply(Object source, String name, Object value) if (bangitResourceses.equals(name)| bangitTask2users.equals(name)return true;return false;jsonConfig.setJsonPropertyFilter(filter);jsonConfig.registerJsonValueProcessor(Date.class, new DateTransfer();JSONArray items = new JSONArray();for (BangitUsers user : l) JSONObject item = new JSONObject();JSONArray array = new JSONArray();array.add(user.getUsrId();array.add(user.getUsrRegname();array.add(user.getUsrRealname();array.add(user.getUsrBirthday().toString();array.add(user.getUsrIdnumber();array.add(user.getUsrQuestion();array.add(user.getUsrAnswer();array.add(user.getUsrSchool();array.add(user.getUsrFaculty();array.add(user.getUsrClass();SimpleDateFormat sdf = new SimpleDateFormat(yyyy);array.add(sdf.format(user.getUsrSchoolyear();array.add(user.getUsrSex();array.add(user.getUsrEmail();array.add(user.getUsrPhone();array.add(user.getUsrQq();array.add(user.getUsrSkill();array.add(user.getUsrPrivilege();item.put(cell, array.toString();items.add(item);return items.toString();public BangitUsersService getUserService() return userService;public void setUserService(BangitUsersService userService) this.userService = userService;public int getPage() return page;public void setPage(int page) this.page = page;public int getTotal() return total;public void setTotal(int total) this.total = total;public int getRp() return rp;public void setRp(int rp) this.rp = rp;public String getRows() return rows;public void setRows(String rows) this.rows = rows;public String getQuery() return query;public void setQuery(String query) this.query = query;public String getQtype() return qtype;public void setQtype(String qtype) this.qtype = qtype;public int getUsrId() return usrId;public void setUsrId(int usrId) this.usrId = usrId;public boolean isFlag() return flag;public void setFlag(boolean flag) this.flag = flag;注：需要注意的是先前设定的那几个必须的成员变量的使用及返回的json数组字符串的格式。在struts2传回json字符串的时候，我发现flexgrid无法解析，不知道是不是因为我返回的json字符串不规范，总之我还修改了flexgrid的源代码，在flexgrid.js中搜索if (p.dataType = json) 然后在下面添加一句：var arr = jQuery.parseJSON(data.rows);解析返回的data字符串的rows，就正常啦。同时本人写了一个Page的类用来分页从数据库取值。Page类的代码如下：package com.bangit.entity;import java.util.List;public class Page private int currentPage;/ 当前页private int total;/ 总页数private int rp;/ 每页的数量private List objs;/ 返回后的对象队列public Page() public Page(int currentPage, int total, int rp) this.currentPage = currentPage;this.total = total;this.rp = rp;public int getCurrentPage() return currentPage;public void setCurrentPage(int currentPage) this.currentPage = currentPage;public int getTotal() return total;public void setTotal(int total) this.total = total;public int getRp() return rp;public void setRp(int rp) this.rp = rp;public List getObj