Layui表格模块界面

最新推荐文章于 2024-10-19 11:27:38 发布
青莳吖
最新推荐文章于 2024-10-19 11:27:38 发布
阅读量639
点赞数
文章标签： java 开发语言 linq
本文链接：https://blog.csdn.net/weixin_44758923/article/details/123806446
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品的列表页面</title>
    <!-- 导入layui的css样式文件 -->
    <link href="../js/layui/css/layui.css" rel="stylesheet" >
    <!--    导入jquery的js文件-->
    <script src="../js/jquery-3.4.1.min.js"></script>
    <!--导入layui的js文件-->
    <script src="../js/layui/layui.js"></script>
</head>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <!--
                搜索用户信息
         <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">用户姓名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="username" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">用户性别</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="sex" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">用户城市</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="city" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">用户职业</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="classify" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary" lay-submit  lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>-->

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm data-add-btn"> 添加商品 </button>
                <!--   <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn"> 删除用户 </button>-->
            </div>
        </script>

        <!--删除-->
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>

        <!--layui的过滤属性值-->
        <table class="layui-hide"
               id="currentTableId"

               lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a href="shopadd.html" class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>

<!--layui的模快加载以及初始化-->
<script>

    /*
    *   加载和初始化模块 表单模块,表格模块
    * */
    layui.use([ 'table','util'], function () {

        var table = layui.table, //给表格组件初始化
            util = layui.util;  //表格中的单元格编辑进行初始化

        table.render({
            //发送json数据
            elem:"#currentTableId" , //获取当前table标签对象
            url: "/layUIShop/findAll",  // 请求的后台接口
            toolbar: '#toolbarDemo', //监听上面工具栏
            defaultToolbar: ['filter', 'exports', 'print', { //默认的工具栏: 右边:打印,导出,帅选列
                title: '商品列表展示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],

            //表格中的数据内容
            cols: [[
                {type: "checkbox", width: 50, fixed: "left"},
                /*field:标记当前实体类的属性名称
                *
                * */
                {field: 'shopId', width: 170, title: '商品编号', sort: true},
                /*商品名称*/
                {field: 'shopName', width: 170,  title: '商品名称',edit: 'text'}, //在cols edit:编辑单元格
                {field: 'shopPrice', width: 150 ,title: '商品价格',edit: 'text', sort: true}, //sort 可排序
                {field: 'shopDesc', width: 170, title: '商品描述',edit: 'text'},
/*                {field: 'shopPic', title: '商品图片', width:170, height:80,
                    /!*自定义模板,看文档第三种方案:必须有一个div包裹,否则模板有问题*!/
                    templet: '<div><img src="{{d.shopPic}}" style="width: auto;height: auto" /></div>'
                },//绑定操作工具栏*/
                {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150
                }]],


        page: true //开启分页
    }) ;
        
        // 监听搜索操作
        // form.on('submit(data-search-btn)', function (data) {
        /*var result = JSON.stringify(data.field);
        layer.alert(result, {
            title: '最终的搜索信息'
        });
*/
        //执行搜索重载
        /*       table.reload('currentTableId', {
                   page: {
                       curr: 1
                   }
                   , where: {
                       searchParams: result
                   }
               }, 'data');

               return false;
           });*/

        //监听单元格编辑
        //currentTableFilter table标签中的lay-filter属性值
        table.on('edit(currentTableFilter)', function(obj){
            var oldText = $(this).prev().text(),// 单元格编辑之前的值
                value = obj.value, //得到修改后的值
                data = obj.data, //得到所在行所有键值  服务器响应过json数据  data （里面shop实体）
                field = obj.field, //得到字段
                title=obj.title //字段名称
            // layer.msg(util.escape(title) + ' 已更改为：'+ util.escape(value),{time:3000});
            //icon	1: 对号;2: 错号;3: 问号;4: 锁定;5: 哭脸;6: 笑脸; 7: 警告
           // layer.msg('[ID: '+ data.shopId +'] ' + field + ' 字段更改值为：'+ util.escape(value));

            /*alert(data) ;*/
            //发送ajax请求
            $.ajax({
                //请求后台接口地址
                url: "/layUIShop/update",
                data: JSON.stringify(data),//发送json
                contentType: "application/json",
                type:"post",
                success:function(resp){
                    if(resp.code==0){
                        // alert(resp.msg) ;
                        layer.msg(resp.msg);
                    }
                },
                dataType:"json"
            })
        });

        // 监听添加操作
        $(".data-add-btn").on("click", function () {

            var index = layer.open({
                title: '添加商品',
                type: 2,
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: ['100%', '100%'],
                content: 'shopadd.html', //点击添加---跳转子页面上
            });
            $(window).on("resize", function () {
                layer.full(index);
            });

            return false;
        });

        // 监听删除操作
        $(".data-delete-btn").on("click", function () {
            var checkStatus = table.checkStatus('currentTableId')
                , data = checkStatus.data;
            layer.alert(JSON.stringify(data));
        });
/*
        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {

                var index = layer.open({
                    title: '编辑用户',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '/page/table/edit.html',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
        });*/

        //监听行工具事件
        table.on('tool(currentTableFilter)', function(obj){
            var data = obj.data; //获取每一行实体
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){

                    //执行Ajax
                    $.ajax({
                        url:"/layUIShop/del/"+data.shopId,

                        type:"get",
                        success: function(resp){
                            if(resp.code==0){
                                alert(resp.msg) ;
                            }else{
                                alert(resp.msg) ;
                            }
                        },
                        dataType:"json"
                    }) ;
                    obj.del();//点击确立按钮删除
                    layer.close(index);
                });
            }
        });
    });
</script>
</body>
</html>