layui使用经验总结（四）——通过父页面获取子页面信息来实现高级搜索功能

太过爱你忘了你带给我的痛 2022-02-03 17:17 569阅读 0赞

## 高级搜索一般是一个相对独立的子页面表单，表格、表单使用不做赘述 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lNYW5peQ_size_16_color_FFFFFF_t_70]  
该子页面通过layer.open添加

$("#seach").on("click",function(){ // 搜索弹窗
    	    layer.open({
    			type: 2,
    			title: false,
    			closeBtn: 0,
    			shade:0.5,
    			skin: 'f-r-n',
    			area: ['80%','700px'],
    			content: ['${base}/advancedSearch.html','no']
    		});
    	});

## 如何获取子页面信息到父页面呢 ##

方法很多，我认为的最简单实用的是子页面调用父页面函数，把信息作为参数传过去

#### 父页面代码 ####

var mytable = table.render(option);
    //（高级搜索页面内部搜索按钮点击事件）调用此函数
    	function advanced(data) {
    		option.where.filters = data;
    		/*更新渲染表格*/
    		mytable.reload(option);
    	}
    	//函数使用范围变化
    	 window.advanced = advanced;

#### 子页面代码 ####

//搜索按钮监听提交
    	 form.on('submit(advancedSubmit)', function(data){
    		 var params = JQgridUtils.getJQgridSearchParameters();
    		 //调用父类函数
    		 parent.advanced(params);
    		 
    		 var index = parent.layer.getFrameIndex(window.name);
    		 parent.layer.close(index);//关闭当前页
    	});

其中JQgridUtils.getJQgridSearchParameters();获取表单提交字段内容，与现在功能无关，不赘述。

#### 这样父页面获取了子页面传来的参数，把参数给表格，表格根据参数反馈内容，实现高级搜索功能。 ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lNYW5peQ_size_16_color_FFFFFF_t_70]: /images/20220203/917a9f354c304294b4022db4e9375741.png