layui学习记录（一）：数据表格渲染

最新推荐文章于 2024-05-31 17:16:09 发布

GGGGuiii -

最新推荐文章于 2024-05-31 17:16:09 发布

阅读量743

点赞数

文章标签： thinkphp javascript html

本文链接：https://blog.csdn.net/gggguiii/article/details/106497979

版权

1 前端代码

代码

搭建前端界面，代码主要包含一个数据表格标签和表格行内操作的标签。属性均采用layui内置的。

<!--    数据表格-->
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <!--    行操作：编辑 删除-->
    <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>

采用layui文档里的方法级渲染。

    <script type="text/javascript">
    	//加载所需模块
        layui.use(['table','form','layer'], function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;

            //方法级渲染表格
            table.render({
                elem: '#test'
                ,url:"此处是需要请求的后台URL"
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: '用户数据表'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'ID',  fixed: 'left',align: 'center',unresize: true, sort: true}
                    ,{field:'meeting_register_id', title:'用户名', align:'center',width:120}
                    ,{field:'mail_address', title:'邮箱', align:'center'}
                    ,{field:'mail_type', title:'邮件类型',  align: 'center',sort: true}
                    ,{field:'delivery_time', title:'送达时间', align: 'center'}
                    ,{field:'delivery_status', title:'送达状态',align: 'center'}
                    // ,{field:'experience', title:'积分', width:80, sort: true}
                    // ,{field:'ip', title:'IP', width:120}
                    // ,{field:'logins', title:'登入次数', width:100, sort: true}
                    // ,{field:'joinTime', title:'加入时间', width:120}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', align:'center',width:200}
                ]]
                ,id:'email_form'
                ,page: true
            });

界面效果

2 后台数据处理

利用ThinkPHP5的 \think\Request 类，获取当前的请求信息。layui的表格渲染采用的是异步数据接口，默认的method：'GET'，并且返回数据需要进行JSON编码。不符合默认格式需要添加parseData、response参数。参考：layui异步数据接口。

$request = Request::instance();
$request->get();

全部php后台代码：
$email_tables=new CollectEmail();是实例化了一个类，其中getTablesCount()和getTables()是和数据库进行交互的函数。根据自己的需求写~

    //数据表格
    public function table(){
        $request=Request::instance();
        if ($request->isAjax()){
            $data=array();
            $pageSize = $request->get('limit')?$request->get('limit'):10;
            $page = $request->get('page')?$request->get('page'):1;
            $email_tables=new CollectEmail();
            $res['code'] = 0;
            $res['msg'] = "";
            $res['count'] = $email_tables->getTablesCount($data);
            $res['data'] =  $email_tables->getTables($data,$page,$pageSize);
            $json_data=json_encode($res);
            echo $json_data;
        }
    }