zoukankan      html  css  js  c++  java
  • LayUI最近遇到的问题以及处理

    layui是我最近才接触的..也是新项目中用到的后台前端框架..与easyui有些类似..在这段时间的使用中,经常会碰到大大小小的问题..

       1.选显卡切换又是加载数据表格。分页条不显示

       2.layui.open弹出框中的无法触发用js.或者jquery写得触发事件..

      等问题..但是这两个问题是我遇到过最坑的..

     至于解决办法

       1.针对分页栏无法显示..只能通过切换表格的时候重新加载数据表格

       2.弹出框中的事件..只能使用layui的事件方式触发..例如我做了个复选款权限树..

        但是却无法触发复选款改变事件..或者点击事件..通过不断的尝试..最后用了layui标准的复选款监听..才能触发..这浪费了我不少时间..

      

    $('#add-btn').click(function(){

    var index=layer.open({

    type: 1

    ,area: ['550px','400px']

    ,title: ['添加门店', 'font-size:16px;height:40px;line-height:40px;background:#fff;border-top:3px solid #3a90b8;border-bottom:1px solid #e0e0e0']

    ,content: str

    ,btn: ['确认', '取消']

    ,shade: 0.1 //不显示遮罩

    ,yes: function(index, layero){

    var str="";

    $("#tip-organ").html();

    $("#hidInfo").html();

    var organs=$("input[name='fen1']");

    var inpstr="";

    for(var i=0;i<organs.length;i++){

    var organ="";

    if(organs[i].checked == true){

    var title=organs[i].title;

    organ=organs[i].value;

    var id='id'+organ;

    console.log(id);

    str+=title;

    str+=':';

    inpstr+='<input type="hidden" name="organId" id="shopId" value="'+organ+'">';

    var online=$("#"+id+" input[name='type1']").is(':checked');

    console.log(online);

    var offLine=$("#"+id+" input[name='type2']").is(':checked');

    console.log(offLine);

    if(online==true && offLine==true){

    inpstr+='<input type="hidden" name="kind" id="applykind" value="3">'

    str+=$("#"+id+" .shop-two-unit input:checkbox[name='type1']:checked").attr("title");

    str+=",";

    str+=$("#"+id+" input:checkbox[name='type2']:checked").attr("title");

    }else if(offLine==true && online==false){

    var title=$("#"+id+" input:checkbox[name='type2']:checked").attr("title");;

    str+=title;

    str+=",";

    inpstr+='<input type="hidden" name="kind" id="applykind" value="2">'

    }else if(online==true && offLine==false){

    var title=$("#"+id+" input:checkbox[name='type1']:checked").attr("title");;

    str+=title;

    str+=",";

    inpstr+='<input type="hidden" name="kind" id="applykind" value="1">'

    }else{

    layer.msg('请选择门店活动适用范围!');

    return false;

    }

    }

    }

    $("#tip-organ").html(str);

    $("#hidInfo").html(inpstr);

    layer.closeAll();

    }

    ,cancel: function(index, layero){

    }, success: function(layero, index){

    shopstr=loadShopDom();

    $(".shop-r").html(shopstr);

    var form = layui.form;

    form.render('checkbox');

    $("document").on('click','#father',function(){

    alert("2");

    if ($(this).prop("checked") == true) {

    $(this).parents("li").eq(0).find("input:checkbox").prop("checked", true);

    } else {

    $(this).parents("li").eq(0).find("input:checkbox").prop("checked",false);

    }

    var form = layui.form;

    form.render('checkbox');

    });

    $('#father').click(function(){

    alert("2");

    if ($(this).prop("checked") == true) {

    $(this).parents("li").eq(0).find("input:checkbox").prop("checked", true);

    } else {

    $(this).parents("li").eq(0).find("input:checkbox").prop("checked",false);

    }

    form.render('checkbox');

    });

    form.on('checkbox(owner_one)', function(data){

    if ($(this).prop("checked") ==true) {

    $(this).parents("li").parents("li").eq(0).find("input:checkbox.father").prop("checked", true);

    } else {

    if ($(this).parents("li").parents("li").eq(0).find("input:checkbox:not(.father):checked").length == 0) {

    $(this).parents("li").parents("li").eq(0).find("input:checkbox.father").prop("checked",false);

    }

    }

    form.render('checkbox');

    });

    form.on('checkbox(owner_all)', function(data){

    var a = data.elem.checked;

    if(a == true){

    $(this).parents("li").eq(0).find("input:checkbox").prop("checked", true);

    form.render('checkbox');

    }else{

    $(this).parents("li").eq(0).find("input:checkbox").prop("checked",false);

    form.render('checkbox');

    }

    });

    }

    });

    });

    });

  • 相关阅读:
    细说mysql索引
    SQL常见优化Sql查询性能的方法有哪些?
    JDK提供的几种线程池比较
    JVM 内部运行线程介绍
    线上服务CPU100%问题快速定位实战
    浅谈Java中的hashcode方法
    Spring 核心组件工作原理简析
    SpringMVC工作原理
    open MMT.distributions = null on transaction type: WIP Lot Split
    OSFM Tables
  • 原文地址:https://www.cnblogs.com/dibinbin/p/layui.html
Copyright © 2011-2022 走看看