歡迎關注支持。

前言

在遇到表格插件之前，開發(fā)后臺表格的時候，一直是手寫table，th，tr，td，或者不停的復制粘貼，不勝其煩，自從用了mmGrid來創(chuàng)建表格或者列表，在也沒有煩惱了，今天我們一起來看看mmGrid插件為什么讓后臺開發(fā)工程師上癮的。

內(nèi)容概要

1、mmGrid簡介

2、mmGrid常用功能介紹

3、mmGrid實踐

一、mmGrid簡介

mmGrid基于jQuery的表格插件，樣式簡潔，修改容易，基本上可以滿足日常后臺開發(fā)的列表需要?？梢灾С直镜財?shù)據(jù)源和遠程數(shù)據(jù)源。下面來幾個動態(tài)圖大家看看。

mmgrid

mmgrid

二、mmGrid常用功能介紹

我這里簡單列舉一下：

1、支持列排序

2、可以支持拖動列寬

3、支持表頭分組（二級表頭）

4、支持行索引

5、支持多行選中，多行操作

6、自適應表格寬和高

三、mmGrid實踐

我這里說PHP的實踐思路：

1、首先將mmGrid封裝到一個html文件中，并且使用AJAX的方式加載數(shù)據(jù)

2、在后臺php文件中，對表格所需的表頭，數(shù)據(jù)進行封裝。

經(jīng)過前端和后端的兩個封裝，表格的創(chuàng)建就非常容易了，我給出以前做的一個CI框架的例子和效果，大家參考。

先看效果：

案例

A）前端的封裝。

表格文件放到一個mmGrid.html文件中，該文件分為三個部分，一個是引入樣式文件代碼，二是正文表格的代碼，三是配置代碼，四是引入js文件代碼。我這里貼出關鍵的二和三，其他大家搜索一下可以得到。

上面的代碼實現(xiàn)兩個功能：一個是頁面的標題和副標題，二是引入搜索文件。

這些配置文件大家參考官方的解釋吧。主要是加載表格的配置。

引用的時候，寫一個搜索文件就可以了，說的不明白，看后端代碼就明白了。

B）后端代碼，分為兩個部分，一是配置表格的實際內(nèi)容，二是引入搜索文件。

關鍵代碼如下：

其中，index和query方法可以在父類方法中給出，如果沒有特殊需要的話，控制器部分可以省略這兩個方法。

listDataFormat是對model傳過來的數(shù)據(jù)進行格式化，比如時間戳改成可讀的形式。

另外，可以使用js對常用的查看，刪除，編輯等行操作進行封裝，比如我這里封裝后，在控制器里寫一個delete方法就可以滿足刪除的操作需求。

可能沒有說的太清楚，如果需要源碼的話，我把github上的代碼整理一下再發(fā)出來給大家參考。