一、有限制表单输入内容,和无限制表单输入内容方法:HTML+Css
//css:
<style>
.pr-30{padding-right: 30px;}
.posrev{position: relative}
.posasb-a{display: block;position: absolute;right: 1px;cursor: pointer;top: 1px;line-height: 36px;height: 36px;z-index: 333;background-color: #fff;color: #555;text-align: center;width: 28px;}
.posasb-a>cite{color: #555;}
</style>
//html:禁用输入
<div class="layui-inline">
<div class="layui-inline posrev">
<input type="text" id="suppliername" disabled data-id="" class="layui-input searchVal pr-30" placeholder="选择供应商" />
<a class="posasb-a" id="chooseSupplier" data-method="chooseSupplier" data-type="b"><cite>•••</cite></a>
</div>
<div class="layui-inline posrev">
<input type="text" id="buyername" disabled data-id="" class="layui-input searchVal pr-30" placeholder="选择采购员" />
<a class="posasb-a" id="chooseBuyer" data-method="chooseBuyer" data-type="b"><cite>•••</cite></a>
</div>
<div class="layui-input-inline">
<input type="text" id="creattime" lay-verify="date" name="creattime" class="layui-input searchVal" placeholder="交货时间" />
</div>
</div>
//html:不禁用输入;
<div class="layui-inline posrev">
<input type="text" id="suppliername" data-id="" class="layui-input searchVal pr-30" placeholder="选择供应商" />
<a class="posasb-a" id="chooseSupplier" data-method="chooseSupplier" data-type="b"><cite>•••</cite></a>
</div>
<div class="layui-inline posrev">
<input type="text" id="buyername" data-id="" class="layui-input searchVal pr-30" placeholder="选择采购员" />
<a class="posasb-a" id="chooseBuyer" data-method="chooseBuyer" data-type="b"><cite>•••</cite></a>
</div>
二、js父子窗口互相传参;a.可以输入内容的情况处理
//js:可以输入内容的情况处理
changeInputEm();
function changeInputEm() {
//监听供应商表单;
var suppliername = $("#suppliername").val();
if(suppliername){
$("#chooseSupplier").hide();
}else{
$("#chooseSupplier").show();
}
//监听采购员表单;
var buyername = $("#buyername").val();
if(buyername){
$("#chooseBuyer").hide();
}else{
$("#chooseBuyer").show();
}
}
//设置选择的供应商
function setSupplier(data){
var datas=data[0];
//$("#suppliername")
$("#suppliername").val(datas.supplier_name).attr('data-id',datas.id);
changeInputEm();
}
//设置选择的采购员
function setBuyer(data){
var datas=data[0];
// $("#buyername").val(datas.truename);
$("#buyername").val(datas.truename).attr('data-id',datas.id);
changeInputEm();
}
//layui:
layui.use(['form','layer','table','laytpl', 'laydate'],function() {
var form = layui.form,
// layer = parent.layer === undefined ? layui.layer : top.layer,
layer = layui.layer,
$ = layui.jquery,
laytpl = layui.laytpl,
table = layui.table,
laydate = layui.laydate;
//点击选择操作;
var active = {
chooseSupplier: function() { //添加物流公司
var suppliername = $("#suppliername").val();
if(suppliername==''){
layer.open({
type: 2
,title: '选择供应商'
,area: ['90%', '90%']
,offset: 'rb'
,anim: 2
,isOutAnim:false
,shade: 0.5
,maxmin: true
,content: '/console/purchase/choosesupplier'
});
}
},
chooseBuyer: function() { //选择采购员
var buyername = $("#buyername").val();
if(buyername==''){
layer.open({
type: 2
,title: '选择采购员'
,area: ['80%', '80%']
,offset: 'rb'
,anim: 2
,isOutAnim:false
,shade: 0.5
,maxmin: true
,content: '/console/purchase/choosebuyer'
});
}
},
};
$('#chooseSupplier,#chooseBuyer,#chooseItems,#saveB').on('click', function(){ //按钮点击执行事件
var othis = $(this), method = othis.data('method');
active[method] ? active[method].call(this, othis) : '';
});
//改变输入框内容值监听;
$("#suppliername,#buyername").on("input",function(e){
changeInputEm();
});
})
a.可以输入内容的情况处理
//js:禁止输入内容的情况处理
changeInputEm();
function changeInputEm() {
//监听供应商表单;
var suppliername = $("#suppliername").val();
//监听采购员表单;
var buyername = $("#buyername").val();
}
//设置选择的供应商
function setSupplier(data){
var datas=data[0];
$("#suppliername").val(datas.supplier_name).attr('data-id',datas.id);
changeInputEm();
}
//设置选择的采购员
function setBuyer(data){
var datas=data[0];
$("#buyername").val(datas.truename).attr('data-id',datas.id);
changeInputEm();
}
//layui:
layui.use(['form','layer','table','laytpl', 'laydate'],function() {
var form = layui.form,
// layer = parent.layer === undefined ? layui.layer : top.layer,
layer = layui.layer,
$ = layui.jquery,
laytpl = layui.laytpl,
table = layui.table,
laydate = layui.laydate;
//点击选择操作;
var active = {
chooseSupplier: function() { //添加物流公司
layer.open({
type: 2
,title: '选择供应商'
,area: ['90%', '90%']
,offset: 'rb'
,anim: 2
,isOutAnim:false
,shade: 0.5
,maxmin: true
,content: '/console/purchase/choosesupplier'
});
},
chooseBuyer: function() { //选择采购员
layer.open({
type: 2
,title: '选择采购员'
,area: ['80%', '80%']
,offset: 'rb'
,anim: 2
,isOutAnim:false
,shade: 0.5
,maxmin: true
,content: '/console/purchase/choosebuyer'
});
},
};
$('#chooseSupplier,#chooseBuyer,#chooseItems,#saveB').on('click', function(){ //按钮点击执行事件
var othis = $(this), method = othis.data('method');
active[method] ? active[method].call(this, othis) : '';
});
//改变输入框内容值监听;
$("#suppliername,#buyername").on("input",function(e){
changeInputEm();
});
})
三、子级弹框窗口:主题部分处理;
//html....略
//css.....
//js 部分实现传参给父级窗口;
table.on('toolbar(items)', function(obj) {
var checkStatus = table.checkStatus(obj.config.id);
var datas = checkStatus.data;
// var data = obj.data;
switch (obj.event) {
case 'addChooseItems':
if(datas&&datas.length>0){
layer.alert('确定选择该供应商?', {
icon: 6,
shadeClose: true,
title:'提示'
}, function(d){
var index = parent.layer.getFrameIndex(window.name);
parent.setSupplier(datas);//data为需要传递的值
parent.layer.close(index);//关闭当前页
});
}else{
layer.msg('无选择供应商');
}
break;
}
});