精华内容
下载资源
问答
  • Layui表格重载

    2020-05-09 22:16:19
    如果在初次渲染表格的时候使用了链接,重载的时候也必须使用链接,否则会渲染失败。

    如果在初次渲染表格的时候使用了链接,重载的时候也必须使用链接,否则会渲染失败。

    展开全文
  • layui表格重载

    2019-06-27 21:43:23
    这里主要实现的功能是这样的,这里有两个表格,上边表格协议单位的协议,下边协议单位房价的协议一条协议有多个房房类,每个房类价格也不一样,所以这个功能就是当我点击某一条协议的时候就在下面显示相应的房价协议...

    这里主要实现的功能是这样的,这里有两个表格,上边表格协议单位的协议,下边协议单位房价的协议一条协议有多个房房类,每个房类价格也不一样,所以这个功能就是当我点击某一条协议的时候就在下面显示相应的房价协议的每个房类的协议的价格。

      这是监听单击事件,监听这个协议单位表。先获取到点击行的数据。通过这个数据获取到它的主键ID,addClass("layui-table-click").siblings(),添加选中样式,removeClass("layui-table-click");移除选中样式。

    关键的核心代码就是下面这一段代码,重新加载这协议单位表格,第一参数是路径url,请求方法是这个查询这个表格的方法,第二个参数传参,获取到主键ID把这个这个协议单位的ID传到控制器,第三个参数分页刷新后从第一页开始,这里也可以不需要参数.

       

    这个房价协议的价格表格的初始化,同上是一些基本的参数设置

    功能效果如下下图所示

    展开全文
  • 终于弄懂了Layui表格重载数据(中途被女朋友劝反附聊天记录)

    需求

    学末将至,web应用技术这门课最后要交一个大作业。开发一个购物的商城网站(编程语言不限制,系统架构不限制,总之开发出来带有前后台的购物商城并且带支付功能)。在开发用户管理的功能的时候,需要用到表格展示数据。

    其中前端的UI采用了Layui。

    就在开发到数据表格相关功能的时候,却遇到了问题。

    网络大多数都是A转Layui官网实例,B转A,C转B。导致了搜一个解决的办法,就是错误,再搜一个还是错的。几乎都不能解决。

    折腾了将近10多个小时。最终折腾成功,特此把遇到的坑写在文章里,为后人提供点帮助。

    在这里插入图片描述

    被Layui伤透了的心

    被女朋友劝用Ajax:
    在这里插入图片描述

    那不行呀,我就不信搞不明白了:

    不能向这个小问题低头,这次低头了下次遇到了,麻烦的还是自己。还是下决定把这个整明白。

    在这里插入图片描述

    遇到的问题描述

    后台怎么都收不到传来的值。
    在这里插入图片描述

    在这里插入图片描述

    涨姿势环节

    1、page和limit参数

    首先呢,我这样写,是错误的。
    在Layui的重载表格中,会自动向请求的地址发出page和limit参数,所以不必在写page和limit参数了。

    终于体会到了作者设计此处时的奇妙和厉害之处。

    省的使用者再去计算page和limit的值,layui都帮你计算好了。

    在这里插入图片描述

    2、layui重载方法中的where传参之坑

    官方的例子给出的实例如下代码所示,但是实例中未说明为什么这样子写。

    where: {
        key: {
            id: demoReload.val()
        }
    }
    

    这也是我受到伤害的其中一个地方,其实这个地方,作者是想传递一个对象。
    我们之后在js中的对象是可以这样写:

    var User = {
       name : ‘郑晖’,
       email : '123@163.com'
    }
    

    打印出来是这种形式的:
    在这里插入图片描述
    后台返回的对象是这种形式的:
    在这里插入图片描述

    var $ = layui.$, active = {
        reload: function(){
          var demoReload = $('#demoReload');
          
          //执行重载
          table.reload('testReload', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
              key: {
                id: demoReload.val()
              }
            }
          }, 'data');
        }
      };
    

    根据对比,作者就是想返回一个对象给后台。所以这个地方就需要自定义了。
    总之,where:{}中就是用来存放向后台传的值的。

    解决问题

    为了解决这个问题,我试了几种办法,

    data.field拿到的数据就是一个表单中的input中的值,形成一个对象的形式,可以打印一下看一下格式:
    在这里插入图片描述

    编写的js代码:

    // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {
       //执行搜索重载
       table.reload('currentTableId', {
           url: 'http://127.0.0.1:8080/rest/agriculture/managerUserController/list',
           method:'post',
           page: {
               curr: 1
           }
           , where: data.field
    
       }, 'data');
    
       return false;
    });
    

    但是遇到了问题:(后台接收不到值:

    前台可以看到是可以看到值传过去了:
    在这里插入图片描述
    后台确实也收到了:
    在这里插入图片描述

    由于后台需要动态的拼接sql:
    在这里插入图片描述
    前台会把所有的字段都传递给后端,即使没有搜索也会传一个' '进来。导致了后台去查询了传来的' ',这个地方可以通过后端来处理。这里我就尝试这去使用前端来处理,所以不讨论后端。

    ** 解决办法1(没有成功的解决)**

     // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                //执行搜索重载
                table.reload('currentTableId', {
                    url: 'http://127.0.0.1:8080/rest/agriculture/managerUserController/list',
                    method:'post',
                    page: {
                        curr: 1
                    }
                    , where:
    
                {
                    managerId:data.field.managerId != '' ? data.field.managerId:null,
                        managerName:data.field.managerName != '' ? data.field.managerName:null,
                    username:data.field.username != '' ? data.field.username:null,
                    age:data.field.age != '' ? data.field.age:null,
                    sex:data.field.sex != '' ? data.field.sex:null,
                    phone:data.field.phone != '' ? data.field.phone:null,
                    email:data.field.email != '' ? data.field.email:null,
                    start:data.field.start != '' ? data.field.start:null,
                    createDateStr:data.field.createDateStr != '' ? data.field.createDateStr:null
                }
    
                }, 'data');
    
                return false;
            });
    

    ** 解决办法2(成功的解决)**

    前端动态的添加对象中的字段

     // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
    
                // 装载数据
                var resultData = {};
                if(data.field.managerId != '' )
                  resultData.managerId = data.field.managerId;
                if(data.field.managerName != '' )
                    resultData.managerName = data.field.managerName;
                if(data.field.username != '' )
                    resultData.username = data.field.username;
                if(data.field.age != '' )
                    resultData.age = data.field.age;
                if(data.field.sex != '' )
                    resultData.sex = data.field.sex;
                if(data.field.phone != '' )
                    resultData.phone = data.field.phone;
                if(data.field.email != '' )
                    resultData.email = data.field.email;
                if(data.field.start != '' )
                    resultData.start = data.field.start;
                if(data.field.createDateStr != '' )
                    resultData.createDateStr = data.field.createDateStr;
    
                //执行搜索重载
                table.reload('currentTableId', {
                    url: 'http://127.0.0.1:8080/rest/agriculture/managerUserController/list',
                    method:'post',
                    page: {
                        curr: 1
                    }
                    , where:resultData
    
                }, 'data');
    
                return false;
            });
    

    前端所有代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="lib/layui-v2.5.5/css/layui.css" media="all">
        <link rel="stylesheet" href="css/public.css" media="all">
    </head>
    
    <style>
        #layui-table-page1{
            text-align: center;
        }
    </style>
    
    <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="managerId" 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="managerName" 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="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="age" 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="phone" 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="email" 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="start" 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="createDateStr" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
    <!--                            lay-submit-->
                                <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-normal layui-btn-sm data-add-btn" lay-event="add"> 添加管理员 </button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除管理员 </button>
                </div>
            </script>
    
            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    
            <script type="text/html" id="currentTableBar">
                <a class="layui-btn layui-btn-normal 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>
    <script src="lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    
    <script>
        layui.use(['form', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;
    
            table.render({
                elem: '#currentTableId',
                // url: 'api/managerAdminTable.json',
                url: 'http://127.0.0.1:8080/rest/agriculture/managerUserController/list',
                method:'post',
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [[
                    {type: "checkbox", width: '3%',align: "center"},
                    {field: 'managerId', width: '10%', title: '编号', sort: true,align: "center"},
                    {field: 'managerName', width: '10%', title: '用户名',align: "center"},
                    {field: 'userName', width: '10%', title: '姓名', sort: true,align: "center"},
                    {field: 'age', width: '17%', title: '年龄',align: "center"},
                    {field: 'sex', width: '10%', title: '性别', sort: true,align: "center"},
                    {field: 'createDateStr', width: '10%', title: '创建日期', sort: true,align: "center"},
                    {field: 'start', width: '10%', title: '是否启用', sort: true,align: "center"},
                    {title: '操作', width: '20%', toolbar: '#currentTableBar', align: "center"}
                ]],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line',
                done : function(res, curr, count){
                    console.log("共有数据:"+count+" 条")
                    // $('#totalProjectNumber').text("共有数据:"+count+" 条");
                    table_data=res.data;
                    layer.closeAll('loading');
                    // layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的
                    // layer.close(index);    //返回数据关闭loading
                }
    
            });
    
            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
    
                // 装载数据
                var resultData = {};
                if(data.field.managerId != '' )
                  resultData.managerId = data.field.managerId;
                if(data.field.managerName != '' )
                    resultData.managerName = data.field.managerName;
                if(data.field.username != '' )
                    resultData.username = data.field.username;
                if(data.field.age != '' )
                    resultData.age = data.field.age;
                if(data.field.sex != '' )
                    resultData.sex = data.field.sex;
                if(data.field.phone != '' )
                    resultData.phone = data.field.phone;
                if(data.field.email != '' )
                    resultData.email = data.field.email;
                if(data.field.start != '' )
                    resultData.start = data.field.start;
                if(data.field.createDateStr != '' )
                    resultData.createDateStr = data.field.createDateStr;
    
                //执行搜索重载
                table.reload('currentTableId', {
                    url: 'http://127.0.0.1:8080/rest/agriculture/managerUserController/list',
                    method:'post',
                    page: {
                        curr: 1
                    }
                    , where:resultData
    
                }, 'data');
    
                return false;
            });
    
            /**
             * toolbar监听事件
             */
            table.on('toolbar(currentTableFilter)', function (obj) {
                if (obj.event === 'add') {  // 监听添加操作
                    var index = layer.open({
                        title: '添加用户',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '../page/table/add.html',
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                } else if (obj.event === 'delete') {  // 监听删除操作
                    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);
                    });
                }
            });
    
        });
    </script>
    
    
    
    </body>
    </html>
    

    后端相关代码:

    为了方便其他人看,没加入任何其他的无关的代码,仅供参考,单纯为了实现传值

       @ResponseBody
        @PostMapping("/list")
        public String list(Integer page, Integer limit, ManagerUser managerUser){
            List<ManagerUser> userListAll = managerUserService.getManagerUserListAll(managerUser);
    
            JSONObject json = new JSONObject();
            json.put("code",0);
            json.put("msg","数据加载成功");
            json.put("count",userListAll.size());
            json.put("data",userListAll);
    
            return json.toString();
        }
    
    展开全文
  • Layui表格重载后点击日期选择闪一下或是长按才能显示. 前言 首先我的日期选择是放在数据表格的表头工具条中的,但我重载数据表格后日期选择点一下就消失了,切到其他窗口再回来它会自己弹出来,或者长按也可以显示,...

    Layui表格重载后点击日期选择闪一下或是长按才能显示.

    前言

    首先我的日期选择是放在数据表格的表头工具条中的,但我重载数据表格后日期选择点一下就消失了,切到其他窗口再回来它会自己弹出来,或者长按也可以显示,但是一松开就消失了。在这里插入图片描述

    解决方法

    如果你也和我遇到的情况差不多,不妨可以试试下面的方法。

    var tableIns=table.render({
    	elem: '#userTable' //这是<table>的id
    	,...
    	,done: function () {
    		//time1,time2分别是两个日期选择input的id
    	    $('#time1').removeAttr("lay-key");
    	    $('#time2').removeAttr("lay-key");
    	    laydate.render({
    	        elem: '#time1'
    	    });
    	    laydate.render({
    	        elem: '#time2'
    	        ,value: new Date()
    	    });
    	}
    )};
    

    虽然这样可以解决我目前的问题,但也不确定会不会出现一些奇怪的bug。当然如果本来就不显示的话,可能是没有加载laydate模块,可以多看看官方的文档。

    展开全文
  • 在项目中的用到了layui的数据表格,需要实现一个重载功能,类似这样的搜索功能 官方代码 //执行重载 table.reload('testReload', { page: { curr: 1 //重新从第 1 页开始 } ,where: { key{
  • id: 'licenceReload' /* 重载表格时要用到的id ,最好别和标签的id一样*/, cols: [ [ /* 表头 */ { type: 'radio' }, { field: 'userNumber', title: '编号', align: 'center' }, { field: 'userName', ...
  • layui表格重载进入当前页。

    千次阅读 2019-07-11 12:13:48
    layui表格删除一条数据后,还是显示当前页。 if(layEvent === 'del'){ //删除 layer.confirm('真的删除么', function(index){ obj.del(); //删除对应行(tr)的DOM结构,并更新缓存 // 发起删除请求 $.post(...
  • layui 表格重载参数不更新的问题

    千次阅读 2020-04-20 17:40:46
    layui表格数据的问题,当点击搜索的时候正常,当去掉搜索条件的时候再点击搜索还是会把搜索前的参数带入请求。网上很多方法是说把参数清空,还有的是将实例的表格对象 var table1 = table.render({}); 然后 ...
  • layui表格重载后界面闪动解决方案

    千次阅读 2020-03-27 16:01:27
    layui框架默认提供的table模块,使用该模块可以快速高效的完成表格数据的开发。但是最近在使用过程中发现了一些小问题。下面一起来看下吧! 官方说明地址:https://www.layui.com/demo/table.html 需要实现的具体...
  • 最近发现有人遇到一个关于layui的问题,表格重载后表格里的日期选择器点击没反应了,自己用layui的时候没接触到这些,但是为了以后做打算,我也帮忙看了下,通过各种搜集信息终于找到了解决办法。 首先,理解为表格...
  • 效合应近环大过这业据ayui table重载时,发现如果前端多选,减少选项,后台接收的参数不会变化,使用的还是之前的搜在重说道。础过学开概码数项遍间里哦行览屏屏定处。。容标中钮控设近浏新术,都第来期发述更据目历...
  • Layui 表格重载 多查询 且接口不同

    千次阅读 2018-11-06 14:29:29
    <link rel="stylesheet" href="/layui/css/layui.css"> #city_1 select{ height: 38px; line-height: 38px; border-width: 1px; border-style: solid; background-color: #fff; border-radius: 2...
  • layui表格table.reload重载时,带了很多不该带的参数。 比如,我想它只传一个值给后端:where:{ id :data.id } 可他却多传了where:{id:data.id, page:1,curr:1} 这些 乱七八糟的 值。 这个问题困扰我半天了!!! ...
  • layui.js:2 Layui hint: The ID option was not found in the table instance table.reload('testReload',{ }); 此处的testReload 是 首次载入时候的参数 id代表的值 如果还有别的参数 可以加进来 ...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 292
精华内容 116
关键字:

layui表格重载