layui【实例】弹窗选择联系人添加到父页面

程序员文章站 2022-04-29 08:17:55

...

效果预览：

实现功能：
父页面中点击输入框弹出联系人选择窗口
联系人选择窗口可搜索联系人，勾选联系人后点击添加按钮将联系人回传至父页面输入窗口。
实现代码：
父页面HTML

<div class="layui-inline">		
				<label class="layui-form-label">联系人</label>
				<div class="layui-input-inline">
					<input type="text" name="linkman" id="addlink" class="layui-input newsAuthor" lay-verify="required" placeholder="联系人或申请人" autocomplete="off">
				</div>
			</div>

父页面JS:

layui.use(['layer', 'form','laydate'], function(){
  var layer = layui.layer,
  laydate = layui.laydate,
  form = layui.form;
  $ = layui.jquery;
//选择联系人
 $("#addlink").click(function(){
		layer.open({
		  type: 2,
		  title:"添加联系人",
		  id:"link",
		  area: ['75%', '80%'],
		  fixed: false, //不固定
		  maxmin: true,
		  content: '../link/addlink.php'
		});	
	});	

});

联系人选择界面(addlink.php)：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>添加联系人</title>
  <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
  <style>
  body{padding:10px; font-size:14px; background:#fff; width:95%; margin:0 auto; font-size:14px; line-height:20px; overflow:auto;}
    p{margin-bottom:10px;}
    input{border:1px solid #999; padding:5px 10px; margin:0 10px 10px 0;}

  .layui-form-item {
    margin-top: 15px;
  }
  .layui-input-block{
    float: left;
    margin-left: 0;
    margin-right: 2%;
  }
  td.on{
    border-bottom: 1px solid #D60711;
    color: #D60711;
  }
  td.active{
    background: #D60711;
    color: #fff;
  }
  .search_div{
    width: 95%;
    position: fixed;
    z-index: 2;
    background-color: #fff;
    border: 1px solid #e6e6e6;
  }
  .layui-table {
    width: 100%;
    background-color: #fff;
    color: #666;
}
  </style>
</head>
<body class="layui-form">
<div class="search_div">

    <div class="layui-form-item">
      <label class="layui-form-label">输入关键字</label>
      <div class="layui-input-block">
        <input type="text" name="title" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input" id="searchInput" >
      </div>
      <div class="layui-input-block">
        <button class="layui-btn" id="form" lay-submit lay-filter="formDemo">搜索</button>
      </div>
      <div class="layui-input-block">  
        <button class="layui-btn layui-btn-normal" id="add"><i class="layui-icon"></i>添加到联系人</button>
      </div>
      <div class="layui-inline">
      <div class="layui-form-mid layui-word-aux">如果实在不知道联系人选择“不详”</div>
    </div>
    </div>

</div>
<p style="height: 70px;"></p>
  <table class="layui-table" id="all_list">
    <colgroup>
      <col width="8%">
      <col >
      <col>
      <col>
    </colgroup>
    <thead>
      <tr>
        <th>选择</th>
        <th>姓名</th>
        <th>公司名称</th>
        <th>联系电话</th>
      </tr>
    </thead>
    <tbody>
     <?php
      for($i=0;$i<count($list);$i++){ 
        echo "<tr>";
        echo '<td><input type="checkbox" name="name" lay-skin="primary" data-id="'.$list[$i]["name"].'" > </td>';
        echo '<td class="list_one">'.$list[$i]["name"].'</td>';
        echo '<td class="list_one">'.$list[$i]["com"].'</td>';
        echo '<td class="list_one">'.$list[$i]["phone"].'</td>';
      }
     ?> 
    </tbody>
  </table>
<script src="../../layui/layui.js"></script>
<script type="text/javascript">//注意：parent 是 JS 自带的全局对象，可用于操作父页面
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  $ = layui.jquery; 
  var link = parent.layer.getFrameIndex(window.name); //获取窗口索引
//回车键查询
  $(".layui-input").bind("keydown",function(e){
  　　// 兼容FF和IE和Opera
  　　var theEvent = e || window.event;
  　　var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
  　　 if (code == 13) {
  　　//回车执行查询
  　　$("#form").click();
  　　}
  });
  var active = 0;
  form.on("submit(formDemo)",function(data){
    // 获取搜索框的值
    var kwds = $("#searchInput").val();
    // 获取第一个列表内容
    var this_one = {};
    var real_name = '';
    // 定义数据列表
    var list = $("#all_list .list_one");
    // 定义查找的起始值
    var true_one = 0;
    for (var i = 0; i < list.length; i++) {
      this_one = $(list[i]);
      real_name = this_one.text().toString();
      // 执行like匹配
      if(real_name.match(kwds)){
        // 处理第当前的结果
        if(true_one == active){
          // 获取窗口的宽和高
          var windows_wdh = $(window).width();
          var windows_hgt = $(window).height();
          // 获取第一个坐标
          var x_len = this_one.offset().left;
          var y_len = this_one.offset().top;
          // 驱动滚动条滚动到指定的位置
          $("html,body").animate({scrollTop:(y_len-windows_hgt/2), scrollLeft:(x_len-windows_wdh/2)},500);
          // 标记当前选中的结果
          this_one.addClass('active');
          this_one.removeClass('on');
        }else{
          // 标记符合的结果
          this_one.addClass('on');
          this_one.removeClass('active');
        }
        // 累加真实的选择
        true_one++;
      }else{
        this_one.removeClass('on');
        this_one.removeClass('active');
      }
    }
    // 判断是否搜索完毕 如果搜索完毕 则从第一个开始 否则继续搜索下一个
    active = active >= true_one-1 ? 0 : active+1;
    if(true_one == 0){
      layer.msg('未匹配到联系人', function(){});
    }
    return false;
  })
  $('#add').on('click', function(){
        var id_array=new Array();  
        $('input[name="name"]:checked').each(function(){  
            id_array.push($(this).attr("data-id"));//向数组中添加元素  
        });  
        var idstr=id_array.join(',');//将数组元素连接起来以构建一个字符串  
        //alert(idstr);  
        //alert(id_array.length);
        if(id_array.length>3){
          layer.msg('你④不④傻，选这么多联系人？', function(){});
        }else{
         parent.$('#addlink').val(idstr);
        parent.layer.close(link); 
       }
  });

});
</script>
</body>
</html>

联系人为PHP数组循环遍历，请手动更改查看效果。

希望能帮助到有需要的朋友，欢迎指正！