thinkphp+layui系统开发笔记（一）——数据表格

最新推荐文章于 2024-04-13 21:11:27 发布

VTHINK社区

最新推荐文章于 2024-04-13 21:11:27 发布

阅读量4.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： thinkphp layui

本文链接：https://blog.youkuaiyun.com/weixin_41523042/article/details/80882797

本文是关于使用ThinkPHP5框架结合Layui组件进行系统开发的笔记，主要介绍了如何构建数据表格。参考了官方文档，重点在于理解如何设置表格高度、从控制器获取JSON数据以及构建符合要求的表头。控制器调用模型获取数据并转化为JSON，推荐将表头信息存储在数据表中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、参考资料：

1.thinkphp: https://www.kancloud.cn/special/thinkphp5_quickstart

2.layui: http://www.layui.com/doc/modules/table.html

二、代码：

主体html

<table id="demo" lay-filter="test"></table>

JS构建：（此处采用自动构建）

<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 315
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'sign', title: '签名', width: 177}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: t