layui表格 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.4.1.js"></script>
</head>
<body>
    <div>
        <button class="layui-btn layui-btn-lg" onclick="Add()">
                添加   
        </button>
    </div>
    <div>
        <table id="demo" lay-filter="test"></table>
    </div>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="Upt">修改</button>
            <button class="layui-btn layui-btn-sm" lay-event="Del">删除</button>
        </div>
    </script>
    <script type="text/html" id="TouXiang">
        <div class="layui-btn-container">
            <img style="height:30px;width:30px;border-radius:50%;line-height:150px!important;" src="{{d.UImg}}" />
        </div>
    </script>
    <script src="~/layui/layui.js"></script>
    <script>

        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#demo',
                height: 312,
                url: "https://localhost:44304/api/userinfos/Get",
                page: true,
                cols:
                    [[
                        { field: 'UName', title: "用户名", sort: true, fixed: 'left' }, //fieId是字段名 title是显示的 sort是排序
                        { field: 'UPwd', title: "密码", sort: true, fixed: 'left' },
                        { field: 'USex', title: "性别", sort: true, fixed: 'left', templet: function (d) { if (d.gender == false) { return '女' } else { return '男' } } },
                        { field: 'UHobby', title: "爱好", sort: true, fixed: 'left' },
                        { field: 'UImg', title: "头像", sort: true, fixed: 'left',templet:'#TouXiang' },
                        { field: 'URemark', title: "描述", sort: true, fixed: 'left' }
                        , { title: "操作", templet: '#toolbarDemo' }
                    ]],
                request:
                {
                    pageName: 'PageIndex', //请求的值 与Api对应 
                    limitName: 'PageSize'
                }
            });

            table.on('tool(test)', function (obj) {
                var data = obj.data; //获取当前行数据
                var layEvent = obj.event; //获取lay-event对应得值
                console.log(data);
                if (layEvent == 'Del') {
                    layer.confirm('真得删除吗？', function (index) {

                        $.ajax({
                            url: 'https://localhost:44304/api/userinfos/GetResult/' + data.Id,
                            success: function (d) {
                                if (d > 0) {
                                    layer.msg('删除成功', { icon: 1 });
                                    obj.del();
                                }
                                else {
                                    alert('失败')
                                }
                            }
                        })
                    })
                }
                if (layEvent == 'Upt') {
                    location.href = '/UserInf/Upt';
                }


            })
        });

        function Add() {
            location.href = '/UserInfoS/Add';
        }
    </script>
</body>
</html>

　　

posted @ 2020-02-17 14:15  噜啦啦0001  阅读(169)  评论(0)    收藏  举报