layui 学习笔记(一)

相关网站：

layui 官网：https://www.layui.com/

layui 弹窗：http://layer.layui.com/

layui select :xm-select参考(推荐)：　https://maplemei.gitee.io/xm-select/#/basic/prop 

　　　　　下载地址：https://gitee.com/maplemei/xm-select

　　　　　formselect参考: https://hnzzmsf.github.io/example/example_v4.html

第三方组件参考：  https://fly.layui.com/extend/

　　　　　layui-soul-table(表格拖拽 子表格 复杂表格)：https://saodiyang.gitee.io/layui-soul-table/#/zh-CN/component/changelog

　　　　　　　　　　　（暂时没用过先收藏 下载地址： https://github.com/yelog/layui-soul-table ）

监听：

　　监听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-frame>,
        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