一、前言

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的值一致。