1. layui页面打开弹出层，弹出层向页面传递参数
父组件
function jump(){
// 跳转页面的路径
let url = ""
var index = layer.open({
title: '弹出层',
type: 2,
shade: 0.2,
area: ['40%','40%'], //弹出层大小
content: url,
})
}
function getMachineType(machine_type) {
console.log(machine_type)
}
弹出层
layui.use(['layer', 'form'], function() {
var layer = layui.layer，
form = layui.form;
$ = layui.$;
form.render();
$('.submit').click(function() {
var machine_type = $(this).attr("machine_type") // 获得machine_type的值
parent.getMachineType(machine_type); // 向父组件传递machine_type
var index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
parent.layer.close(index); //关闭当前弹窗
})
});
2. layui获得选项卡的index，判断当前在那个选项卡
HTML部分
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this used">闲置(<i>0</i>)</li>
<li class="unused">全新(<i>0</i>)</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<ul class="news-foot-ulS" id="apply1">
<li>暂无内容</li>
</ul>
</div>
<div class="layui-tab-item">
<ul class="news-foot-ulS" id="apply2">
<li>暂无内容</li>
</ul>
</div>
</div>
</div>
JS部分
layui.use(['form', 'global', 'layedit', 'laydate', 'flow', 'element'], function() {
var form = layui.form,
layer = layui.layer,
element = layui.element,
laydate = layui.laydate;
element.on('tab(docDemoTabBrief)', function(data){
tabIndex = data.index
})
})
3. layui获取数据表格选中数据
HTML部分
<div class="machine-list">
<div class="layui-tab-content layui-tab-content-bor">
<table id="table-list" class="layui-table" lay-filter="table-list"></table>
</div>
<script type="text/html" id="auth-state">
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="show">查看</a>
</script>
</div>
JS部分
layui.use(['form','selectTree', 'table'], function() {
var form = layui.form,
selectTree=layui.selectTree;
table = layui.table;
//绘制表格
table.render({
elem: '#table-list',
url: '',
page: true,
//表格的列
cols: [
[
//勾选框
{type: 'checkbox', fixed: 'left'},
{
field: 'code',
title: '编码',
align: 'center'
},
{
field: 'name',
title: '产品名称',
align: 'center'
},
//操作箱
{
templet: '#auth-state',
width: 150,
align: 'center',
fixed: 'right',
title: '操作'
}
]
],
//数据返回格式与layui数据表格要求不同，进行处理，如果相同不需要
parseData: function(res){ //res 即为原始返回的数据
if (res.code == 200) {
return {
"code": 0,
"msg": res.message,
"count": res.data.count,
"data": res.data.data
};
}
},
done: function() {
table.resize('table-list');
layer.closeAll('loading');
}
});
//点击表格的勾选时监听数据表格的勾选
table.on('checkbox(table-list)', function(obj){
console.log(obj.data)
});
//点击按钮获得数据表格的勾选数据
$('#confirm').click(function(obj) {
/* 获得选中数据 */
var list= layui.table.checkStatus('table-list').data;
console.log(list)
})
});
4. layui保存form，并进行回显
使用场景：填写信息进行保存，不提交，刷新页面填写的内容不清空，可以直接提交
HTML部分
<form class="layui-form" lay-filter="unused-apply-form" action="" enctype="multipart/form-data">
<div class="layui-form layuimini-form">
<div class="content-main">
<div class="form-item">
<div class="layui-col-md12 layui-col-sm12">
<div class="layui-col-md6 layui-col-sm12">
<div class="layui-col-md4 layui-col-sm12">
<label class="layui-form-label">所属部门：</label>
</div>
<div class="layui-col-md8 layui-col-sm12">
<div class="layui-input-block">
<input name="emploee" id="emploee-depart" type="text" placeholder="请输入所属部门" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md6 layui-col-sm12">
<div class="layui-col-md4 layui-col-sm12">
<label class="layui-form-label"><span class="required">*</span>申请人：</label>
</div>
<div class="layui-col-md8 layui-col-sm12">
<div class="layui-input-block">
<input type="text" placeholder="请输入账号使用人" value="test" disabled="disabled" lay-verify="required" class="layui-input layui-disabled">
</div>
</div>
</div>
</div>
</div>
<div class="sent-btn-list sent-btn-list-sy">
<button class="layui-btn layui-btn-primary" type="button" lay-submit lay-filter="saveBtn" id="save">保存</button>
</div>
</div>
<div style="clear:both;"></div>
</div>
</form>
JS部分
// 保存数据到本地
form.on('submit(saveBtn)',function(data){
if ($('#save').attr('disabled') == 'disabled') {
return false;
}
// form数据
var save_data = data.field
//保存到本地
layui.data('save_data', {
key: 'data',
value: save_data
});
console.log(layui.data('save_data').data)
})
//数据回显
function apply_data () {
//从本地获取数据
var saveData = layui.data('save_data').data
//判断本地是否有数据，是否为空
var uncommitted = $.isEmptyObject(saveData )
console.log(uncommitted)
if (!uncommitted) {
form.val('unused-apply-form',{
emploee: saveData .emploee,
})
}
}
5. layui 使用省市区三联动代码layarea.js
HTML部分
div class="layui-form-item" id="area-picker">
<div class="layui-input-inline" style="width: 200px;">
<select name="province" class="province-selector" data-value="北京市" lay-filter="province-1">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="city" class="city-selector" data-value="北京市" lay-filter="city-1">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="county" class="county-selector" data-value="东城区" lay-filter="county-1">
<option value="">请选择区</option>
</select>
</div>
</div>
JS部分
layui.config({
//自己的路径
base: '__NEWADMIN__/js/lay-module/',
version: '1.0'
})
layui.use(['form','layarea'], function() {
var form = layui.form,
layarea = layui.layarea;
layarea.render({
elem: '#area-picker',
// 修改输入框的默认值，此时不能设置data-value
data: {
province: '上海市',
city: '上海市',
county: '黄浦区'
},
change: function (res) {
console.log(res)
}
})
}）
NEWADMIN/js/lay-module/ – 对应路径
NEWADMIN/对应public/static
github – layarea
layui中layarea第三方组件库
6. layui监听checkbox是否勾选(数据表格勾选的监听)
1、
<input type="checkbox" lay-filter="is_unify_address" name="is_unify_address" title="统一资产位置" lay-skin="primary" checked>
form.on('checkbox(is_unify_address)', function (data) {
console.log(data.elem.checked)
})
2、数据表格勾选的监听
layui.use(['element', 'form', 'table','formInput'], function () {
var form = layui.form;
var table = layui.table;
var formInput = layui.formInput;
table.on('checkbox(table-list)', function (obj) {
if (obj.type == 'all') {
if (obj.checked) { // 全选
} else { // 取消全选
}
} else {
var data = obj.data;
if (obj.checked) { // 选中
}
} else { // 取消选中
}
}
});
})
7. 根据条件判断layui数据表格的列数据是否能修改
以checkbox为例，如第六条，地址勾选表格不能修改，未勾选则将输入框的值同步到表格的列
<input name="address" type="text" placeholder="请输入资产位置" lay-verify="required" class="layui-input machine_address">
<input type="checkbox" lay-filter="is_unify_address" name="is_unify_address" title="统一资产位置" lay-skin="primary" checked>
//表格部分
<div class="layui-tab-content layui-tab-content-bor">
<table id="table-list" class="layui-table" lay-filter="table-list"></table>
</div>
<script type="text/html" id="auth-state">
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="delete">删除</a>
</script>
layui.use(['form', 'layedit','formSelects', 'table', 'laydate'], function() {
var form = layui.form,
layer = layui.layer,
laydate = layui.laydate;
table = layui.table;
//数据表格
table.render({
elem: '#table-list',
//数据表格获取数据的接口
url: '',
page: true,
cols: [
[
{
field: 'code',
title: '资产编号',
align: 'center'
},
{
field: 'address',
align: 'center',
title: '资产位置'
},
{
templet: '#auth-state',
width: 150,
align: 'center',
fixed: 'right',
title: '操作'
}
]
],
//返回的数据和layui要求的数据格式不一样进行处理，一样则不需要
parseData: function(res){ //res 即为原始返回的数据
if (res.code == 200) {
return {
"code": 0,
"msg": res.message,
"count": res.data.count,
"data": res.data.data
};
}
},
done: function() {
table.resize('table-list');
layer.closeAll('loading');
}
});
//监听checkbox勾选
form.on('checkbox(is_unify_address)', function (data) {
/* 统一资产位置未勾选表格可修改 */
if (!data.elem.checked) {
$("[data-field='address']").data('edit', true)
} else {
//已勾选则不能修改，并将贼产位置输入框填写到资产位置利恩数据
$("[data-field='address']").data('edit', false)
var tableDas = layui.table.cache["table-list"];
var machine_address = $('.machine_address').val()
for (let i = 0; i < tableDas.length; i++) {
/* 资产位置输入框有值 */
if (machine_address.length > 0) {
//要修改列的键值
tableDas[i].address= machine_address
}
}
window.parent.location.reload();
}
})
})
8. layui 树形控件，可以在输入框搜索节点
.inputdiv{
display:flex;border: 1px solid #D2D2D2!important;background-color: #fff;height: 38px;line-height: 38px;padding: 0px 19px;
border-radius: 19px;
}
.layui-input {
border-style: none;
}
<div class="inputdiv">
<input type="text" class="layui-input" id="tree_name" autocomplete="off" />
<i class="layui-icon layui-icon-search serchType"></i>
</div>
<div id="test1"></div>
layui.use(['form','selectTree', 'table'], function() {
var form = layui.form,
selectTree=layui.selectTree;
tree = layui.tree;
table = layui.table;
const data = [{
title: '湖北' //一级菜单
, children: [{
title: '武汉' //二级菜单
, children: [{
title: '江汉区' //三级菜单
}, {
title: '洪山区' //三级菜单
}, {
title: '江岸区' //三级菜单
}, {
title: '汉阳区' //三级菜单
}]
}]
}, {
title: '浙江' //一级菜单
, children: [{
title: '杭州' //二级菜单
, children: [{
title: '西湖区' //三级菜单
}, {
title: '上城区' //三级菜单
}, {
title: '下城区' //三级菜单
}, {
title: '滨江区' //三级菜单
}]
}]
}, {
title: '陕西' //一级菜单
, children: [{
title: '西安' //二级菜单
}]
}];
tree.render({
elem: '#test1' //绑定元素
, data: data
, onlyIconControl: true
, click: function (obj) {
console.log(obj.data.title);
}
});
//节点点击加背景色
$("body").on("click", ".layui-tree-txt", function () {
$(".layui-tree-entry").removeClass("current");
$(this).parent().parent().addClass("current");
});
//搜索框点击进行查询节点
$('.serchType').click(function serchType () {
var name = $("#tree_name").val(); //搜索值
var elem = $("#test1").find('.layui-tree-txt').css('color', ''); //搜索文本与设置默认颜色
if (!name) {
return; //无搜索值返回
}
elem.filter(':contains(' + name + ')').css('color', '#FFB800'); //搜索文本并设置标志颜色
elem.parents('.layui-tree-pack').prev().find('.layui-tree-iconClick').click()
})
})
9. 基于layui完成国家、省、市、区下拉联动
<div class="form-item">
<div class="layui-col-md12 layui-col-sm12 apply-item">
<div class="layui-col-md2 layui-col-sm12">
<label class="layui-form-label layui-required">地址：</label>
</div>
<div class="layui-col-md10 layui-col-sm12">
<div class="layui-input-block">
<div class="layui-form-item" id="area-picker">
<div class="layui-input-inline">
<select lay-filter="country" id="country" name="increment_country"></select>
</div>
<div class="layui-input-inline">
<select lay-filter="province" id="province" name="increment_province"></select>
</div>
<div class="layui-input-inline">
<select lay-filter="city" id="city" name="increment_city"></select>
</div>
<div class="layui-input-inline">
<select id="area" name="increment_area"></select>
</div>
</div>
</div>
</div>
</div>
</div>
/static/js/locList.json为存储地区的路径，使用的是QQ的LocList.xml文件，路径为C:\Program Files (x86)\Tencent\QQ\I18N\2052
将XML文件转为json格式 XML转为json
$(function () {
$.getJSON("/static/js/locList.json", function (data){
console.log(data.Location.CountryRegion)
data = data.Location.CountryRegion;
var str = '';
str += '<option value="0">选择国家</option>';
for(var i in data) {
str += '<option value="'+data[i]['-Code']+'">'+data[i]['-Name']+'</option>';
};
$('#country').html(str);
form.render();
})
})
//省份
form.on('select(country)', function(datas){
var country = datas.value;
$.getJSON("/static/js/locList.json", function (data){
data = data.Location.CountryRegion;
var str = '<option value="0">选择省份</option>';
for(var i in data) {
if (data[i]['-Code'] == country)
{
var sub = data[i]['State'];
for(var k in sub) {
str += '<option value="'+sub[k]['-Code']+'">'+sub[k]['-Name']+'</option>';
};
}
};
$('#province').html(str);
form.render();
})
})
/*
//选择省份的修改
//选择国家之后sub[k]有的数据是数组，有的是对象，不进行处理会显示undefined，对sub[k]进行判断
if (sub[k] instanceof Array) {
for(var p in sub[k]) {
str += '<option value="'+sub[k][p]['-Code']+'">'+sub[k][p]['-Name']+'</option>';
}
} else {
str += '<option value="'+sub[k]['-Code']+'">'+sub[k]['-Name']+'</option>';
}
**/
//城市
form.on('select(province)', function(datas){
var province = datas.value;
$.getJSON("/static/js/locList.json", function (data){
data = data.Location.CountryRegion;
var str = '<option value="0">选择城市</option>';
for(var i in data) {
var State = data[i]['State'];
for(var k in State) {
if (State[k]['-Code'] == province)
{
var sub = State[k]['City'];
for(var l in sub) {
str += '<option value="'+sub[l]['-Code']+'">'+sub[l]['-Name']+'</option>';
};
}
};
};
$('#city').html(str);
form.render();
})
})
//区
form.on('select(city)', function(datas){
var province = $('#province').val();
var city = datas.value;
$.getJSON("/static/js/locList.json", function (data){
data = data.Location.CountryRegion;
var str = '<option value="0">选择县/区</option>';
for(var i in data) {
var State = data[i]['State'];
for(var k in State) {
if (State[k]['-Code'] == province) {
var City = State[k]['City'];
for (var c in City) {
if (City[c]['-Code'] == city) {
var sub = City[c]['Region'];
for (var l in sub) {
str += '<option value="' + sub[l]['-Code'] + '">' + sub[l]['-Name'] + '</option>';
};
}
};
};
};
};
$('#area').html(str);
form.render();
})
})
- 数据表格删除
<div class="layui-tab-content layui-tab-content-bor">
<table id="table-list" class="layui-table" lay-filter="table-list"></table>
</div>
<script type="text/html" id="auth-state">
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="delete">删除</a>
</script>
layui.use(['form', 'layedit','formSelects', 'table', 'laydate'], function() {
var table = layui.table;
table.render({
elem: '#table-list',
data: removeDuplicate(layui.data('cart_used').data),
cols: [
[
{
field: 'code',
title: 'sku编号',
align: 'center'
},
{
field: 'name',
align: 'center',
title: '产品名称'
},
{
templet: '#auth-state',
width: 150,
align: 'center',
fixed: 'right',
title: '操作'
}
]
]
done: function() {
table.resize('table-list');
layer.closeAll('loading');
}
});
//删除事件
table.on('tool(table-list)', function(obj) {
var deleteData = obj.data;
// 我的数据是使用本地缓存，所以需要对数据进行处理
var tableData = layui.data('cart_used').data
var layEvent = obj.event;
if (layEvent === 'delete') {
for (var j = 0; j < tableData.length; j++) {
if (obj.data.sku_code == tableData[j].sku_code) {
tableData.splice(j ,1)
}
}
layui.data('cart_used', {
key: 'data',
value: tableData
});
}
//表格重载
table.reload('table-list',{
data: removeDuplicate(layui.data('cart_used').data)
})
})
})
11. 数据表格点击行对数据进行修改
<div class="layui-tab-content layui-tab-content-bor">
<table id="table-list" class="layui-table" lay-filter="table-list"></table>
</div>
<script type="text/html" id="auth-state">
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="delete">删除</a>
</script>
table.on('row(table-list)', function(obj){
//其中return_date和address为表格列的标识
$("[data-field='return_date']").data('edit', true)
$("[data-field='address']").data('edit', true)
});
12. layui数据表格中插入下拉框，根据checkbox勾选判断列展示
需求描述：设为使用人下拉框默认不勾选，表格使用人一列插入下拉框，使用人选中时表格不使用下拉框，只展示数据
.layui-table-cell, .layui-table-box, .layui-table-body {
overflow: visible;
}
.layui-anim, .layui-anim-upbit{
width: 100%;
}
<input type="checkbox" name="" title="设为使用人" lay-skin="primary" id="user" lay-filter="is_unify_user">
<div class="layui-tab-content layui-tab-content-bor">
<table id="table-list" class="layui-table" lay-filter="table-list"></table>
</div>
<script type="text/html" id="auth-state">
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="delete">删除</a>
</script>
<script type="text/html" id="selectEducation">
<select name="select_user[]" class="select_user" autocomplete="off" lay-search="">
<option value = "">请选择</option>
</select>
</script>
layui.use(['form', 'layedit','formSelects', 'table', 'laydate'], function() {
var form = layui.form,
layer = layui.layer,
laydate = layui.laydate;
table = layui.table;
var tableCol = []
var tableCol = new Array()
tableCol = [
{
field: 'sku_code',
title: 'sku编号',
align: 'center'
},
{
field: 'spec_name',
align: 'center',
title: '产品名称',
width: 200
},
{
field: 'user',
align: 'center',
title: '使用人',
templet:'#selectEducation'
},
{
field: 'address',
align: 'center',
title: '资产位置'
},
{
field: 'apply_type_name',
title: '申请类型',
align: 'center'
},
{
field: 'return_date',
align: 'center',
title: '归还日期'
},
{
field: 'num',
align: 'center',
title: '申请数量'
},
{
field: 'stock_num',
align: 'center',
title: '可用库存量 '
},
{
templet: '#auth-state',
width: 150,
align: 'center',
fixed: 'right',
title: '操作'
}
]
/* 表格渲染 */
table.render({
elem: '#table-list',
data: removeDuplicate(layui.data('cart_used').data),
cols: [
tableCol
],
done: function(res, curr, count) {
tabData = res.data;
table.resize('table-list');
layer.closeAll('loading');
// 表格中插入下拉框的数据
$.ajax({
//获得数据的接口
url:'',
data:{
//参数
},
dataType:'json',
type:'POST',
success:function(res){
var opt = '<option value = "">请选择</option>';
$.each(res.data, function(item, val) {
//下拉的可选项
opt += '<option value = "' + val.uid + '">' + val.name + '</option>'
});
$(".select_user").html(opt);
form.render('select');
},
error:function(){
layer.msg('请求超时请联系管理员',{icon:2});
},
async: false
})
}
});
//设为使用人的勾选
form.on('checkbox(is_unify_user)',function (data){
if (data.elem.checked) {
tableCol.splice(2,1)
tableCol.splice(2,0,{
field: 'user',
align: 'center',
title: '使用人',
})
} else {
tableCol.splice(2,1)
tableCol.splice(2,0,{
field: 'user',
align: 'center',
title: '使用人',
templet:'#selectEducation'
})
}
table.reload('table-list',{})
})
}）
13. 封装layui分页
function flushPage(num,curr){
layui.use(['laypage', 'layer'], function(){
laypage = layui.laypage,
layer = layui.layer;
laypage.render({
//渲染的对象
elem: 'pageDemo',
//注意这里的count是数据条数
count: num,
//每页显示8条数据
limit: 10,
//当前高亮页
curr : curr,
theme: '#1E9FFF',
jump: function (obj, first) {
//obj为当前页的属性和方法，第一次加载first为true
//do SomeThing
//当前高亮页
if (!first) {
//分页跳转需要执行的方法
protoList(obj.curr)；
//执行跳页方法，刷新显示内容，然后再在跳页方法中调用该方法，来改变总页数
//注意这里的总页数是，layui自己给我们算出来的，我们需要提供后台返回的总记录数，以及一页显示记录条数
}
}
});
});
}
14. layui树状结构下拉框
<div class="form-item">
<div class="layui-col-sm12">
<label class="layui-form-title">系统分类</label>
<div class="layui-unselect layui-form-select downpanel" >
<div class="layui-select-title" >
<span class="layui-input layui-unselect" id="treeclass">选择</span>
<input type="hidden" id="labelName" name="label_name" lay-filter="couponType" layVerify="required" contentStyle="margin-right: 10%"/>
<i class="layui-edge"></i>
</div>
<dl class="layui-anim layui-anim-upbit">
<dd>
<ul id="classtree"></ul>
</dd>
</dl>
</div>
</div>
</div>
protoTree()
function protoTree () {
//获取树状结构数据
$.ajax({
url:'',
dataType:'json',
type:'POST',
success:function(res){
tree.render({
elem: '#classtree',
data: res,
onlyIconControl: true,
click: function (obj) {
var keyWords = obj.data.title
typeID = obj.data.type_id
// 输入框辅助
$('#labelName').val(keyWords)
//展示选中的名称
$('#treeclass').html(keyWords)
}
});
},
error:function(){
layer.msg('请求超时请联系管理员',{icon:2});
},
async: false
})
}
$(".downpanel").on("click", ".layui-select-title", function (e) {
$(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
$(this).parents(".downpanel").toggleClass("layui-form-selected");
layui.stope(e);
}).on("click", "dl i", function (e) {
layui.stope(e);
});
$(document).on("click", function (e) {
$(".layui-form-select").removeClass("layui-form-selected");
});
15. layui下拉多选
div class="form-item">
<div class="layui-col-sm12">
<label class="layui-form-title">登录方式</label>
<div class="layui-input-block">
<div class="layui-input-block" id="login_select"></div>
</div>
</div>
</div>
layui.use(['xmSelect'], function() {
var xmSelect = layui.xmSelect;
function get_login_list(){
//获取下拉多选的数据
$.ajax({
url:'',
data:{
},
dataType:'json',
type:'POST',
success:function(res){
$.each(res.data, function(item, val) {
//res.data是对象，处理成数组
loginList.push({
value: item,
name: val
})
});
//渲染下拉多选
task_team_arr = xmSelect.render({
el: '#login_select',
data: loginList,
on: function(data){
var log_arr = [];
$.each(data.arr, function (index, item) {
log_arr.push(item.name)
});
//多选的选项逗号拼接
log_str = log_arr.join(',');
form.render('select');
},
})
},
error:function(){
layer.msg('请求超时请联系管理员',{icon:2});
},
async: false
})
}
})
16. laydate设置默认值，最大值，以及修改限制后的重新渲染
- 设置默认值
input type="text" class="layui-input" name="return_time[]" id="returnData" placeholder="请选择时间">
layui.use(['form', 'layedit','formSelects', 'table', 'laydate'], function() {
var form = layui.form,
layer = layui.layer,
laydate = layui.laydate;
table = layui.table;
layui.use('laydate', function(){
var laydate = layui.laydate;
laydate.render({
elem: '#returnData',
theme: '#507ef7',
value: getRecentDay(10),
done:function (value, date, endDate) {
returnDate = value
}
});
});
function getRecentDay(day){
var today = new Date();
var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
today.setTime(targetday_milliseconds);
var tYear = today.getFullYear();
var tMonth = today.getMonth();
var tDate = today.getDate();
tMonth = doHandleMonth(tMonth + 1);
tDate = doHandleMonth(tDate);
console.log(tYear+"-"+tMonth+"-"+tDate)
return tYear+"-"+tMonth+"-"+tDate;
}
function doHandleMonth(month){
var m = month;
if(month.toString().length == 1){
m = "0" + month;
}
return m;
}
})
2.设置最大值最小值的限制
<form class="layui-form" lay-filter="basic-form" action="" enctype="multipart/form-data">
<div class="layui-col-md12">
<div class="layui-col-xs12 layui-col-md6">
<div class="layui-form-item">
<div class="layui-inline add-agreement-item">
<label class="layui-form-label required">协议生效时间：</label>
<div class="layui-input-inline add-seal-opera date-start-input">
<input name="effective_start_date" id="effective_start_date" type="doc_time" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-col-xs12 layui-col-md6">
<div class="layui-form-item">
<div class="layui-inline add-agreement-item">
<label class="layui-form-label required">协议到期时间：</label>
<div class="layui-input-inline add-seal-opera date-end-input">
<input name="effective_end_date" id="effective_end_date" type="doc_time" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
</div>
</div>
</div>
</div>
</div>
</form>
layui.use(['laydate'], function () {
var laydate = layui.laydate;
var startDate = laydate.render({
elem: '#effective_start_date',
theme: '#507ef7',
min: '2021-11-06',
done: function (value, date, endDate) {
var startDate = new Date(value).getTime();
var endTime = new Date($('#effective_end_date').val()).getTime();
if (endTime < startDate) {
layer.msg('结束时间不能小于开始时间');
$('#effective_start_date').val($('#effective_end_date').val());
}
}
})
var endDate = laydate.render({
elem: '#effective_end_date',
theme: '#507ef7',
min: '2021-11-06',
max: '2022-11-06',
done: function (value, date, endDate) {
var startDate = new Date($('#effective_start_date').val()).getTime();
var endTime = new Date(value).getTime();
if (endTime < startDate) {
layer.msg('结束时间不能小于开始时间');
$('#effective_end_date').val($('#effective_start_date').val());
}
}
});
})
- 修改限制后的重新渲染
将原有input清空重新添加渲染
$("#effective_start_date").remove(); //删除开始的input元素
$("#effective_end_date").remove(); //删除结束的input元素
$(".date-start-input").append('<input name="effective_start_date" id="effective_start_date" type="doc_time" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">')
$(".date-end-input").append('<input name="effective_end_date" id="effective_end_date" type="doc_time" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">')
//重新渲染laydate
//laydate.render({......//绑定元素，最大值，最小值等})
17. textarea的字数限制
.file-purposes-contain{
position: relative;
}
.word {
position: absolute;
right: 18px;
bottom: 5px;
color: #aaa;
font-size: 12px;
}
<form>
<div class="layui-form-item">
<div class="layui-inline add-seal-item">
<label class="layui-form-label layui-required">文件用途：</label>
<div class="layui-input-inline add-seal-opera file-purposes-contain">
<textarea name="signComment" required lay-verify="required" id="signComment" placeholder="请输入审批意见" maxlength="1000" oninput="wordLeg(this);"
onpropertychange="if(value.length>1000) value=value.substr(0,1000)" lay-verify="required"
autocomplete="off" class="layui-textarea"></textarea>
<div class="word">
<span class="text_count">0</span> / <span class="num_count" id="numCount">1000</span>
</div>
</div>
</div>
</div>
</form>
function wordLeg(obj) {
var currleg = $(obj).val().length;
var length = $(obj).attr('maxlength');
if (currleg > length) {
layer.msg('字数请在' + length + '字以内');
} else {
$('.text_count').text(currleg);
}
}
18. layui上传组件
layui中使用上传组件、上传完成后展示图片并且可以删除
<form class="layui-form" lay-filter="basic-form" action="" enctype="multipart/form-data">
<div class="layui-col-xs12 layui-col-md7">
<div class="layui-form-item">
<div class="layui-inline add-seal-item">
<label class="layui-form-label required">盖章附件：</label>
<div class="layui-input-inline add-seal-opera">
<div class="file">
<div class="btn-list">
<button class="layui-btn layui-btn-primary upload-btn" id="uploadFile">+上传</button>
<span class="upload-mes">支持pdf，word，excel，png，jpg，jpge格式，支持多个附件</span>
</div>
<div class="a-right" id="fileList"> </div>
</div>
</div>
</div>
</div>
</div>
</form>
layui.use(['upload',,'util'], function () {
var util = layui.util
laydate = layui.laydate,
//存储最终上传的文件数据
var fileApplyData = []
var fileApplyData = new Array()
var picIndex=0;
var uploadInst = upload.render({
elem: '#uploadFile', //绑定元素
url: '', //上传接口
exts:'doc|docx|xls|xlsx|pdf|jpg|png|gif|bmp|jpeg',
done: function(res, index, upload){
if (res.code == 200) {
var fileApplyItem = {
fileName: res.data.original_file_name,
filePath: res.data.save_name,
}
fileApplyData.push(fileApplyItem)
var html='<div class="item">\n' +
'<a href="javascript:;" file_preview="'+res.data.save_name+'" class="a-title a-link-btn">'+res.data.original_file_name+'</a>'+
'<a target="_blank"+'+res.data.save_name+' class="file-item" file_name="'+res.data.original_file_name+'">'+
'</a>'+
'<a class="del" my-event="delFile"><i class="layui-icon layui-icon-close"></i></a>\n'+
' </div>';
$('#fileList').append(html);
picIndex++;
} else {
layer.alert(res.message, {icon: 2})
}
layer.closeAll('loading'); //关闭loading
}
,error: function(index, upload){
layer.closeAll('loading'); //关闭loading
}
});
util.event('my-event', {
close: function (othis) { // 关闭弹出层
parent.layui.layer.close(parentIndex);
parent.$('#approvalContract').click();
},
delFile:function(othis){
layer.confirm('你确定要删除吗？',function(index){
var curItem = $(othis).parent()
var curName = $(othis).parent()[0].innerText
$(othis).parent().remove();
var obj=fileApplyData.find(function (obj) {
return obj.file_name == curName
})
var curIndex = fileApplyData.indexOf(obj)
if (curIndex > -1) {
fileApplyData.splice(curIndex, 1)
}
layer.close(index);
})
}
})
})
19. xmSelect下拉树与数据回显
<form class="layui-form" lay-filter="searchForm" id="searchForm">
<div class="layui-col-xs12 layui-col-md3">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">申请人部门</label>
<div class="layui-input-inline">
<ul id="department" data-id="0"></ul>
<input name="applyDepartmentId" class="department-input" class="layui-input">
</div>
</div>
</div>
</div>
</form>
layui.use(['xmSelect'], function () {
var xmSelect = layui.xmSelect;
function renderDepartment(){
xmSelectTreeTest = xmSelect.render({
el: '#department',
prop:{name:'name',value:'id'},
filterable: true,
data: dep_list_tree,
tree:{
show:true,
expandedKeys:[],
strict:false,
},
on:function (data) {
var change_type_arr = [];
$.each(data.arr, function (index, item) {
change_type_arr.push(item.id)
});
change_type_str = change_type_arr.join(',');
form.render('select');
searchType(change_type_str)
}
});
},
// 给input赋值 change_type_str为逗号分隔的字符串
function searchType (change_type_str) {
$('.department-input').val(change_type_str)
}
})
//回显
//applyShowDataInt为数组格式
xmSelectTreeTest .setValue(applyShowDataInt)
示例
更多请见xmSelect文档
数据格式
20. layui数据表格数据超出宽度展示…，鼠标hover展示全部
layui.use([ 'table'], function () {
var table = layui.table;
var agreementData= []
var agreementData= new Array()
agreementData= [
{
"id":5,
"agreement_code":"XJYD-usmile-20211018002-BC002",
"sell_uid":10,
"sell_name":"（测试）****有效公司",
"top_id":12,
"top_c_code":"20221106",
"brand":"品牌",
"business_type":1,
"title":"测试标题",
"num":5,
"effective_start_date":"2021-10-19",
"effective_end_date":"2022-10-18",
"seal_type":1,
"seal_category":1,
"fixed_amount":1,
"contact_amount":100,
"contact_desc":"范德萨发顺丰大师傅",
"status":5,
"close_reason":"dfasdf",
"is_del":0,
"create_user_id":541,
"create_dep_id":210,
"create_time":1667530910,
"update_time":1668591117,
"create_user_id_str":"创建人姓名",
"create_dep_id_str":"运营支持中心_IT数字化_研发组_代码开发",
"create_time_str":"2022-11-04 11:01:50",
"status_str":"已撤回",
"cancel_approval_btn":0,
"approval_id":0
},
]
var insTb = table.render({
elem: '#table-list',
data: agreementData,
//toolbar: '#toolbar',
defaultToolbar:[],
skin:'line',
page: true,
cols: [[
{field: 'agreement_code', width:10 +'%', title: '协议编号',
templet: function(d){
return `<a style="color: #1E55E6;" οnclick="showInfo(${d.status},${d.id})"><div class="tableColShow">${d.agreement_code}</div></a>`;
}
},
{field: 'status_str', width:5 +'%', title: '状态'},
{field: 'sell_name', width:15 +'%', title: '所属客户',
templet: function(d){
return '<a><div class="tableColShow">'+d.sell_name+'</div></a>';
}
},
{field: 'top_c_code', width:10 +'%', title: '原合同编号',
templet: function(d){
return '<a style="color: #1E55E6;" href="{:url(\'admin/SellerContract/showContractView\')}?s_c_id='+d.top_id+'" ><div class="tableColShow">'+d.top_c_code+'</div></a>';
}
},
{field: 'create_user_id_str', width:6 +'%', title: '创建人',
templet: function(d){
return '<a><div class="tableColShow">'+d.create_user_id_str+'</div></a>';
}
},
{field: 'create_dep_id_str', width:10 +'%', title: '创建人部门',
templet: function(d){
return '<a><div class="tableColShow">'+d.create_dep_id_str+'</div></a>';
}
},
{field: 'create_time_str', width:8 +'%', title: '创建时间',
templet: function(d){
return '<a><div class="tableColShow">'+d.create_time_str+'</div></a>';
}
},
{field: 'opera',width:15 +'%', align: 'center', title: '操作',
templet: function(d){
return actionBar(d.status,d.id,d.cancel_approval_btn,d.approval_id);
}
}
]]
, done: function () {
layer.closeAll('loading');
},
});
var tipsVal;
$('body').on('mouseover','.tableColShow', function () {
var ovText = $(this).text();
if(ovText.length < 10){
return;
}
var html = "<p style='word-wrap:break-word;width: 150px;'>" + ovText + "</p>";
tipsVal=layer.tips(html,this,{tips:[1,"rgb(58, 61, 73)"]});
});
//鼠标移出
$('body').on('mouseout','.tableColShow', function () {
layer.close(tipsVal);
})
})
21. layui数据表格的复杂表头（仅展示）
layui.use(['table'], function () {
var table =layui.table;
var tableCol = []
var tableCol = new Array()
tableCol = [
[
{ type: 'numbers', title: '序号', align: 'center', width:4 + '%', rowspan: 2,},
{ field: 'sku_code', title: 'SKU编码', align: 'center',sort: true, width:8 + '%', rowspan: 2},
{ field: 'brand', title: '品牌', align: 'center', width:8 + '%', rowspan: 2},
{ field: 'type_name', title: '品类', sort: true, align: 'center', width:8 + '%', rowspan: 2},
{ field: 'spec_name', title: '产品型号', sort: true, align: 'center', width:8 + '%', rowspan: 2},
{ field: 'bar_code', title: '条形码', sort: true, align: 'center', width:8 + '%', rowspan: 2},
{ field: 'msr_price', title: '建议零售价', sort: true, align: 'center', width:8 + '%', rowspan: 2},
{ field: 'store_price', title: '门店标价', sort: true, align: 'center', width:8 + '%', rowspan: 2},
{ title: '变更前含税供货价', align: 'center', width:8 + '%',colspan: 2},
{ title: `变更前供货折扣<i class="layui-icon alone-tips analyseTips"></i>`, align: 'center', width:8 + '%',colspan: 2},
{ title: '含税供货价', align: 'center', width:8 + '%',colspan: 2},
{ title: `供货折扣<i class="layui-icon alone-tips analyseTips"></i>`, align: 'center', width:8 + '%',colspan: 2},
{ field: 'status', align: 'center', title: '变更类型', width:8 + '%',
templet: function(d){
return tempType(d.change_type)
},
}
],
[
{field: 'old_supply_price',title: '大货/样机', align: 'center', templet: function(d){
return '<a>'+d.old_supply_price+' / '+d.old_model_price+'</a>';
}},
{title: '', field:'', hide: true},
{field: 'old_supply_discount',title: '大货/样机', align: 'center',templet: function(d){
return '<a>'+d.old_supply_discount+' / '+d.old_model_discount+'</a>';
}},
{title: '', field:'', hide: true} ,
{field: 'supply_price',title: '大货/样机', align: 'center', templet: function(d){
return '<a>'+d.supply_price+' / '+d.model_price+'</a>';
}},
{title: '', field:'', hide: true} ,
{field: 'supply_discount',title: '大货/样机', align: 'center',templet: function(d){
return '<a>'+d.supply_discount+' / '+d.model_discount+'</a>';
}},
{title: '', field:'', hide: true}
]
]
})
对应关系
注：colspan：1会出现空白列，所以讲colspan设为2，对应中其中一项设置hide: true
22. layui中tab切换
<div class="layuimini-container layuimini-page-anim">
<div class="layuimini-main">
<div class="layui-card layui-row">
<div class="layui-tab layui-tab-brief" lay-filter="tabList">
<ul class="layui-tab-title">
<li lay-id="1" class="layui-this">商品维度</li>
<li lay-id="2">渠道/客户维度</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div id="contentShowBox1">
</div>
<div id="contentShowBox2" style="display: none;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use(['table', 'form','element'], function () {
var table = layui.table;
var form = layui.form;
var element = layui.element;
/* tab切换 */
element.on('tab(tabList)', function (data) {
var tabId = this.getAttribute('lay-id');
$('[id^=contentShowBox]').hide();
$('#contentShowBox'+tabId).show();
if(tabId==2){}
})
})
</script>
23. layui数据表格中插入展示的数据超出两行展示展开按钮
.goods{
line-height: 26px;
}
.goods-opera{
height: 26px;
color: #235fff;
}
<div>
<table id="table-list" class="layui-table" lay-filter="table-list"></table>
</div>
<script>
layui.use(['table', 'form','element'], function () {
var table = layui.table;
var form = layui.form;
var element = layui.element;
/* 商品维度数据表格数据 */
var commodityData = []
var commodityData = new Array()
commodityData = [
{
"sku_code": "000000001",
"goods_name": "商品1",
"brand": "usmile",
"second_type": "口腔护理快消",
"third_type": "成人牙膏",
"spec_name": "OT5",
"msr_price": "399.00",
"store_price": "699.00",
"store_discount": "0.8",
"goodsList": ['客户1','客户2','客户3','客户4','客户5','客户6','客户7','客户8','客户9','客户10']
},
{
"sku_code": "00000002",
"goods_name": "商品2",
"brand": "usmile",
"second_type": "口腔护理快消",
"third_type": "成人牙膏",
"spec_name": "OT5",
"msr_price": "399.00",
"store_price": "699.00",
"store_discount": "0.8",
"goodsList": ['客户1','客户2','客户3','客户4','客户5','客户6','客户7','客户8','客户9','客户10','客户11','客户12','客户13','客户14','客户15','客户16','客户17','客户18','客户19','客户20','客户21','客户22','客户23','客户24','客户25','客户26','客户27','客户28','客户29','客户30','客户31','客户32','客户33','客户34','客户35','客户36','客户37','客户38','客户39','客户30']
},
]
/* 商品维度数据表格 */
var insTb = table.render({
elem: '#table-list',
// url: '{:url("admin/stamped_document/getList")}',
data: commodityData,
defaultToolbar:[],
limit:'30',
page: true,
skin:'line',
cols: [[
{field: 'sku_code', align: 'center', width:8 +'%',title: 'SKU编码',
templet:function(d){
return `<a style="color: #235fff;" οnclick="showInfo(${d.id},'${d.status}')">${d.sku_code}</a>`;
}
},
{field: 'goods_name', align: 'center', width:12 +'%',title: '产品名称'},
{field: 'brand', align: 'center',width:8 +'%', title: '品牌'},
{field: 'second_type', align: 'center',width:10 +'%', title: '二级分类'},
{field: 'third_type', align: 'center',width:10 +'%', title: '三级分类'},
{field: 'spec_name', align: 'center',width:8 +'%', title: '型号'},
{field: 'opera',width: 44 + '%',align: 'center',title: `可售渠道和可售客户<svg t="1665652367492" class="icon client-show" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2553" width="16" height="16"><path d="M512 938.666667c235.648 0 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667z m0 85.333333C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z" fill="#3D3D3D" p-id="2554"></path><path d="M520.96 232.106667c-62.293333 0-111.786667 17.92-147.626667 54.613333-36.693333 35.84-54.613333 84.48-54.613333 146.773333h90.453333c0-37.546667 7.68-67.413333 23.04-87.893333 17.066667-23.893333 45.226667-35.84 83.626667-35.84 30.72 0 54.613333 8.533333 71.68 25.6 16.213333 17.066667 24.746667 40.106667 24.746667 69.973333 0 22.186667-7.68 42.666667-23.04 62.293334l-14.506667 16.213333c-52.906667 46.933333-85.333333 81.92-97.28 105.813333-11.093333 22.186667-16.213333 49.493333-16.213333 81.066667v14.506667h91.306666v-14.506667c0-21.333333 4.266667-40.106667 13.653334-57.173333 7.68-15.36 19.626667-29.866667 34.986666-43.52 40.96-34.986667 64.853333-57.173333 72.533334-66.56 20.48-27.306667 31.573333-62.293333 31.573333-104.106667 0-51.2-17.066667-92.16-50.346667-122.026667-34.133333-30.72-78.506667-45.226667-133.973333-45.226666z m-14.506667 499.2c-17.92 0-32.426667 5.12-43.52 17.066666-12.8 11.093333-18.773333 25.6-18.773333 43.52 0 17.066667 5.973333 31.573333 18.773333 43.52 11.093333 11.946667 25.6 17.92 43.52 17.92 17.066667 0 32.426667-5.973333 45.226667-17.066666 11.946667-11.946667 17.92-26.453333 17.92-44.373334 0-17.92-5.973333-32.426667-17.92-43.52-11.946667-11.946667-27.306667-17.066667-45.226667-17.066666z" fill="#3D3D3D" p-id="2555"></path></svg>`,
templet: function(d){
return channelCustomShow(d.sku_code,d.goodsList)
}
}
]]
, done: function () {
layer.closeAll('loading');
calculateText()
}
});
/* 商品维度下数据表格可售渠道和可售客户部分展示内容 */
function channelCustomShow (sku_code,goods) {
return `
<div class="channel-goods channel-goods-${sku_code}">
<p class="channel">亚太_中国_直供_线下_线下零售_百货及免税</p>
<p class="goods goods-${sku_code}">
${
customerList(sku_code,goods)
}
</p>
</div>
`
}
/* 商品维度下数据表格可售渠道和可售客户部分展示的客户 */
function customerList(sku_code,goods) {
var opt = ''
$.each(goods,function(index,item){
if (index < goods.length -1) {
opt += `<span>${item}，</span>`
} else {
opt += `<span>${item}</span>`
}
})
return opt
}
/* 商品维度下数据表格可售渠道和可售客户部分超出两行展示展开按钮 */
function calculateText(sku_code) {
let twoHeight = 26 * 2;
$('.goods').each(function() { //遍历相同样式名的元素
var curHeight = $(this).height(); //获取每个元素的高度，（可根据需要使用outerHeight、innerHeight）
if (curHeight > twoHeight) {
$(this).parent().append('<p class="goods-opera"><i lay-tips="展开" class="layui-icon layui-colla-icon layui-icon-down goods-opera-show-icon">展开</i></p>')
$(this).css({'overflow':'hidden','-webkit-line-clamp': '2','text-overflow': 'ellipsis','display': '-webkit-box','-webkit-box-orient': 'vertical'})
}
});
}
/* 商品维度下数据表格可售渠道和可售客户部分展开收起 */
$(".goods-opera").on('click','.goods-opera-show-icon',function () {
$(this).parent().prev().css({'overflow':'visible','-webkit-line-clamp': 'none','display':'block'})
$(this).parent().empty().append(`<i lay-tips="收起" class="layui-icon layui-colla-icon layui-icon-up goods-opera-hidden-icon">收起</i>`)
})
$(".goods-opera").on('click','.goods-opera-hidden-icon',function () {
$(this).parent().prev().css({'overflow':'hidden','-webkit-line-clamp': '2','text-overflow': 'ellipsis','display': '-webkit-box','-webkit-box-orient': 'vertical'})
$(this).parent().empty().append(`<i lay-tips="展开" class="layui-icon layui-colla-icon layui-icon-down goods-opera-show-icon">展开</i>`)
});
})
</script>
24. layui弹窗
function showReason () {
var showReasonContent = '驳回原因'
var index = layer.open({
type: 1,
title: false,
content: `<div class="content">${showReasonContent}</div>`,
success: function (layero, index) {
layero[0].childNodes[1].childNodes[0].removeAttribute('href');
layero[0].childNodes[1].classList.add('cursorStyle');
layero[0].childNodes[1].childNodes[0].classList.remove('layui-layer-close2');
layero[0].childNodes[1].childNodes[0].classList.add('layui-layer-close1');
},
});
}
/* 提交审批 */
function approveApply (id) {
var index = layer.open({
type: 1,
title: false,
content: '<div class="content">您确定要提交审批吗？</div>',
success: function (layero, index) {
layero[0].childNodes[1].childNodes[0].removeAttribute('href');
layero[0].childNodes[1].classList.add('cursorStyle');
layero[0].childNodes[1].childNodes[0].classList.remove('layui-layer-close2');
layero[0].childNodes[1].childNodes[0].classList.add('layui-layer-close1');
},
btn: ['确定', '取消'],
yes: function(index, layero){
//do something
layer.close(index);
},
btn2: function(index, layero){
layer.close(index)
}
});
}
25. layui数据表格根据条件判断勾选禁用
layui.use(['element', 'form', 'table','formInput'], function () {
var form = layui.form;
var table = layui.table;
var formInput = layui.formInput;
var thisTable = {};
table.render({
elem: '#table-list',
url:'',
defaultToolbar: [],
skin: 'line',
where: searchWhere,
page: true,
cols: [[
{type: 'checkbox'},
{field: 'code', title: '编码',
{field: 'goods_name', title: '名称'},
{field: 'brand', title: '品牌'},
{field: 'type_name', title: '商品分类'},
{field: 'spec_name', title: '规格型号'},
{field: 'bar_code', title: '条形码'}
]]
, done: function (res, curr, count) {
var data = res.data;
$.each(data, function (k, v) {
//判断数据库存为0禁止勾选
var stockNum = 0
$.each(v.stock_list, function (stockIndex, stockItem) {
stockNum += stockItem.allow_stock_num
})
if (stockNum == 0) {
//单个不可选样式
$(".layui-table tr[data-index="+k+"] input[type='checkbox']").prop('disabled',true);
$(".layui-table tr[data-index="+k+"] input[type='checkbox']").next().addClass('layui-btn-disabled');
//全选不可选样式1
$(".layui-table-header input[type='checkbox']").prop('disabled',true)
$(".layui-table-header input[type='checkbox']").next().addClass('layui-btn-disabled')
//全选不可选样式2
$(".layui-table-header").find("input[name = 'layTableCheckbox'][lay-filter='layTableAllChoose']").each(function() {
$(this).attr("disabled", 'disabled').next().removeClass("layui-form-checked");
form.render('checkbox');
});
}
})
layer.closeAll('loading');
}
});
}
})
26. layui父页面给弹窗子页面赋值
layui.use(['upload', 'laytpl', 'util', 'citySelector', 'table', 'form', 'miniPage', 'comFun', 'laydate'], function () {
var table = layui.table,
form = layui.form,
miniPage = layui.miniPage;
function openHtml(){
var openWH = miniPage.getOpenBig();
var index = layer.open({
type: 2,
anim: 2, //动画
title: '打开子页面',
area: [openWH[0] + 'px', openWH[1] + 'px'],
btn: ['确定', '取消'],
//弹窗页url
content: "",
success: function (layero, index) {
var iframeWin = window[layero.find('iframe')[0]['name']];
//向弹窗传递数据
iframeWin.selectedData = [];select_refund_goods
//先传递数据再调用方法,确保弹窗页在获取数据后在加载
iframeWin.loadLayui();
},
yes: function (index, layero) {
var iframeWin = window[layero.find('iframe')[0]['name']];
//子页面返回的值
var selectDataArr = iframeWin.selectedData
layui.layer.close(index);
},
cancel: function (index, layero) {
parent.layui.layer.close(index);
}
});
}
})
<style></style>
<div></div>
<script>
//从父页面传递的值
var selectedData = []
function loadLayui(){}
</script>
27.使用layui模板引擎添加html（包括删除以及添加后页面位置移动到最后一条）
只大概附上主要代码，样式等自行调节
layui模板引擎示例
<div class="layuimini-container layuimini-page-anim">
<div class="layuimini-main">
<form class="layui-form" lay-filter="mainForm" action="" enctype="multipart/form-data">
<div class="layui-row">
<div class="layui-col-md12" id="orderInfoDiv">
<div class="policy" cur-policy="0" id="policy-container-0">
<div class="newsWarp newsWarpNox">
<div class="new-tip-container">
<span class="newMes newMes-0">测试{{index + 1}}</span>
<span class="del-policy" class="delete" onclick="del(this)">
<img src="__STATIC__/images/icon/icon-delete-circle.png" class="icon-delete-circle" style="max-width:30px;max-height:30px;">
</span>
</div>
</div>
<div class="layui-col-xs12 layui-col-md7">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">数量：</label>
<div class="layui-inline">
<input name="details[0][givenCount]" type="text" placeholder="请输入" autocomplete="off" lay-verify="required" class="layui-input">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="newsWarp newsWarpNox save-btn-contain">
<span class="addproperty">添加</span>
</div>
</form>
</div>
</div>
<script type="text/html" id="orderInfo">
{{# layui.each(d, function(index, item){ }}
<div class="policy" cur-policy="{{item.id}}" id="policy-container-{{item.id}}">
<div class="newsWarp newsWarpNox">
<div class="new-tip-container">
<span class="newMes newMes-{{item.id}}">测试{{index + 1}}</span>
<span class="del-policy" class="delete" onclick="del(this)">
<img src="__STATIC__/images/icon/icon-delete-circle.png" class="icon-delete-circle" style="max-width:30px;max-height:30px;">
</span>
</div>
</div>
<div class="layui-col-xs12 layui-col-md7">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">数量：</label>
<div class="layui-inline">
<input name="details[{{item.id}}][givenCount]" type="text" placeholder="请输入" autocomplete="off" lay-verify="required" class="layui-input">
</div>
</div>
</div>
</div>
</div>
{{# }); }}
</script>
因为会产生多个givenCount字段，所以以数组方式赋值name
<script>
layui.use(['form','table','laytpl'], function () {
var form = layui.form,
table = layui.table,
laytpl = layui.laytpl,
// 点击添加
$(".addproperty").click(function(){
// 添加模板
create_template()
scrollTo('.policy')
})
function create_template (d) {
var elements = document.getElementsByClassName('policy');
var feeInputIndex = 0;
for (var i = 0; i < elements.length; i++) {
var policyID = $(elements[i]).attr('cur-policy')
feeInputIndex = Number(policyID) > Number(feeInputIndex) ? Number(policyID) + 1 : Number(feeInputIndex) + 1 ;
}
curPolicy = feeInputIndex
var orderInfoTpl = orderInfo.innerHTML, // 获取模板，即上面所定义的 <script id="orderInfo">
orderInfoDiv = document.getElementById('orderInfoDiv'); // 视图 即上面的 <div id="orderInfoDiv">
laytpl(orderInfoTpl).render(policyTemplateList, function (html) { // 渲染视图
orderInfoDiv.innerHTML += html;
});
form.render();
}
// 删除
window.del = function del(obj){
var elements = document.getElementsByClassName('policy');
if(elements.length>1){
$(obj).parent().parent().parent().remove();
curPolicy = $(obj).parent().parent().parent().attr('cur-policy')
//删除后的长度
var delElements = document.getElementsByClassName('policy');
for (var i = 0; i < delElements.length; i++) {
var policyID = $(delElements[i]).attr('cur-policy')
$(`.news-${policyID}`).empty()
$(`.news-${policyID}`).html(`政策${i + 1}`)
}
}else{
layer.msg('不允许删除，至少保留一个政策信息');
}
}
//增加一条后滚动条移到当前
function scrollTo(elements) {
let _elements = $(elements) || [];
let scrollTop = 0
_elements.each(function(index,item){
// 排除最后一项元素的高度
if(index!== _elements.length-1){
scrollTop += item.offsetHeight
}
})
$('.layuimini-content-page').animate({
'scrollTop': scrollTop + 180 // 加上元素上面固定的高度
}, 500);
}
})
</script>
28.layui弹窗layer.tips修改样式
body .tipShow .layui-layer-content {
border-radius: 8px !important;
box-sizing: border-box;
padding: 20px 20px 20px 26px !important;
border: 1px solid #D8DCE5;
box-shadow: 0px 3px 10px 0px rgba(143, 140, 140, 0.31) !important;
}
let codingShowTips = 0
$(document).on('mouseover', '.coding-show', function () {
let that = this;
modelPriceTips = layer.tips(
`<p style='color:#000;'>当输入多个时，需用逗号隔开，最多可输入50个</p>`,
that, { tips: [1, '#fff'], time: 0, area: 'auto', maxWidth: 500, skin: 'tipShow' }
);
})
$(document).on('mouseleave', '.coding-show', function () {
layer.close(modelPriceTips);
})
28.数据表格最后出现空列
解决方法
1、在done函数中增加样式
$('.layui-table').css("width", "100%");
2.修改css样式
.layui-table-view .layui-table {
width: 100% !important;
}
.layui-table th {
text-align: -webkit-center !important;
}
29.layUI-layDate时间控件点击闪烁或显示位置不合理
layui.use('laydate', function(){
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '' //指定元素
,trigger: 'click' //自动弹出控件的事件，采用click弹出
});
});
选中时间后的事件回调
laydate.render({
elem: '#dateRange',
theme: '#1E9FFF',
trigger: 'click',
done: function (value, date) {
$("#search").trigger("click");
}
});
扫一扫
3656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
