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")@ResponseBodypublic 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

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