zoukankan      html  css  js  c++  java
  • 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;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>
    

      

  • 相关阅读:
    java web分享ppt大纲 -- servlet容器简介
    Docker入门二
    Docker入门
    自动化运维
    堡垒机
    代码管理平台
    NoSQL(四)
    NoSQL(三)
    NoSQL(二)
    CentOS添加新网卡network-scripts目录下找不到网卡配置文件
  • 原文地址:https://www.cnblogs.com/ly-03-04/p/12321591.html
Copyright © 2011-2022 走看看