使用layui实现数据表格基本操作

最新推荐文章于 2024-05-04 16:36:25 发布

Your_is_my_God

最新推荐文章于 2024-05-04 16:36:25 发布

阅读量533

点赞数

分类专栏： layui thinkphp 文章标签： php layui

本文链接：https://blog.csdn.net/Your_is_my_God/article/details/118822054

版权

thinkphp 同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

layui

2 篇文章 0 订阅

订阅专栏

1、不要忘记引用layui线上css和script

2、后台代码注意返回状态码和总页数等等的规范

3、前台代码如下

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
    <link rel="shortcut icon" href="__STATIC__/images/study.ico">
</head>
<body>
    <!--搜索-->
    <div class="demoTable">
        关键字：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>

    <!--table表格渲染-->
    <table class="layui-hide" id="test" lay-filter="test"></table>

    <!--    模板：批量删除-->
    <script type="text/html" id="delAll">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">批量删除</button>
        </div>
    </script>

    <!--    模板：基本操作-->
    <script type="text/html" id="actionBar">
        <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>

    <!--    模板：图片-->
    <script type="text/html" id="img">
        <div><img src="http://www.m7.com/static/uploads/{{d.brand_logo}}" width="30" height="30" alt="加载失败.."></div>
    </script>

</body>
</html>
<script src="__STATIC__/layui/layui.js"></script>
<script>
    layui.use(['table','jquery'], function(){
        var table = layui.table;//类似于实例化
        var $ = layui.jquery;
        var token = localStorage.getItem('token');
        //开始渲染报表格
        table.render({
            elem: '#test',//将table实例与页面中的元素绑定到一起（通过id进行绑定的）
            url:'http://www.m7.com/admin/brand/brandListDo?token='+token,//接口地址
            cols:[[
                {type:'checkbox'},
                {field:'id', title: '主键id', sort: true},
                {field:'brand_name', title: '品牌名称',edit:'text'},
                {field:'brand_logo', title: '品牌LOGO',templet:'#img'},
                {field:'brand_desc', title: '品牌描述',edit:'text'},
                {field:'brand_order', title: '品牌排序',sort:true,edit:'text'},
                {field:'cate_name', title: '分类名称'},
                {title: '操作',fixed: 'right',toolbar: '#actionBar', width:150},
            ]],//渲染每一列
            page: true,//开启分页
            limit:3,//控制每页显示多少条（默认）
            limits:[3,5,10,15,20],//控制每页显示多少条
            toolbar:'#delAll',//开启工具栏
            id:'testReload',//给出id标识
        });

        //头工具栏事件(批量删除)
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var arr = checkStatus.data;
            var ids = [];
            $(arr).each(function (k,v) {
                ids.push(v.id)
            })
            $.ajax({
                url:'http://www.m7.com/admin/brand/brandDel?token='+token+'&ids='+ids.toString(),
                success:function (e) {
                    if(e.code==0){
                        table.reload('testReload')
                    }
                }
            })

        });

        //监听单元格编辑
        table.on('edit(test)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
        });


        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('确定要删除吗？', function(index){
                    console.log(data);
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                console.log(data.id)
            }
        });

        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        word:demoReload.val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    })
</script>

效果图如下：

Your_is_my_God

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用layui实现数据表格基本操作

1、不要忘记引用layui线上css和script2、后台代码注意返回状态码和总页数等等的规范3、前台代码如下<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0
复制链接

扫一扫