layui 处理搜索条件过多时只显示一行其他隐藏 点击时再显示

                <div class="layui-tab-item FKCXbody"> 

<div class="layui-inline layuiBtn">

                                <button class="layui-btn" onclick="FKCXquery()">

                                    查询

                                </button>

                                <button class="layui-btn" onclick="outputVipFKCX()">

                                    导出

                                </button>

                                <span class="gengduoimg" onclick="gengduo('FKCXbody')"><i class=" layui-icon layui-icon-spread-left" style="font-size: 15px;"></i> </span>

                            </div>

</div>

//搜索条件重新排版

//这里的参数div 是最大容器的class名 FKCXbody

function rearrangeYEJFDome(div){

  let toolbarDome =$(`.${div} .layui-form-item`)

  toolbarItemwidth=$(".toolbar-item").width()

  toolbarDome.width(toolbarItemwidth-300)

  //保存搜索框高度

   toolbarheight=toolbarDome.height()

    $(`.${div} .layui-form-item .layui-inline`).each(function() {

        w+=parseInt($(this).width());

    });

    if(w>toolbarDome.width()){

      toolbarDome.height(43)

    }else{

      //宽度总和小于等于一行宽度时隐藏下拉图标

    $(`.${div} .gengduoimg`).css('display','none')

    }

}

  //点击更多

//div 

function gengduo(div){

  let toolbarDome =$(`.${div} .layui-form-item`)

  if(toolbarDome.height()<50){

    $(`.${div} .gengduoimg`).css('transform','rotate(-90deg)')

    toolbarDome.height(toolbarheight)

    $(`.${div} .layui-form`).height(toolbarheight)

    $(`.${div} .toolbar-item`).height(toolbarheight)

    let tableBodyheight= $(`.${div} .layui-table-body`)

    let minus=tableBodyheight.height()-toolbarheight+40

    $(`.${div} .layui-table-body`).height(minus)

    $(`.${div} .layui-border-box`).height($(`.layui-border-box`).height()-toolbarheight+40)

  }else{

    toolbarDome.height(43)

    $(`.${div} .gengduoimg`).css('transform','rotate(90deg)')

    $(`.${div} .layui-form`).height(43)

    let tableBodyheight= $(`.${div} .layui-table-body`)

    $(`.${div} .toolbar-item`).height(30)

    let minus=tableBodyheight.height()+toolbarheight-40

    $(`.${div} .layui-table-body`).height(minus)

    $(`.${div} .layui-border-box`).height($(`.${div} .layui-border-box`).height()+toolbarheight-40)

  }


}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。