TP5.1和 layui表格table创建

1.基础公共父模板 admin/view/layout/common.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{block name="title"}基础模板{/block}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    {block name="layui_css"}
    <link rel="stylesheet" href="__layuiadmin__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__layuiadmin__/style/admin.css" media="all">

    {/block}
    <style type="text/css">
        .layui-btn-success {
            background-color: #46b346;
        }
        .layui-btn-gray {
            background-color: gray;
        }
    </style>
    {block name="head"}{/block}
</head>
<body>
    {block name="body"}{/block}

    {block name="layui_js"}
    <script src="__layuiadmin__/layui/layui.js"></script>
    {/block}

    {block name="js"}{/block}
</body>
</html>

 

2.视图模板文件这么写 admin/view/put/index.html

{extend name="layout/common" /}

{block name="title"}类型列表{/block}

{block name="body"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">

                <!-- <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-user-front-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div> -->
            </div>
        </div>

        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layuiadmin-btn-useradmin" data-type="batchdel">删除</button>
                <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">添加</button>
            
            
            </div>
      <table id="demo" lay-filter="test"></table>
    

   

      <script type="text/html" id="status-tpl">
        
        <script type="text/html" id="status-tpl">
         类型
         
        </script>

            </script>
            <script type="text/html" id="table-useradmin-webuser">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>

{/block}

{block name="js"}
<script src="__layuiadmin__/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use('table', function(){
    var table = layui.table;   
        table.render({
            elem: '#demo'
            ,url: "{:url('put/table')}"//请求的数据接口
            ,page: true //开启分页
            ,cols: [[ 
            {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
            ,{field: 'h1', title: '标题',align: 'center', minWidth:80}
            ,{field: 'type', title: '类型', minWidth:80, align: 'center'}
            // ,templet: '#c_time'
            ,{field: 'c_time', title: '新增时间', minWidth:80, align: 'center'}
         
            ,{ title: '操作', minWidth: 150, align: 'center', fixed: 'right', toolbar: '#table-useradmin-webuser' }
        ]]
    });
});

</script>
{/block}

 

3.方法 admin/controller/Put.php 里面这么写 ：

<?php
namespace app\admin\controller;
use think\Db;
use think\facade\Session;
use \think\Controller;

class Put  extends Controller
{
    public function index()
    {   
       return view();
    }

    public function table()
    {   
        $page = input('page', 1, 'intval'); //接收到layui的请求时候传的页码参
        $limit = input('limit', 1, 'intval');//接收到layui的请求时候传的数量参
        $data = Db::name('blog')->withAttr('c_time', function($value, $data) { //时间戳处理，
            return $value ? date('Y-m-d H:i:s', $value) : '';     //时间戳处理把时间戳换成时间
        })
        ->page($page, $limit)
        ->select();

        // belongsTo
        foreach ($data as & $value) {  // $value['type']数字，换成对应的 cate 表里面的类型字符串
            $value['type'] = Db::name('cate')->where('id', $value['type'])->value('name');
        }

        
        $count = Db::name('blog')->count(); //查询数量
        // {
        //     "code": 0,
        //     "msg": "",
        //     "count": 1000,
        //     "data": [{}, {}]
        //   }           
        $api = [
            'code' => 0,
            'msg' => '数据表格',
            'count' => $count,
            'data' => $data,
        ];
  //$api就是layui需要的接口数据
        return json($api);
        //  return table('数据表格', $count, $data);
     
    }
    
}

 

　　数据库blog 和 cate:

 

 

 

 

运行代码 出结果：

页码，类型，时间，都是正常的

 

 到此结束

 

posted @ 2021-04-25 13:27  79524795  阅读(229)  评论(0)  编辑  收藏  举报