Jquery表格插件flexgrid使用心得

Jquery表格插件flexgrid使用心得

基本环境的配置。所需要的JS文件和CSS文件如下所示：

<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../flexigrid-1.1/js/flexigrid.js"></script> <link rel="stylesheet" type="text/css" href="../flexigrid-1.1/css/flexigrid.css" />

一、基本容器与设置。

1.首先先建立一个空的表格，设置好ID。

<table id="t_user0" style="display:none;"></table>

2.在表格代码的下方初始化表格。

<table id="t_user0" style="display:none;"> </table> <script type="text/javascript"> $(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' }); }); </script>

注：参数列表（来自网络，未验证是否齐全）

1. height: 200, //flexigrid插件的高度，单位为px  

2. width: 'auto', //宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题  

3. striped: true, //是否显示斑纹效果，默认是奇偶交互的形式  

4. novstripe: false,//没用过这个属性  

5. minwidth: 30, //列的最小宽度  

6. minheight: 80, //列的最小高度  

7. resizable: false, //resizable table是否可伸缩  

8. url: false, //ajax url,ajax方式对应的url地址  

9. method: 'POST', // data sending method,数据发送方式  

10.dataType: 'json', // type of data loaded,数据加载的类型，xml,json  

11.errormsg: '发生错误', //错误提升信息  

12.usepager: false, //是否分页  

13.nowrap: true, //是否不换行  

14.page: 1, //current page,默认当前页  

15.total: 1, //total pages,总页面数  

16.useRp: true, //use the results per page select box,是否可以动态设置每页显示的结果数  

17.rp: 25, // results per page,每页默认的结果数  

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<BangitUsers>  user_page = new Page<BangitUsers>(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<BangitUsers> user_page = new Page<BangitUsers>(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<BangitUsers> user_page = new Page<BangitUsers>(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<BangitUsers> p) {                    page = p.getCurrentPage();                    total = p.getTotal();                    rp = p.getRp();                    List<BangitUsers> l = p.getObjs();                    JsonConfig jsonConfig = new JsonConfig();                    PropertyFilter filter = new PropertyFilter() {                             @Override                             public 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<E> {       private int currentPage;// 当前页       private int total;// 总页数       private int rp;// 每页的数量       private List<E> 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<E> getObjs() {            return objs;       }         public void setObjs(List<E> objs) {            this.objs = objs;       }   }

 

2.Service层。FindUserByPage方法的代码：

public Page<BangitUsers> findUsersByPage(Page<BangitUsers> user_page,                  String query, String qtype, int loginTypeComm) {            return userDAO.findByPage(user_page, query, qtype, loginTypeComm);       }

 

         3.DAO层。findByPage方法的代码：

public Page<BangitUsers> findByPage(final Page<BangitUsers> user_page,                  final String query, final String qtype,final int utype) {            final String hql = "from BangitUsers u where u."+qtype+" like '%"+query+"%' and u.usrPrivilege="+utype;            List<BangitUsers> list = getHibernateTemplate().execute(                       new HibernateCallback<List<BangitUsers>>() {                             @Override                             public List<BangitUsers> doInHibernate(Session session)                                        throws HibernateException, SQLException {                                   int first = user_page.getRp()                                              * (user_page.getCurrentPage() - 1);                                   Query query = session.createQuery(hql);                                   query.setFirstResult(first);                                   query.setMaxResults(user_page.getRp());                                   return query.list();                             }                       });            user_page.setObjs(list);            user_page.setTotal(getHibernateTemplate().find(hql).size());            return user_page;       }

 

四、结语。

本文主要为本人在使用flexgrid的过程中的学习记录，方便日后查阅，可能写的不是很形象，代码较多，需要耐心阅读，见谅。