jquery之mmgrid插件的使用教程

一、前言

mmgrid官方文档地址为：http://www.jq22.com/demo/mmGrid-master20150916/examples/index.html；虽然有官方文档，但文档中明显缺少了实际应用的demo，导致很多朋友在看了文档后依然一头雾水，不知道该如何下手。鉴于这一点，本人基于长期使用mmgrid的经验，特写一篇关于mmgrid的使用教程。以便帮助各位同道朋友快速对它上下其手，运用自如。本教程所使用的mmgrid基于原作者做了一定的改动优化，若需使用本人改动后的版本，可留言联系。

二、使用

1，jsp html 内容

[plain]  view plain  copy

1.   

2，mmgrid的核心代码

[javascript]  view plain  copy

1. //初始化表格  
2. var grid,searchParams;  
3. function initGrid(){  
4.     //数据列  
5.     var cols =[  
6.         {title: '批次名称', name:'batchName', width:150, align:'left',hidden:false,limit:150,sortable:true},  
7.         {title: '仓库编号', name:'warehouseId', width:150, align:'left',limit:150,sortable:true},  
8.         {title: '仓库名称', name:'warehouseName', width:150, align:'left',sortable:true,limit:150}  
9.           
10.     ];  
11.     //获取默认参数  
12.     var gridOpts = getGridDefaultOptions();  
13.     //个性化参数配置  
14.     pgBar = $('.pagenav').mmPaginator({limit: 20});//分页插件  
15.     var gridOpts = getGridDefaultOptions();  
16.     gridOpts.height = height;  
17.     gridOpts.plugins = [pgBar];  
18.     gridOpts.fullWidthRows = true;  
19.     gridOpts.sortName = "END_DATE";  
20.     gridOpts.sortStatus = "desc";  
21.     gridOpts.global = false;  
22.     gridOpts.cols = gridDefaultCols;  
23.     gridOpts.url = window.ctx + '/logisticsEval/findLogiEvalRecord.sc?PAGE=LogisticsEvalPO';//数据请求地址  
24.     //远程数据返回后、加载前的额外处理方法(个人新增)  
25.     gridOpts.gridDataFn = function(data){  
26.         var items = data.items;  
27.         for(var i=0;i 0){  
28.                 var scoreObj = {};  
29.                 for(var j=0;j  

3,mmgrid的请求后，对应的java代码处理片段为（使用了springMVC）

[java]  view plain  copy

1. /** 
2.      * @author zt 
3.      * @describe 查询仓库信息 
4.      * @time 2017-8-7 下午2:32:21 
5.      * 注意下方key值不可改变  
6.      * respMap.put("items", logiList);//数据 
7.      * respMap.put("totalCount", result.size());//数据总条数 
8.      * MmgridPageBean 对象包含了分页处理信息 
9.      */  
10.     @RequestMapping("/findWarehourse")  
11.     @ResponseBody  
12.     public Map findWarehourse(HttpServletRequest request,HttpServletResponse response,MmgridPageBean pageBean,String warehourseName){  
13.         try {  
14.             WarehouseListPopupPage warehouseListPopupPage = new WarehouseListPopupPage();  
15.             String isAll = request.getParameter("isAll");  
16.             Map respMap = new HashMap();  
17.             IUser user = ctx.getUserInfo();  
18.             int[] seIndex = pageBean.getSeIndex();  
19.             if(StringUtils.isBlank(isAll)){  
20.                 List logiList = new ArrayList();  
21.                 WarehouseInfo whouse = WarehouseInfo.lookWarehouseByUserName(user.getLoginName(),user.getCompanyID());  
22.                 List details = LogisticsEvaluationDO.getBatchLogisticsEvaluation(user.getCompanyID(),whouse.getWarehouseId(),warehourseName);  
23.                 int endIndex = seIndex[1]>details.size()?details.size():seIndex[1];  
24.                 List subDetails = details.subList(seIndex[0],endIndex);  
25.                 if(details != null && details.size() >0){  
26.                     for(LogisticsEvaluationDO eo:subDetails){  
27.                         LogisticsEvalBean bean = new LogisticsEvalBean();  
28.                         BeanUtils.copyProperties(bean, eo);  
29.                         logiList.add(bean);  
30.                     }  
31.                 }  
32.                 respMap.put("items", logiList);  
33.                 respMap.put("totalCount", details.size());  
34.             }else{  
35.                 List logiList = new ArrayList();  
36.                 Vector result = warehouseListPopupPage.qryWarehouseAll(ctx,warehourseName);  
37.                 int endIndex = seIndex[1]>result.size()?result.size():seIndex[1];  
38.                 List subResult = result.subList(seIndex[0], endIndex);  
39.                 for(int i=0;i  

总结：文档中已有的api此处不做说明，很多朋友关心的分页问题，使用分页插件既会自动往后台传分页参数。返回数据时，必须注意key与前台解析的key的值一致。