layui 學習筆記(一)

本文轉載自查看原文 2019-12-20 11:28 468 layui/ 前台

監聽：

　　監聽select

layui.use("form", function () {
    var form = layui.form;

    //- 代碼寫在這里面.

    form.on('select(pageFilter)', function(data){
        console.log(data.elem); //得到select原始DOM對象
        console.log(data.value); //得到被選中的值
        console.log(data.othis); //得到美化后的DOM對象
     });  
})

　　監聽checkbox

form.on('checkbox(change)',function(data){
　　console.log(data.elem.checked); //是否被選中，true/false
　　console.log(data.value); //復選框value值
});

　　監聽tab 標簽

// div 上要加這個：lay-filter="test" 別忘了-

layui.use('element', function(){

　　var $ = layui.jquery
        ,element = layui.element;
　　element.on('tab(test)', function(elem){
        switch (elem.index) {
            case 0:
                // 做件事
                return;
            case 1:
                // 做另一件事
                return;
            case 2:
                // 做另一件事
                return;
        }
        location.hash = 'test='+ $(this).attr('lay-id');
    });
});

　　#選項卡(tab)嵌套iframe

element.tabAdd('test',{
        title:"測試",
        content:'<iframe data-frameid="id" scrolling="auto" frameborder="0" src="我的url" style="width:100%;height:500px;"></iframe>',
        id:"寫一個id 用於跳到該tab"
});

element.tabChange('test',"這里寫id");// js跳轉

　　監聽彈窗點X 關閉 -> cancel:

　　例子：

var index = parent.layer.open({// 在父頁面上彈窗
            skin:'layui-layer-admin',// 皮膚
            title: '測試',// 標題
            type: 2,// 彈窗類型
            area: ['1000px', '500px'],// 彈窗大小
            fixed: false, //不固定
            maxmin: true, //放大恢復
            content: 我的url,
            cancel: function(index){
            　　 //do something
                //layer.close(index); //如果設定了yes回調，需進行手工關閉
 }
        });

樹：

　　樹的基本類型

layui.tree({
  elem: '#demo' //傳入元素選擇器
  ,nodes: [{ //節點
    name: '父節點1'
    ,children: [{
      name: '子節點11'
    },{
      name: '子節點12'
    }]
  },{
    name: '父節點2（可以點左側箭頭，也可以雙擊標題）'
    ,children: [{
      name: '子節點21'
      ,children: [{
        name: '子節點211'
      }]
    }]
  }]
});

點擊變色：

代碼：

layui.$("." + y).removeClass("custom-tree-item-clicked");
k.addClass("custom-tree-item-clicked");

第一步：tree.js

第二步：在layui.css 中加一個樣式

.custom-tree-item-clicked {
    color: #FC9003
}

回顯選中：

　　　　　　done:function(res, page, count){
              var data=res.data;
              for(var i=0;i<data.length;i++){
                  for(var j=0;j<menu.length;j++){
                      if(data[i].id==menu[j]){
                          res.data[i]["LAY_CHECKED"]='true';
                          var index= res.data[i]['LAY_TABLE_INDEX'];
                          $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                          $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                          break;
                      }
                  }
              }
              layui.form.render();
          }

表格：

　　去掉下拉箭頭樣式

.layui-table-grid-down {display: none;}

　　可編輯表格：

{field: 'iMax', title: '最大值',minWidth:74, edit: 'text'},

　　監聽編輯：

table.on('edit(test)', function(obj){
    var value = obj.value //得到修改后的值
        ,data = obj.data //得到所在行所有鍵值
        ,field = obj.field; //得到字段
    layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改為：'+ value);
  });

　　其中test為：　

復雜表頭

JS：
table.render({
  cols:  [[ //標題欄
    {field: 'username', title: '聯系人', width: 80, rowspan: 2} //rowspan即縱向跨越的單元格數
    ,{field: 'amount', title: '金額', width: 80, rowspan: 2}
    ,{align: 'center', title: '地址', colspan: 3} //colspan即橫跨的單元格數，這種情況下不用設置field和width
  ], [
    {field: 'province', title: '省', width: 80}
    ,{field: 'city', title: '市', width: 120}
    ,{field: 'county', title: '詳細', width: 300}
  ]]
});
 
它等價於：
<table class="layui-table" lay-data="{基礎參數}">
  <thead>
    <tr>
      <th lay-data="{field:'username', width:80}" rowspan="2">聯系人</th>
      <th lay-data="{field:'amount', width:120}" rowspan="2">金額</th>
      <th lay-data="{align:'center'}" colspan="3">地址</th>
    </tr>
    <tr>
      <th lay-data="{field:'province', width:80}">省</th>
      <th lay-data="{field:'city', width:120}">市</th>
      <th lay-data="{field:'county', width:300}">詳細</th>
    </tr>
  </thead>
</table>

　　排序

//“方法級渲染”配置方式
table.render({ //其它參數在此省略
  initSort: {
    field: 'id' //排序字段，對應 cols 設定的各字段名
    ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默認排序
  }
});
 
等價於（“自動化渲染”配置方式）
<table class="layui-table" lay-data="{initSort:{field:'id', type:'desc'}}" lay-filter="test"> …… </table>

　　layui table給指定條件的行換顏色

/**
 * 用於給指定行 換顏色
 * @type {{HideField, ParseDataTable, SetJqueryObj}}
 */

var LayUIDataTable = (function () {
    var rowData = {};
    var $;

    function checkJquery () {
        if (!$) {
            console.log("未獲取jquery對象，請檢查是否在調用ConvertDataTable方法之前調用SetJqueryObj進行設置！")
            return false;
        } else return true;
    }

    /**
     * 轉換數據表格。
     * @param callback 雙擊行的回調函數，該回調函數返回三個參數，分別為：當前點擊行的索引值、當前點擊單元格的值、當前行數據
     * @returns {Array} 返回當前數據表當前頁的所有行數據。數據結構：<br/>
     * [
     *      {字段名稱1:{value:"當前字段值",cell:"當前字段所在單元格td對象",row:"當前字段所在行tr對象"}}
     *     ,{字段名稱2:{value:"",cell:"",row:""}}
     * ]
     * @constructor
     */
    function ConvertDataTable (callback) {
        if (!checkJquery()) return;
        var dataList = [];
        var rowData = {};
        var trArr = $(".layui-table-body.layui-table-main tr");// 行數據
        if (!trArr || trArr.length == 0) {
            console.log("未獲取到相關行數據，請檢查數據表格是否渲染完畢！");
            return;
        }
        $.each(trArr, function (index, trObj) {
            var currentClickRowIndex;
            var currentClickCellValue;

            $(trObj).dblclick(function (e) {
                var returnData = {};
                var currentClickRow = $(e.currentTarget);
                currentClickRowIndex = currentClickRow.data("index");
                currentClickCellValue = e.target.innerHTML
                $.each(dataList[currentClickRowIndex], function (key, obj) {
                    returnData[key] = obj.value;
                });
                callback(currentClickRowIndex, currentClickCellValue, returnData);
            });
            var tdArrObj = $(trObj).find('td');
            rowData = {};
            //  每行的單元格數據
            $.each(tdArrObj, function (index_1, tdObj) {
                var td_field = $(tdObj).data("field");
                rowData[td_field] = {};
                rowData[td_field]["value"] = $($(tdObj).html()).html();
                rowData[td_field]["cell"] = $(tdObj);
                rowData[td_field]["row"] = $(trObj);

            })
            dataList.push(rowData);
        })
        return dataList;
    }

    return {
        /**
         * 設置JQuery對象，第一步操作。如果你沒有在head標簽里面引入jquery且未執行該方法的話，ParseDataTable方法、HideField方法會無法執行，出現找不到 $ 的錯誤。如果你是使用LayUI內置的Jquery，可以
         * var $ = layui.jquery   然后把 $ 傳入該方法
         * @param jqueryObj
         * @constructor
         */
        SetJqueryObj: function (jqueryObj) {
            $ = jqueryObj;
        }

        /**
         * 轉換數據表格
         */
        , ParseDataTable: ConvertDataTable

        /**
         * 隱藏字段
         * @param fieldName 要隱藏的字段名（field名稱）參數可為字符串（隱藏單列）或者數組（隱藏多列）
         * @constructor
         */
        , HideField: function (fieldName) {
            if (!checkJquery()) return;
            if (fieldName instanceof Array) {
                $.each(fieldName, function (index, field) {
                    $("[data-field='" + field + "']").css('display', 'none');
                })
            } else if (typeof fieldName === 'string') {
                $("[data-field='" + fieldName + "']").css('display', 'none');
            } else {

            }
        }
    }
})();

View Code

// 渲染表格 請調用前面的js
    var tableResult = table.render({
        elem: '#tableId',
        url: path + '/demo/list',
        page: true,
        height: "full-98",
        cellMinWidth: 100,
        cols: demo.initColumn(),// 
        done:function(res, curr, count){// 表格渲染完成之后的回調 --這里是重點
            LayUIDataTable.SetJqueryObj($);// 這個一定要加
            var currentRowDataList = LayUIDataTable.ParseDataTable(function (index, currentData, rowData) {
            })// 調用方法獲取每一行
            //LayUIDataTable.HideField('status');// 隱藏列-單列模式
            // 對相關數據進行判斷處理--此處對status借出&的進行高亮顯示
            $.each(currentRowDataList, function (index, obj) {
                if (obj['status'] && obj['status'].value == '當前面的值等於這個' && checkDate(obj['returnDate'].value)) {
                    obj['status'].row.css({'color': '#ff5722'});// 字體顏色改為橙色
                    //obj['status'].row.css({"background-color": "#009966", 'color': '#99CCCC'});
                }
            })

        }
    });

　　換某個表頭顏色：

　　如果改整個表頭顏色就不用[]里的內容了

　　{field: 'xxname', sort: true, title: '名稱',width:'170'},

,done:function(){
            $('th[data-field=xxname]').css({'background-color': '#5792c6', 'color': '#fff','font-weight':'bold'}) 
}

　　　table.reload 想返回第一頁-> page: {curr: 1 //重新從第 1 頁開始 }

table.reload("tableId",{page: {curr: 1 }});

　　　刷新回到當前頁：不用reload 直接觸發點擊當前頁事件 (這里是在網上找的答案。試了一下好用，先收藏起來)

$(".layui-laypage-btn")[0].click();

彈窗：

var index = layui.layer.open({
            skin:'layui-layer-admin',// 皮膚
            title: "title名字",
            type:2,// 彈窗類型 默認是打開html 2代表url
            content: url寫這里,
            area : ['1000px','370px'],// 彈窗大小寫這里
            btn : ['保存','第二個按鈕','取消'],// 按鈕寫這里
            success: function(layero){
                layero.find('.layui-layer-btn').css('text-align', 'center'); //改變位置按鈕居中，調整按鈕位置為中間
　　　　　　　　　 body.find("#pId").val($('#id').val());// 這里可以給頁面傳值 當然也可以通過url 傳值
            },
            yes : function(){
　　　　　　　　　　//調用子頁面的保存方法 
                window["layui-layer-iframe" + index].chartConfig.save();
            },
            btn2 : function(){
　　　　　　　　　　// 調用第二個btn 時觸發
            },
});

全屏彈窗：

var index =parent.layer.open({
            id: 'id',
            type: 2,
            area: ['100%', '100%'],
            fix: false,
            //maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: '名字',
            content: url,
 });
layer.full(index);

彈窗按鈕居中：btnAlign: 'c',

彈窗按鈕顏色修改：

layer.confirm('我是誰？', {
       skin: 'layui-layer-admin layui-my-skin',// 自定義樣式
       btn: ['按鈕1','按鈕2','取消'] //按鈕
}, function(index){
        layer.close(index);
        // 按鈕1事件
}, function(index){
         layer.close(index);
        // 按鈕2事件
});

.layui-my-skin .layui-layer-btn1{
        border-color: #1E9FFF;
        background-color: #1E9FFF;
        color: #fff;
}

輪播圖：

　　需要注意：輪播圖的div 不能放在 form 標簽下不然左右箭頭不好用。按官網的方法寫就可以了。

　　html:

 <div class="layui-carousel" id="test2" >
         <div carousel-item=""  id="uploadDiv">
                  <div>條目1</div>
                  <div>條目2</div>
          </div>
  </div>

　　js:

layui.use(['form','layer','carousel'], function () {
　　 var $ = layui.$;
    var carousel = layui.carousel;// 輪播

 　　// 初始化輪播圖
    var ins = carousel.render({
        elem: '#test2'
        ,interval: 3000
        ,anim: 'fade'
        ,height: '120px'// 高
        ,width: 'auto'// 寬
        //,arrow: 'always' //始終顯示箭頭
    });
　 
　　...
　　...

　　// 動態添加輪播圖div后需要重置輪播圖
　　ins.reload({elem: '#test2'});

});

上傳文件：

上傳文件傳值的問題：在before 里寫this.data

var upload = layui.upload;
upload.render({
    elem: '#test1'
    ,url: url接口
    ,auto: false
    ,accept: 'file' //普通文件
    ,bindAction: '#test2'
    ,done: function(res){
        layer.closeAll('loading');
        // 這里做點事
    },before: function(obj){
        layer.load(); //上傳loading
        // 這里處理需要傳值的數據
        this.data={
            'xxx':xxx,
            'xx':xx };
    }
});

穿梭框：

　　按官網的方法寫就可以了。

html:

 <div id="test4" class="demo-transfer"></div>

js:

layui.use(['form', 'admin', 'ax','transfer','layer','util'], function () {

　　var transfer = layui.transfer
         ,layer = layui.layer
          ,util = layui.util;


　　//顯示搜索框
    transfer.render({
        elem: '#test4'
        ,data: result // 后台傳過來就 可以List<對象> 
        ,title: ['可選XX', '已選XX']
        ,id: 'demo' //定義索引
        ,showSearch: true
        ,height:'480'
        ,width:'350'
　　　　　,onchange:function(data,index){// 這里可以想成穿梭框監聽
　　　　　　// data為當前被穿梭的數據 index為0或1 代表穿梭的方向
　　　　　}
    })

　　// 獲取穿梭框右側數據

　　var data1=transfer.getData('demo');
　　// 如果想直接傳后台轉成json -> JSON.stringify(data1);

});

java:

后台接收json

public void demoItem(HttpServletRequest request) {
        String jsonData=request.getParameter("jsonData");
        List<BasicTransferParam> data = new ArrayList<BasicTransferParam>();
        try {
            jsonData = URLDecoder.decode(jsonData, "utf-8");
            ObjectMapper mapper = new ObjectMapper();
            CollectionType listType = mapper.getTypeFactory().constructCollectionType(ArrayList.class, BasicTransferParam.class);
            data = mapper.readValue(jsonData, listType);
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    　　xxxx xxxxxx這里做處理

    
}

對象:

@Data
public class BasicTransferParam implements Serializable, BaseValidatingParam {

    private static final long serialVersionUID = 1L;

    private Integer value;// id

    private String title;// 展示的名

    private Boolean disabled;// 是否可用

    @Override
    public String checkParam() {
        return null;
    }

}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 layui 學習筆記(六) 流加載 Layui學習筆記（一）—— 關於模塊的擴展 layui 學習筆記一：layui table 查詢、新增、編輯、刪除 springboot+layui 學習筆記01 《學習筆記》Layui-WPF窗體美化《學習筆記》Layui-WPF按鈕美化 layui筆記 layui 學習筆記(四) 復雜表頭前台Excel導出 layui 學習筆記(五) 可輸入下拉選 & 可輸入標簽 RageFrame學習筆記：創建路由+導入layui