js,layui结合自定义模拟弹框的相互传参;

18 篇文章 0 订阅

一、有限制表单输入内容,和无限制表单输入内容方法: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;
  }
});

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值