jquery之mmgrid插件的使用教程

一、前言

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

二、使用

1，jsp html 内容

2，mmgrid的核心代码

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

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

/**
	 * @author zt
	 * @describe 查询仓库信息
	 * @time 2017-8-7 下午2:32:21
	 * 注意下方key值不可改变	
     * respMap.put("items", logiList);//数据
     * respMap.put("totalCount", result.size());//数据总条数
     * MmgridPageBean 对象包含了分页处理信息
	 */
	@RequestMapping("/findWarehourse")
	@ResponseBody
	public Map
     
     
      
       findWarehourse(HttpServletRequest request,HttpServletResponse response,MmgridPageBean pageBean,String warehourseName){
		try {
			WarehouseListPopupPage warehouseListPopupPage = new WarehouseListPopupPage();
			String isAll = request.getParameter("isAll");
			Map
      
      
       
        respMap = new HashMap
       
       
        
        ();
			IUser user = ctx.getUserInfo();
			int[] seIndex = pageBean.getSeIndex();
			if(StringUtils.isBlank(isAll)){
				List
        
        
         
          logiList = new ArrayList
         
         
           (); WarehouseInfo whouse = WarehouseInfo.lookWarehouseByUserName(user.getLoginName(),user.getCompanyID()); List 
          
            details = LogisticsEvaluationDO.getBatchLogisticsEvaluation(user.getCompanyID(),whouse.getWarehouseId(),warehourseName); int endIndex = seIndex[1]>details.size()?details.size():seIndex[1]; List 
           
             subDetails = details.subList(seIndex[0],endIndex); if(details != null && details.size() >0){ for(LogisticsEvaluationDO eo:subDetails){ LogisticsEvalBean bean = new LogisticsEvalBean(); BeanUtils.copyProperties(bean, eo); logiList.add(bean); } } respMap.put("items", logiList); respMap.put("totalCount", details.size()); }else{ List 
            
              logiList = new ArrayList 
             
               (); Vector result = warehouseListPopupPage.qryWarehouseAll(ctx,warehourseName); int endIndex = seIndex[1]>result.size()?result.size():seIndex[1]; List subResult = result.subList(seIndex[0], endIndex); for(int i=0;i 
              
               < code>
               
              
             
            
           
         
        
        
       
       
      
      
     
     

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