layuiadmin(iframe)常用問題集錦

 

1. 彈出窗口中傳值給父層表單

    table.on('tool(tableList)', function(obj){
        var selected = obj.data;
        var layEvent = obj.event;
        if(layEvent === 'selected'){
            parent.layui.$('#ptCode').val(selected.ptCode); //此處給父層表單字段ptCode傳值
            parent.layer.close(index);
        }
    });

2.彈窗口中關閉自身

index=parent.layer.getFrameIndex(window.name);  //先獲得父層窗口索引
parent.layer.close(index); //再關閉

3. 實時監控輸入框中文本變化

這個在實時模糊查詢中特別常見，

#keywords為輸入框的id。先獲取輸入框的值，然后執行表格的查詢操作。

$("#keywords").on("input",function(e){
        //獲取input輸入的值
        var keywords = e.delegateTarget.value;
        table.reload('tableList', {where: {keywords: keywords},page:{curr:1}});
});

4. 表單的輸入框后面添加按鈕，並觸發按鈕事件

          <div class="layui-inline">
                   <label class="layui-form-label-sm">商品信息</label>
                   <div class="layui-input-inline-sm">
                   <input type="text" id="ptCode" name="ptCode"  class="layui-input-sm">
                   <i class="layui-icon layui-icon-template-1 layui-btn layui-btn-sm" data-type="popSearchProduct" style="margin-left:-10px;height:28px;"></i>
                   </div>
          </div> 

看看效果，下面商品后面有個按鈕，用來彈出搜索框：

5. 按鈕觸發事件

layui的按鈕觸發事件有幾種，這里介紹一種常用的：

    //根據表單中data-type的值判斷
    active={
            popSearchProduct: function(){
                  layer.open({title: '商品搜索', type:2, offset:'50px', area:['620px','510px'], content: ctx + '/product/productSearch' });
            }
    };
   
    //觸發表單中帶layui-btn-sm的按鈕的單擊事件
    $('.layui-btn-sm').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });

6. 指定默認日期作為查詢條件

剛開始進入查詢頁面時，默認條件都為空，查詢所有。如何指定默認日期作為開始查詢條件。

   在開始查詢時，添加where條件，填寫默認查詢條件。

        table.render({
              elem: '#lay-tableList'
              ,url: ctx+'/customInfo/ajaxCustomInfoList'
              ,size:'sm'
              ,cellMinWidth: 80
              ,request: {
                  pageName: 'pageNo'
                  ,limitName: 'pageSize'
              }
              ,method: 'post'
        ,where:{
                   status: "0"
                  ,startDate: layui.util.toDateString(new Date()-1000*60*60*24*30, 'yyyy-MM-dd')
         }

 注意：應該算個缺陷，開始進入頁面時查詢的時間參數傳遞到后台了，但是前端頁面上還是沒有顯示出這個時間。

 這里where必須何form.val結合使用。因為只是在where添加查詢條件，但是界面顯示不出來查詢條件的值。

 

        //設置表單初始值
        form.val('searchForm', {
            status: "0"
            ,startDate: layui.util.toDateString(new Date(new Date() - 1000 * 60 * 60 * 24 * 30),'yyyy-MM-dd')
        });

7. Layui iframe如何清理緩存

我用的是iframe的，所以下面這段放到通用的header里面就行了。這樣每次修改了layui內容或者升級版本的時候，在通用的文件中直接修改這里的版本號就可以了。

一直很想吐槽，官方文檔很多地方寫的一知半解的，讓人丈二和尚摸不着頭腦。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/page/commons/taglibs.jsp"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<script type="text/javascript">
    //定義全部變量
    var ctx = "${pageContext.request.contextPath}";</script>
<link type="text/css" href="${ctx}/resources/layuiadmin/layui/css/layui.css" media="all" rel="Stylesheet" />
<link type="text/css" href="${ctx}/resources/layuiadmin/style/admin.css" media="all" rel="stylesheet">
<script type="text/javascript" src="${ctx}/resources/layuiadmin/layui/layui.js"></script>
<script> layui.config({ version: '20190604' ,base: ctx + '/resources/layuiadmin/' }); </script>

 

 

8. 關於彈窗高度自適應寫法

我原來是寬度和高度，都是手工寫的。每次表單增減字段時，也是手工去改這個高度。

原來以為只有我這么干的，后來在群里聊天發現也有很多跟我一樣，也是這么手工調整的。

 

在彈窗的成功回調函數中寫layer.iframeAuto(index); 

                   var index2 = layer.open({
                        title: '添加報廢單'
                        ,type: 2
                        ,offset: '50px'
                        ,area: '60%'
                        ,content: ctx + '/saleReturnOrder/popScrap?id='+ line.id
                        ,success: function(layero, index){
                           layer.iframeAuto(index);
                        }
                    });  

看看官方文檔，呵呵，有些東西一點就破，很多時候是因為差了那么一點點火候 ：

 

9. table中的數據校驗

這段也是在社區里面扒出來的，用於在table中使用編輯表格時的校驗，功能體驗很贊：

    //數據校驗
    table.on('edit(tableList)', function(obj){
   
     var lineData = obj.data;
     var value = obj.value;
     var field = obj.field;
     var inputElem = $(this);
     var tdElem = inputElem.closest('td');
     var valueOld = inputElem.prev().text();
     var  data = {};
     var errMsg = ''; // 錯誤信息
    
         if (field === 'tmpRepairQty') {
          var re = /^(\-|\+)?\d+(\.\d+)?$/;
          if (!re.test(value)) {
            errMsg = '只允許輸入數字';
          }
          if (value < 0) {
             errMsg = '數量不允許小於0';
          }
          var returnQty = lineData.returnQty | 0;
          var scrapQty = lineData.scrapQty | 0;
          var repairQty = lineData.repairQty | 0;
          var value = value | 0;
          var openQty = returnQty - scrapQty - repairQty;
          if(value > openQty ){
              errMsg = '數量不允許大於未結數量' + openQty;
          }
        }
        
 
        if (errMsg) {
           // 如果不滿足的時候
           data[field] = valueOld;
           layer.msg(errMsg, {time: 1000, anim: 6, shade: 0.01}, function () {
             inputElem.blur();
             obj.update(data);
             tdElem.click();
           });
         }

10. 如何在layui中使用echarts

首先使用繼承方式引入echarts和echartsTheme，注意兩個都要，一個頁面中只需要引入一次。

然后輪播切換這段函數也要保留。不然圖片沒法顯示。

下面的ajax請求根據echarts官方文檔，自己發揮。

  //最近30天成交趨勢
layui.extend({
     echartsTheme: 'lib/extend/echartsTheme' 
    ,echarts: 'lib/extend/echarts'
}).use(['carousel', 'echarts'], function(){
        var $ = layui.$
        ,carousel = layui.carousel
        ,element = layui.element
        ,device = layui.device();

        //輪播切換
        $('.layadmin-carousel').each(function(){
          var othis = $(this);
          carousel.render({
            elem: this
            ,width: '100%'
            ,arrow: 'none'
            ,interval: othis.data('interval')
            ,autoplay: othis.data('autoplay') === true
            ,trigger: (device.ios || device.android) ? 'click' : 'hover'
            ,anim: othis.data('anim')
          });
        });

    //-------------------------以上必須要---------------------------------------------------

       $.ajax({
           url: ctx +'/biGeneral/ajaxLineChart'
           ,type:'post'
           ,dataType: 'json'
           ,success: function(res){               
                var echartsApp = [], options = [{
                    tooltip : {trigger: 'axis'},
                    calculable : true,
                    legend: {data:['訂單量','銷售額'] },
                    toolbox: {show : true,
                        feature : {
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                        }
                    },
                        xAxis : [{ type : 'category',data :res.date }],
                        yAxis : [{type : 'value', name : '訂單量', axisLabel : {formatter: '{value} 個'}},
                                     {type : 'value', name : '銷售額', axisLabel : {formatter: '{value} 元'}}
                                   ],
                        series : [
                                      {name:'訂單量', type:'line', data: res.orderCount, markPoint: {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]} },
                                       {name:'銷售額', type:'line', yAxisIndex: 1, data: res.saleAmt, markPoint: {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]} },
                                  ]
                 }]
                    ,elemDataView = $('#trade_last30day').children('div')
                   ,renderDataView = function(index){
                    echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
                    echartsApp[index].setOption(options[index]);
                    window.onresize = echartsApp[index].resize;
                };
                //沒找到DOM，終止執行
                   if(!elemDataView[0]) return;
                   renderDataView(0);               
           } //success
       }); 


  });


});

 截圖是隨便截的，不代表上面代碼。

 

 

 

11. layui表格行工具欄和表格頭工具欄監聽

已知表格設置如下：

<table id="lay-tableList" lay-filter="laytool"></table> 

1）表格頭設置：

定義模版,設置唯一id值，添加事件選擇器lay-event，然后在渲染時綁定到table中。

        <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm layuiadmin-btn-list" lay-event="add">新增</button>
                <button class="layui-btn layui-btn-sm layuiadmin-btn-list" lay-event="refresh">刷新</button>
        </div>
        </script>

 

設置表格頭按鈕監聽事件，這里table.on()里面是toolbar，意思為監聽表格頭，括號里面與table的lay-filter保持一致。

    //監聽表格頭工具欄
    table.on('toolbar(laytool)', function(obj){
        if(obj.event === 'add') {
　　　　　　　　//新增邏輯
        };
        
        if(obj.event === 'refresh'){
            //刷新邏輯
        }
        
    });

2）表格行按鈕監聽

定義模版,設置唯一id值，添加事件選擇器lay-event，然后在渲染時綁定到table中。

        <script type="text/html" id="toolline">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>編輯</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>刪除</a>
        </script>   

設置表格行按鈕監聽事件，這里table.on里面是tool，括號里面與表格的lay-filter保持一致。

    //監聽行工具條
    table.on('tool(laytool)', function(obj){
              var selected = obj.data;
              var layEvent = obj.event; 
              
              //修改維修單
              if(layEvent === 'del'){
                  //刪除邏輯
              }
              if(layEvent === 'edit'){   
　　　　　　　　　　 //編輯邏輯             
              }
    });

 

最后表格的完整渲染：

在渲染元素中添加toolbar，即表示頭工具欄。

在cols元素中添加 '操作' 字段, 設置toolbar對應的模版id值toolline。

        table.render({
              elem: '#lay-tableList'
              ,url: ctx+'/dictList/ajaxPageList'
              ,size:'sm'
              ,cellMinWidth: 60 
              ,toolbar: '#toolbar'
              ,request: {
                  pageName: 'pageNo'
                  ,limitName: 'pageSize'
              }
              ,cols: [[
//                  {type: 'checkbox', fixed: 'left'}
                ,{field: 'id',title: 'id', hide:true}
                ,{field: 'code', title: '編碼'}
                ,{field: 'codeName', title: '編碼-說明'}
                ,{field: 'value1', title: '值'}
                ,{field: 'value1Name', title: '值-說明'}
                ,{field: 'value2', title: '值2'}
                ,{field: 'value2Name', title: '值2-說明'}
                ,{field: 'isDefault', title: '默認值', width:70 ,templet:function(d){ return d.isDefault == '1' ? '是' : '否';}}
                ,{field: 'sortNum', title: '排序號', width:70 }             
                ,{title: '操作', width: 150, align: 'center', fixed: 'right', toolbar: '#toolline'}
              ]]
        ,page: true
        ,limit: 15
        ,limits: [10, 15, 20, 25, 30]
        ,text: {none: '暫無相關數據'}
    });

 

最后頁面顯示如下：

 

12. 數組操作

//1. 數組中判斷對象是否存在，根據id判斷    
    Array.prototype.indexOf = function(val){
            for(var i=0; i<this.length; i++){
                if(this[i].id == val) return i;
            }
            return -1;
        };
//2. 數組中是篩選記錄
selectData = oldData.filter(item => item.id !== selected.id);

 

 

 

 

如果有好的問題，歡迎留言或者站內消息給我。