欢迎关注支持。
前言
在遇到表格插件之前,开发后台表格的时候,一直是手写table,th,tr,td,或者不停的复制粘贴,不胜其烦,自从用了mmGrid来创建表格或者列表,在也没有烦恼了,今天我们一起来看看mmGrid插件为什么让后台开发工程师上瘾的。
内容概要
1、mmGrid简介
2、mmGrid常用功能介绍
3、mmGrid实践
一、mmGrid简介
mmGrid基于jQuery的表格插件,样式简洁,修改容易,基本上可以满足日常后台开发的列表需要。可以支持本地数据源和远程数据源。下面来几个动态图大家看看。
mmgrid
mmgrid
二、mmGrid常用功能介绍
我这里简单列举一下:1、支持列排序
2、可以支持拖动列宽
3、支持表头分组(二级表头)
4、支持行索引
5、支持多行选中,多行操作
6、自适应表格宽和高
三、mmGrid实践
我这里说PHP的实践思路:
1、首先将mmGrid封装到一个html文件中,并且使用AJAX的方式加载数据
2、在后台php文件中,对表格所需的表头,数据进行封装。
经过前端和后端的两个封装,表格的创建就非常容易了,我给出以前做的一个CI框架的例子和效果,大家参考。
先看效果:
案例
A)前端的封装。
表格文件放到一个mmGrid.html文件中,该文件分为三个部分,一个是引入样式文件代码,二是正文表格的代码,三是配置代码,四是引入js文件代码。我这里贴出关键的二和三,其他大家搜索一下可以得到。
上面的代码实现两个功能:一个是页面的标题和副标题,二是引入搜索文件。
这些配置文件大家参考官方的解释吧。主要是加载表格的配置。
引用的时候,写一个搜索文件就可以了,说的不明白,看后端代码就明白了。
B)后端代码,分为两个部分,一是配置表格的实际内容,二是引入搜索文件。
关键代码如下:
其中,index和query方法可以在父类方法中给出,如果没有特殊需要的话,控制器部分可以省略这两个方法。
listDataFormat是对model传过来的数据进行格式化,比如时间戳改成可读的形式。
另外,可以使用js对常用的查看,删除,编辑等行操作进行封装,比如我这里封装后,在控制器里写一个delete方法就可以满足删除的操作需求。
可能没有说的太清楚,如果需要源码的话,我把github上的代码整理一下再发出来给大家参考。