www.javainfo.com.cn 上干货 欢迎收藏

我们先来看看这次设计实现的效果： 

     layui效果描述： 在查询模块中，我们可以随时按照条件来查找我们需要的工人信息，并通过左侧的复选框选定，来添加到下面的选定模块的表格里面；若是查询模块取消选定  ID = 1 的员工， 下面的选定模块也会自动更新 删除掉 ID = 1 的用户； 很友好的效果

接下来看看 效果实现：

1 初始化弹出窗体效果

           //工人配置
	    else if(layEvent === 'projectConfig'){
	    	layer.open({
	    		  id:"projectConfigForm",
	    		  title:"工人配置【勾选左侧复选框来预选工人，最终在下侧待定员工列表内勾选确定 分配的工人信息】",
	    		  btn:["提交工人配置"],
	    		  type: 2,
	    		  area: ['880px', '660px'],
	    		 // maxmin: true,
	    		  content: '/pjieduans/sssprojectWorkerConfig?id='+data.id,
	    		  zIndex: layer.zIndex, //重点1
	    		  success: function(layero){
	    		    layer.setTop(layero); //重点2
	    		  }, 
	    		  yes: function(index, layero){
	    		    var frameId=document.getElementById('projectConfigForm').getElementsByTagName("iframe")[0].id;
	    		    var frameForm = $('#'+frameId)[0].contentWindow.document.getElementById('searchbtn1');
        	       	           frameForm.click();
	    		   },
	    		   end: function(){
	    			   table.reload('testRelaod');
	    		   }
	    		});

2 初始化弹出窗体的主体内容代码

              
		  
		  	
		    	员工姓名：
		    		     
		          	    
		    	
		    	提交查询
		    
		    重置
		    
    
                   
        提交查询   
 
 
                            /pjieduan/projectWorkerConfig.do",
			type : "POST",
			dataType : "json",
			data :  data,
			success : function(result){
				var rs = result.status;
				if(rs == 1){
				        //弹出提示信息  关闭此弹出窗口
					parent.layer.msg("阶段配置工人信息成功");
					parent.layer.close(index);
				}else{
					layer.msg("阶段配置工人信息失败");  
				}
			}
		});
		//阻止页面跳转  layui功能
		return false;
	});
  
  
  //这个是渲染查询模块的数据表格， 初始化表格数据
  table.render({
	     elem: '#listtable'
	    ,height: 280
	    ,url: '/emp/pageList.do' 
	    ,method: "post" //方法指定为POST 走权限控制 否则不走权限控制 
	    ,title: '员工数据表'
	     ,limit:5
	    ,cols: [[ //表头
	      {checkbox: true, type: 'checkbox', fixed: 'left'}
	      ,{field:'id', title: 'ID', sort: true, fixed: true}
	      ,{field:'employeeName', title: '员工姓名'} 
	      ,{field:'employeeEngName', title: '英文名'} 
	      ,{field:'phone', title: '手机号码'} 
	      ,{field:'remark', title: '备注信息'}  
	    ]],
	    id:'testRelaod'
		,page: true //开启分页
	    ,where:{employeeName:''}
  });
  
  
  
  
  
  //监听查询模块表格复选框选择事件   start
  table.on('checkbox(appendTools)', function(obj){
	  //这里检查数据是否重复及是否需要删除
	  var info = obj.data;
	  console.log(info);
	  //判断顶部查询模块的复选框是否是选定状态 
	  if(obj.checked){
	          //选定逻辑
		  var exist = 0;
		  for(var i=0; i

3 此实例依赖的是  layui 2.4 ， 此实例的目的 主要是应对负责的配置功能

如有疑问 请留言 欢迎提供建议