初学ThinkPHP(一):用TP6+LayUI实现数据表格

ThinkPHP,LayUI官方教程对此已有比较详细的文档，但是对于新手来说，很多概念是不理解的，还是自己照葫芦画瓢上手一遍，加深理解。同时也把一些新手容易遇到的低级问题列一下。

TP6、LayUI的安装、配置、引入等略过，我们从新建数据表开始，ThinkPHP对相关的类、函数(控制器、模型、视图、表名、字段)等位置和命名有严格的规范要求，可自行查阅官方文档，这里通过例子，更直观一点了解。

首先，新建一个数据表：fun_wine_denstity

"fun_"为数据表前缀，在配置TP数据库时应已约定，下面新建控制器等文件时，命名要忽略前缀和“_”。delete_time,create_time,update_time三个字段为默认的，在相关模型操作更新数据时，由系统自动完成，其中delete_time为实现软删除功能。

然后，根据此表新建相关控制器、模型、视图等文件：用驼峰命名法

控制器：
app/controller/WineDensity.php 类名：WineDensity

模型： app/model/WineDensity.php 类名：WineDensity

视图：
app/view/winedensity/index.html

最后，贴下相关代码：

视图：
app/view/winedensity/index.html 根据自己项目自行引入LAYUI

<script>

layui.use('table', function () {

var table = layui.table;

//数据表格配置

table.render({

elem: '#winedensity'

//NGw7CXS5zD.php 是我的入口文件 可根据自己的项目修改

, url: '
/NGw7CXS5zD.php/winedensity/ajax_get' //这里是请求控制器，也是数据源

, height: 500

, width: 700

, page: true //开启分页

, cols: [[//表头

{field: 'ID', title: 'ID', width: 80, sort: true, fixed: 'left'} //和数据表字段对应，严格区分大小写

, {field: 'temp', title: '温度', width: 80}

, {field: 'vol', title: '酒精度', width: 100, sort: true}

, {field: 'density', title: '密度', width: 80}

, {field: 'update_time', title: '更新时间', width: 176}

, {fixed: 'right', title: '操作', width: 176, align: 'center', toolbar: '#barDemo'} //工具条（编辑、删除）

]]

, event: true //这里三行暂时不用理会，为了以后更新数据后返回后回到当前页

, done: function(res,curr,count){

currPage = curr;

}

});

</script>

<script type="text/html" id="barDemo">

<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>

控制器代码：
app/controller/WineDensity.php

要用到模型，引入模型，因为控制器类名和模型同名，这里这样写，至于为什么这样写，是不是有其他写法，暂时还不懂。

use app\model\WineDensity as WineDensityModel;

用到了paginate，引入：facade

use think\facade\Request;

use think\facade\View;

public function __construct(App $app) {

parent::__construct($app);

$this->modelClass = new WineDensityModel();

}

//后台表格列表接口，返回LayUI格式的JSON数据

public function ajax_get() {

list($this->page, $this->pageSize, $sort, $where) = $this->buildParames();

$list = $this->modelClass

->withCache(10)

->where($where)

->order($sort)

->paginate([ //前台数据表格使用了分页，这里用到paginate,这也是TP内置的

'list_rows' => $this->pageSize,

'page' => $this->page,

]);

$result = ['code' => 0, 'msg' =>'Get Data Success', 'data' => $list->items(), 'count' => $list->total()]; //LAYUI只接收此格式的JSON数据

return json($result);

}

模型代码，没有什么要自己写的，默认就行了。

运行：