JQuery基本用法
- layui 在layer弹框中渲染表格table，表头内容对不齐问题
- layui 在layer弹框中渲染表格table，弹出框位置在最底部
- 去掉layui树形表格外边框
- treeTable，formSelects（升级为xm-select），treeSelect引入的区别
- treeTable：
- formSelects：
- xm-select :
- treeSelect:
- layui表格 - 返回值自定义格式
- select下拉框动态渲染后无效
- layui select在弹窗中select下拉框被遮挡显示不全
- layui弹框不垂直居中
- layui弹窗内自定义取消按钮，关闭弹框
- layui中 lay-verify="required"无效的解决办法
- **layui select option 获取自定义属性方法**
- layui表格操作列右固定，且宽度自适应
- layer.open关闭弹窗的方法
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"> </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
有时候不行，可用下面的方法:
<select id="quotaType" data-select="type" lay-filter="quotaType">
<option data-idx='0' value="001" selected>字符</option>
<option data-idx='1' value="002">代码</option>
<option data-idx='2' value="003">日期</option>
<option data-idx='0' value="004">数值</option>
</select>
form.on('select(quotaType)', function (data) {
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
console.log(data.elem[data.elem.selectedIndex].dataset.idx); //得到select选中项的自定义属性值 data-idx
console.log(data.elem[data.elem.selectedIndex].text); //得到select选中项的值
console.log(data.elem[data.elem.selectedIndex].title); //得到被选中项的title
//或者
var bbb=$(data.elem[data.elem.selectedIndex]).attr("data-contract-id")
var aaa = $(data.elem).find("option:selected")[0].dataset.aaa;
});
layui表格操作列右固定，且宽度自适应
// {title: '操作', toolbar: '#log-bar',align: 'right', fixed: 'right', minWidth: '236'}
{title: '操作', toolbar: '#log-bar',align: 'right', fixed: 'right', width: 'auto'}
layer.open关闭弹窗的方法
if (result.code==200) {
layer.msg(result.msg, {icon: 1, time: 1000}, function () {
//当你在iframe页面关闭自身时 弹窗类型为2
// parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
//弹窗类型为1
layer.close(OpenIndex)
});
} else {
layer.msg(result.msg, {icon: 2, time: 1000});
}
1993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
