精华内容
下载资源
问答
  • 【问题描述】在列表页面中,点击编辑按钮后,弹出一个layer层,在层中修改缩略图,但上传操作只执行了一次【问题所在】每次layer.open的时候都执行一次upload.render【解决方案】把upload.render放到layer.open的...

    【问题描述】

    在列表页面中,点击编辑按钮后,弹出一个layer层,在层中修改缩略图,但上传操作只执行了一次

    image.png

    image.png

    【问题所在】

    每次layer.open的时候都执行一次upload.render



    【解决方案】

    把upload.render放到layer.open的外面就解决了

    展开全文
  • 那么今天就来探讨一下layui下搜索一次后按钮失效是为什么呢? 其实 是dom被重构了,事件监听不到。 var $ = layui.$, active = { reload: function(){ var demoReload = $('#demoReload'); //执行重载 table....

    对于layui 有着非常好的demo,让很多人体验很好,很多完整的实例。

    那么今天就来探讨一下layui下搜索一次后按钮失效是为什么呢?

    其实 是dom被重构了,事件监听不到。

      var $ = layui.$, active = {
        reload: function(){
          var demoReload = $('#demoReload');
    
          //执行重载
          table.reload('testReload', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
                searchString: demoReload.val()
            }
          }, 'data');
        }
      };
    
    
      $('.demoTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });
    

    上面基本就是官方文档里面的,有的小伙伴可能实现起来并没有这么的顺利。如果搜索一次之后失效,换如下的方法:

    将$(’.demoTable .layui-btn’).on(‘click’, function(){ …})换成 $(‘body’).on(‘click’,’.demoTable .layui-btn’,function(){…})

      $('body').on('click','.demoTable .layui-btn',function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });
    

    谢谢大家支持~~~~

    展开全文
  • 根据官方文档: <!DOCTYPE html> <html> <head> <meta charset="utf-8">...Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-U...

    根据官方文档:

    <!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="//res.layui.com/layui/dist/css/layui.css"  media="all">
      <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body> 
     
    <div class="demoTable">
      搜索ID:
      <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
      </div>
      <button class="layui-btn" data-type="reload">搜索</button>
    </div>
     
    <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table> 
                   
              
    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script>
    layui.use('table', function(){
      var table = layui.table;
      
      //方法级渲染
      table.render({
        elem: '#LAY_table_user'
        ,url: '/demo/table/user/'
        ,cols: [[
          {checkbox: true, fixed: true}
          ,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
          ,{field:'username', title: '用户名', width:80}
          ,{field:'sex', title: '性别', width:80, sort: true}
          ,{field:'city', title: '城市', width:80}
          ,{field:'sign', title: '签名'}
          ,{field:'experience', title: '积分', sort: true, width:80}
          ,{field:'score', title: '评分', sort: true, width:80}
          ,{field:'classify', title: '职业', width:80}
          ,{field:'wealth', title: '财富', sort: true, width:135}
        ]]
        ,id: 'testReload'
        ,page: true
        ,height: 310
      });
      
      <!-- ----------------
         搜索执行重载部分-start
       ----------------- -->
      var $ = layui.$, active = {
        reload: function(){
          var demoReload = $('#demoReload');
          
          //执行重载
          table.reload('testReload', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
              key: {
                id: demoReload.val()
              }
            }
          }, 'data');
        }
      };
      
      $('.demoTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });
      <!-- ----------------
         搜索执行重载部分-end
       ----------------- -->
    });
    </script>
    
    </body>
    </html>

    其中需要注意几个参数:

    以上是重载时,需要关联到的参数


    发送请求时的请求体内容如下:

    默认的 第三个参数应该是  key[id]:xxx,因为我是按照 name 来搜索,所以将 id 改为 name


    遇到的问题:只能执行一次搜索功能

    原因:重载后,dom被重构了,事件监听不到

    解决办法:使用事件委托的方式去监听
    $('body').on('click', '目标选择器',function() { })

    如图

    参考链接:https://fly.layui.com/jie/33097/

    展开全文
  • layui上传文件的choose只触发一次

    千次阅读 2019-08-30 16:52:53
    原因: 1:没有选文件直接关闭文件... 2:多次执行初始化代码去重复渲染同一个DOM,这个第一次渲染之后选择文件会触发choose,后面如果还有render逻辑又 render了这个DOM 解决方法: var uploadRender = uploa...

    原因:

         1:没有选文件直接关闭文件选择窗口,而且本来也没有文件,这个时候file组件没触发change继而没有触发这个choose

         2:多次执行初始化代码去重复渲染同一个DOM,这个第一次渲染之后选择文件会触发choose,后面如果还有render逻辑又

            render了这个DOM

    解决方法:

          var uploadRender = upload.render();

          在choose方法中添加:uploadRender.config.elem.next()[0].value = '';

    展开全文
  • //只有执行了这一步,部分表单元素才会自动修饰成功 var $ = layui.jquery; form.render();//这里要加上 }) 情况2,如果情况1还不能解决问题,请更换js引用 可能是引用js错误,区别对待layui.js和layui.all.js...
  • layui中使用layer加载层,第一次默认360px,后面再点击就会正常,查了文档,如下: 由于我们的layer内置了轻量级加载器,所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层...
  • 监听submit提交 首先在layui中监听表单提交事件 form.on('submit(*)', function(data){ console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象 console.log(data.form) //被执行提交的form对象...
  • 不说了,直接上例子: 错误示例: ...var index = parent.layer.... //再执行关闭 }); 在上述这种情况下,可能会出现并没有正常关闭 正确示例: layer.msg(“注册成功”,{time:11000},function(){ var index = paren
  • webpack 内部执行流程一次完整的 webpack 打包大致是这样的过程:将命令行参数与 webpack 配置文件 合并、解析得到参数对象。参数对象传给 webpack 执行得到 Compiler 对象。执行 Compiler 的 run 方法开始编译。...
  • 博主写的项目中有需求是在个弹出层上再弹出另个弹出层,然后做完测试的时候发现,当你在点击多第二个弹出层时会非常卡顿,并且cpu顿时彪上去,测试发现弹出层的success的函数当你点击了多少它就执行了多少,而...
  • 1、使用 select 下拉选择框后在浏览器... 通过默认执行一次 click 事件触发 //状态选中项 var opts = $('.layer_update .layui-input-block dl.layui-anim dd') for (var i = 0; i < opts.length; i ++) { ...
  • 但是由于我在第一层的窗口中的一个按钮需要调用打开第二层窗口,所以就导致在代码上一个按钮绑定了两次click时间,在第一次使用过后,再去使用的时候会导致第一次的事件也会执行,页面上会多弹出一个窗口导致页面无法...
  • 开发工具与关键技术: Visual Stadio 2015与layui时间插件 ...如你所见,layDate 在 layui 2.0 的版本中迎来一次重生。无论曾经它给你带来过多么糟糕的体验,从今往后,所有的旧坑都将弥合。全面重写的 layDate 包含...
  • layui常见知识点

    2019-11-21 18:33:19
    下拉框的监听事件只能执行一次,应把下拉框改变所执行的操作写在一个监听事件中。 2、下拉框渲染传过来的值 下拉框传过来的值,已经选中,但是没有显示,可以考虑用 $scope.$apply(); $timeout(function () { ...
  • layui动态赋值select标签

    千次阅读 2020-02-16 13:34:55
    layui select标签中,请求接口里面的返回的json数据明明已经赋值给了select标签 但是无法显示。 因为在layui中所有的组件都是声明使用 ,你表面上看了是一个...简而言之就是在代码最后执行一次 form.render(); ...
  • 每次点了启用后,table并没有更新,导致重复点击按钮并不能切换执行启用和停用两个功能,数据库也只能更改最初的那一次,后来发现刷新整个页面,按钮才出现功能切换,查找发现, table.render({ elem: '#itemlist' ...
  • 反过来要是让事件多次执行该如何做? 这里可以配个setTimeout();来执行 这里我们用layui <link rel="stylesheet" href="./css/layui.css"/> <script src="layui.js"></script> <div ...
  • layui -走过的坑

    2019-12-23 15:22:21
    layui文件上传组件 1.多文件上传是发起多次请求。 2.上传的时候使用的onchange事件所有当你第一次上传的时候如果失败了,,第二次上传相同的文件就不会...(h5的决绝方法是在每一次执行完成之后就将value值置空) ...
  • layui实现多文件上传时,上传几个文件就会触发几次接口,但我希望它只执行一次,查了很多资料无果。 那就不去触发layui的接口了,那样会导致表单文件被重复提交, 所以我采用了ajax提交表单,formdata打包文件和表单...
  • layui中重新渲染表单这一步比较重要,部分表单元素...在每次操作部分表单元素后都进行一次调用 以上这篇在layui中select更改后生效的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支
  • layui+strust2多文件上传

    2019-07-18 21:20:00
    关于layui+strust2文件上传,action参数无需改变 ...所以可以看出,你前2个文件的上传,是自动执行的,执行时间都是一样的,但debug只能进入接口一次 所以,想通过回调函数...
  • 原因可能是upload.render方法执行一次之后,第二次没有把elem指定的这个元素对象重新生成,而是有选择性的更新对象的属性,比如file就应该没更新,还是上一次的file导致change方法没触发; 最简单的是把elem指定的...
  • layui框架checkbox,select标签不显示

    千次阅读 2019-03-21 10:49:58
    今天使用layui框架修改代码的时候出现了一个问题,页面中加入了checkbox和select标签,但是直接进入页面时不显示,点击一次刷新后才显示。 找了一个小时原因,后台在官方文档中看到一句话: Layui会对select、...
  • layui上传图片需携带额外参数

    千次阅读 2019-11-10 10:36:01
    最近项目中遇到上传图片需携带跳转链接额外参数的问题困扰...before)表示文件上传前的回调,注意此时已经加入上传队列而且上传前before只会执行一次; done)表示文件上传成功的回调,用来接收上传后返回的数据; 由...
  • layui使用某些注意点

    2019-07-30 16:16:00
    1.1存在多个搜索同一个table的时候因为搜索条件的不同table执行relode的方法时,之前搜索的参数如果不清除,而下一个搜索面板没有此参数时,搜索参数会携带上一次的条件 解决方案: .注意搜索时清空搜索条件且,要...
  • 使用layui的数据表格的时候,切记,每次当你点击,切换多少条/页的时候,会执行重新从后台读取一次数据,且layui的数据表格会返回你的limit值和page值,当你需要使用的时候,直接使用即可,至于是_POST[‘limit’],...
  • Layui 多文件上传限制数量

    千次阅读 2020-09-10 14:57:10
    多文件上传时需要自己设置限制数量,我的需求是...obj 每执行一次pushFile这个方法就会将本次选择的文件push 到obj 的文件属性下,并返回所有选择的文件 , choose: function (obj) { let curFiles = obj.pushFile();
  • 所以可以看出,你前2个文件的上传,是自动执行的,执行时间都是一样的,但debug只能进入接口一次 所以,想通过回调函数获取这些文件路径的兄弟,只需这么做即可 可以看到,我上传3个文件,没...
  • 注意:监听和验证的js代码要放在执行弹窗之前,最后再做一次渲染,这样页面的表单验证才生效 原因在于,layer.open中的content得到的是静态代码,所以js的验证是无效的,需要抢先执行。 function alertPage(title...
  • 关于 easy code 的配置之前有写过一次,但是里面存在许多的问题,有的当时没解决,有的当时没发现(感觉好坑啊),现在从新写过。 涉及 mybatis 同个标签中执行多条sql语句,因此 mysql(我的数据库)连接 url 需要...

空空如也

空空如也

1 2 3
收藏数 56
精华内容 22
关键字:

layui执行一次