layui数据表格（快速使用数据自动加载代码简看易懂）

最新推荐文章于 2024-03-29 11:00:51 发布

厚积薄发的Cicci

最新推荐文章于 2024-03-29 11:00:51 发布

阅读量674

点赞数

分类专栏： layui框架文章标签： LayUI javascript

本文链接：https://blog.csdn.net/WuqibuHuan/article/details/107314391

版权

layui框架专栏收录该内容

5 篇文章 0 订阅

订阅专栏

layui数据表格
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link href="layui/css/layui.css" rel="stylesheet" />
    <script src="js/jquery-3.3.1.js"></script>
    <script src="layui/layui.js"></script>
</head>
<body>
    <script type="text/html" id="barDemo"> 
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <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>
    <table id="demo" lay-filter="test"></table>
</body>
</html>

<script>
    layui.use('table', function () {
        var table = layui.table;
        //第一个实例
        var ta = table.render({
            elem: '#demo'
            , height: 312
            , url: 'https://localhost:44368/api/UserInfo/GetAll' //数据接口
            , page: true //开启分页
            , limit: 3 //页容量 pagesize
            , cols: [[ //表头
                { field: 'UId', title: '编号', width: 80, sort: true, fixed: 'left' }
                , { field: 'UName', title: '用户名', width: 80 }
                , { field: 'Pass', title: '密码', width: 80, sort: true }
                , { fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo' }
            ]]
        });
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('查看操作');
            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    //obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url: 'https://localhost:44368/api/UserInfo/Remove/' + Id,
                        type: 'post',
                        data: {},
                        dataType: 'json',
                        success: function (data) {
                            if (data > 0) {
                                alert('删除成功');
                                ta.reload();//重新刷新页面
                            }
                        }
                    });
                });
            } else if (layEvent === 'edit') {
                location.href = "/Edit.html?Id=" + Id;
            }
        });
    });
</script>