龙空技术网

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

张语清诚 1272

前言:

此刻你们对“tp5使用ajax”大概比较重视,我们都需要知道一些“tp5使用ajax”的相关内容。那么小编在网上汇集了一些关于“tp5使用ajax””的相关知识,希望同学们能喜欢,我们快快来学习一下吧!

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);

}

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

运行:

标签: #tp5使用ajax