首页 > 其他 > 详细

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

时间:2021-05-20 00:36:47      阅读:29      评论:0      收藏:0      [点我收藏+]

效果图:

技术分享图片

 

 

代码:

<!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>

 

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

原文:https://www.cnblogs.com/jiangshiguo/p/14787095.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!