layui总结2

大大源码 • • 其他

JQuery基本用法

layui 在layer弹框中渲染表格table，表头内容对不齐问题

解决：在弹框成功回调后渲染表格，不要在外面。

此问题在type为1的页面层常见

layer.open({
   type: 1,
   title: 'xx',
   area: '800px',
   btn: ['确定', '取消'],
   skin: 'demo-class',
   content: $('#add-form')
   , success: function (index, layero) {//弹出层成功后回调
       // var tableHeight1 = $('.add-table').height();
       table.render({
           elem: '#add-table'
           , id: 'add-table'
           , cols: cols1
           , skin: 'line'
           , data: articleData1
           // , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
           // , defaultToolbar: []
           // , height: tableHeight - 47
           , done: function (res, curr, count) {
           }
       });
   },
   btn2: function (index, layero) {//取消
   },
   btn1: function (index, layero) {//确定回调

   }
});

layui 在layer弹框中渲染表格table，弹出框位置在最底部

解决： 表格渲染是添加参数 ：offset: ‘100px’,

$(document).on('click', '.add', function () {
   layer.open({
       type: 1,
       title: '分组',
       area: '800px',
       btn: ['确定', '取消'],
       skin: 'demo-class',
       offset: '100px',
       content: $('#add-form')
       , success: function (index, layero) {//弹出层成功后回调
           table.render({
               elem: '#add-table'
               , id: 'add-table'
               , cols: cols1
               , skin: 'line'
               , data: articleData1
               , done: function (res, curr, count) {
               }
           });
       },
       btn2: function (index, layero) {//取消
       },
       btn1: function (index, layero) {//确定回调
          
       },
   });
})

去掉layui树形表格外边框

/* 树形表格去除边框 */
.app-table.group .ew-tree-table {
    border: none;
}
.ew-tree-table .layui-table{
    border: none;
}

treeTable，formSelects（升级为xm-select），treeSelect引入的区别

treeTable：

在这里插入图片描述

<table id="app-table" lay-filter="app-table"></table>

// 表格树形结构
layui.config({//加载treeTable模块
    base: '../../../../layui-modules/'
}).extend({
    treeTable: 'treeTable'
});

layui.use(['tree', 'element', 'layer', 'form', 'table', 'laypage', 'treeTable', 'treeSelect'], function () {
    var tree = layui.tree;
    var element = layui.element;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var laypage = layui.laypage;
    var transfer = layui.transfer;//穿梭框
    var treeTable = layui.treeTable;


    var tableHeight = $('.layui-tab-content').height();
    // 渲染树形表格
    var insTb = treeTable.render({
        elem: '#app-table',
        // url: url,
        // where: postData,
        data: articleData,
        skin: 'line',
        tree: {
            iconIndex: 0,           // 折叠图标显示在第几列
            isPidData: true,        // 是否是id、pid形式数据
            idName: 'id',  // id字段名称
            pidName: 'pid'     // pid字段名称
        },
        cols: cols,
        height: 'full-180',
        page: false
        , limit: Number.MAX_VALUE
        , done: function (res, curr, count) {
        }
    });


    })

formSelects：

参考文档：https://dev.layuion.com/extend/formSelects/
在这里插入图片描述

<!-- 引入formSelects核心css -->
 <link rel="stylesheet" href="../../../../static/ajax/libs/formSelects/formSelects-v4.css" />
 <link rel="stylesheet" href="../../../../static/ajax/libs/layui/css/layui.css">

 <div class="list">
	 <div class="name">
	       设备
	   </div>
	   <div class="info">
	       <div class="se">
	           <select name="city" xm-select="selectEquipment" xm-select-search=""
	               xm-select-search-type="dl" xm-select-skin="normal">
	               <option value="">请选择设备</option>
	               <!-- <div th:each="device : ${list}">
	                   <option th:value="${device.deviceId}" th:text="${device.deviceName}">
	                   </option>
	               </div> -->
	           </select>
	       </div>
	   </div>
</div>

 <script src="../../../formSelects/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>

另外
formSelects停止维护, 新开发 xm-select , 稳定强大速度快 , 已迁移至全新版本 xm-select文档地址
在这里插入图片描述

xm-select :

在这里插入图片描述

参考文档:https://maplemei.gitee.io/xm-select/#/component/install
引入：

一种是：下载后，直接引入xm-selectjs即可

<!-- 引入xm-select核心js -->
<script src="../../../../static/ajax/libs/xmSelect/xm-select.js"></script>

而是这种形式引入:

// 表格树形结构
layui.config({//加载treeTable模块
    base: '../../../../static/ajax/libs/'
}).extend({
    //treeTable: 'layui-modules/treeTable',
    xmSelect: 'xmSelect/xm-select',
});

layui.use(['tree', 'element', 'layer', 'form', 'table', 'laypage', 'treeTable', 'treeSelect','xmSelect'], function () {
    var xmSelect = layui.xmSelect;//下拉框 树形结构选择框
    })

var demo1 = xmSelect.render({
	el: '#parent-demo',
	radio: true,//单选 默认多选false
	tips: '请输入分组名称',
	theme: {//主题颜色
            color: '#31478F',
        },
	// language: 'zn',//默认中文
	filterable: true,//搜索
    // toolbar: {
    //     show: true,
    //     list: ['ALL', 'REVERSE', 'CLEAR']
    // },
	tree: {
	   // //是否显示树状结构
	   // show: true,
	   // //是否展示三角图标
	   // showFolderIcon: true,
	   // //是否显示虚线
	   // showLine: false,
	   // //间距
	   // indent: 20,
	   // //默认展开节点的数组, 为 true 时, 展开所有节点
	   // expandedKeys: [], 
	   // //是否严格遵守父子模式
	   // strict: true,
	   // //是否开启极简模式
	   // simple: false,
	   // //点击节点是否展开
	   // clickExpand: true,
	   // //点击节点是否选中
	   // clickCheck: true,
	
	   show: true,
	   showFolderIcon: true,
	   showLine: true,
	   indent: 20,
	   expandedKeys: [ -3 ],//为true则所有默认展开
	   strict: false,//单选关键，不加点击父节点，也会选中所有子节点
	},
	
	data: function(){
	   var res= [
	       {name: '销售员', value: -1, disabled: true, children: [
	           {name: '张三1', value: 1, selected: true, children: []},
	           {name: '李四1', value: 2, selected: true},
	           {name: '王五1', value: 3, disabled: true},
	       ]},
	       {name: '奖品', value: -2, children: [
	           {name: '奖品3', value: -3, children: [
	               {name: '苹果3', value: 14, selected: true},
	               {name: '香蕉3', value: 15},
	               {name: '葡萄3', value: 16},
	           ]},
	           {name: '苹果2', value: 4, selected: true, disabled: true},
	           {name: '香蕉2', value: 5},
	           {name: '葡萄2', value: 6},
	       ]},
	   ]
	   res[0].selected = true;//默认选中第一个父节点
	   return res;
	},
    on: function(data){//监听选择
    	//arr:  当前多选已选中的数据
		var arr = data.arr;
		//change, 此次选择变化的数据,数组
		var change = data.change;
		//isAdd, 此次操作是新增还是删除
		var isAdd = data.isAdd;
		
		//可以return一个数组, 代表想选中的数据
		//return []


       var arr = data.arr;
       // setTimeout(function(){
       //     getData();
       // },500);
   },
  
  //其他事件看文档
  
})

treeSelect:

在这里插入图片描述

<div class="layui-form-item">
     <label class="new-form-label"><span class="must"></span>父组</label>
     <div class="new-input-block">
         <input type="text" id="treeSelect" lay-filter="tree" class="layui-input">
     </div>
 </div>  

  <!-- 引入treeSelects核心js -->
    <script src="../../../../static/ajax/libs/treeSelect/treeSelect.js" type="text/javascript" charset="utf-8"></script>

layui.use(['tree', 'element', 'layer', 'form', 'table', 'laypage', 'treeTable', 'treeSelect'], function () {
    var layer = layui.layer;
    var form = layui.form;
    var treeSelect = layui.treeSelect;

}）

layui表格 - 返回值自定义格式

parseData: function (res) {
      return {
          "code" : 0,
          "msg": "",
          "count": res.data.pageInfo.total,
          "data":res.data.pageInfo.list,
          "productData":res.data.productmaterialsList,
          "userData":res.data.userList,
      }
  },

select下拉框动态渲染后无效

原因：Layui会对select、checkbox、radio等原始元素隐藏，从而进行美化修饰处理。但这需要依赖于form组件，所以必须加载 form，并且执行一个实例。

解决：添加form.render();即可

$("#materialId").append("<option>111</option>")
form.render();

layui select在弹窗中select下拉框被遮挡显示不全

在这里插入图片描述
我们要这种效果：
在这里插入图片描述

解决：1 在layer.open中自定义一个类
2 根据类找到 layui-layer-content设置overflow:visible

/* 弹框自定义类class */
body .selectDiv .layui-layer-content{
	overflow:visible
}

layer.open(
{
	type:1 //Page层类型
	,area:['450px']
	,title: '关联资源包'
	,shade: 0.6 //遮罩透明度
	,maxmin:false //允许全屏最小化
	,btn: ['确定', '取消']
	,skin: 'selectDiv'
	,content: 
		'<div class="layui-form" style="padding:18px 10px 15px 5px">'+
			 '<div class="layui-form-item">'+
		     '<label class="layui-form-label" style="width:91px;text-align: left;">资源包ID</label>'+
		     '<div class="layui-input-block">'+
		      '<select name="city" lay-verify="required" class="sel_action">'+
		        '<option value=""></option>'+
		        '<option value="0">北京</option>'+
		        '<option value="1">上海</option>'+
		      '</select>'+
		     '</div>'+
		     '</div>'+
		'</div>'
	,success:function(layero, index){
		form.render('select');
	}
	,yes: function(index, layero)
	{
		
	
	}
});

layui弹框不垂直居中

加固定宽高解决了

 area: ['401px','376px'],

layui弹窗内自定义取消按钮，关闭弹框

//设置设备-弹窗
var LayIndex;
$(document).on("click", ".board-set", function () {
   $.get(url, function (res) {
       if (res.code == '0') {
           groupArr = res.data.deviceGroup;
           LayIndex=layer.open({
               type: 1,
               title: '<i class="title-img">&nbsp;&nbsp;</i>设置',
               // btn: ['确定', '取消'],
               skin: 'opacity-class',
               // offset: ['40%', '50%'],
               area: '344px',
               content: `
                      <form>
                      .
                      .
                      .
                         <div class="btnCon">
                              <button type="button" id="cancel">取消</button>
                              <button type="button" id="confirm">确定</button>
                          </div>

                      </form>
                   `,
               success: function (layero, index)//弹出层成功后回调
               {
               },
           })
       }
   })
})



//设置-取消按钮
$(document).on("click", "#cancel", function () {
    layer.close(LayIndex)
})

layui中 lay-verify="required"无效的解决办法

解决lay-verify="required"无效的两种解决办法
1.所有的表单元素必须要在表单中，注意class必须为layui-form。
2.中不能包含其他的，否则也会失效。
在这里插入图片描述
参考：https://blog.csdn.net/qq_38647006/article/details/103540776

解决方法：在提交按钮中加入lay-submit=""属性即可
在这里插入图片描述

//设置-确定按钮
 $(document).on("click", "#confirm", function () {
     $.post('/xxxx', paramData, function (res) {
         console.log(res, '提交res')
     })
 })

因为：

使用lay-verify有三个需要注意的地方:
1.form标签需要添加 class=“layui-form”
2.input标签需要添加 lay-verify=“required”
3.提交按钮需要添加 lay-submit=“”
4.提交代码
$(‘#LAY-save-submit’).on(‘click’, function(data){
console.log(data);
});
或者
var infoSubmit = $(“#LAY-save-submit”);
form.on(‘submit(LAY-save-submit)’, function(data){
console.log(data);
});
infoSubmit.trigger(‘click’);
参考：https://blog.csdn.net/z3zz3691/article/details/121538776

layui select option 获取自定义属性方法

select option 默认只有value属性 传值不够用
在layui里面支持属性 title

<select name="dinrk" lay-filter="companyList">
    <option value="">请选择</option>
    <option value="1" title="12.32">雪碧</option>
    <option value="2" title="2.01">芬达</option>
    <option value="3" title="34.51">冰糖雪梨</option>
    <option value="4" title="17.46">金贝</option>
</select>

form.on('select(companyList)', function(data){ 
    console.log(data.elem); //得到select原始DOM对象     
    console.log(data.value); //得到被选中的值             
    console.log(data.elem[data.elem.selectedIndex].text); //option的内容
    console.log(data.elem[data.elem.selectedIndex].title); //option的title
});

参考：https://blog.csdn.net/cai4561/article/details/106634740

版权声明：本文为hnn567原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>