您的位置:首页 > Web前端 > JavaScript

js父页面如何通过子页面查询后回填到父页面的input框中去

2015-03-31 13:56 447 查看
父页面(如下图所示):



代码:

<input type="hidden" name="CUSTOMER_ID" id="CUSTOMER_ID" value="<!--{$data.CUSTOMER_ID}-->" />
<input type="text" readonly id="CUSTOMER_NAME" name="CUSTOMER_NAME" value="<!--{$data.CUSTOMER_NAME}-->"/>
<a href="javascript:;" class="btn btn-mini btn-info" onclick="crm.choose('/Crm/Customer/search','CUSTOMER_ID,CUSTOMER_NAME')">添加</a>
<a href="javascript:;" class="btn btn-mini" onclick="crm.clear('CUSTOMER_ID,CUSTOMER_NAME')">清空</a>
对应的两个crm.choose和crm.clear函数

var crm = {};

crm.choose = function(url,param){
window.open(url + "/SEARCH_PARAM/" + param,'',"toolbar=no,menubar=no,scrollbars=yes, resizable=no, status=no");
}

crm.clear = function(param){
var arr = param.split(',');
var obj = '';
for(var i in arr){
obj += "#"+arr[i]+',';
}
obj = obj.substring(0,obj.length - 1);
$(obj).val('');
}


重点是crm.choose

对应的父类控制器中定义如下一个函数

//搜索
public static function jsHandle($data){
$param = rtrim(I("post.SEARCH_PARAM",''),',');
$param_arr = array_filter(explode(",",$param));
$js = '';
foreach($param_arr as $v){
$arr = explode("@",$v);
if(count($arr) == 2){
$datas = "$('#{$arr[0]}',window.opener.document).val($(this).attr('{$arr[0]}'));";
}else{
$datas = "$('#$v',window.opener.document).val($(this).attr('$v'));";
}
$js .= $datas;
}
if($js != ''){
$js .= "callclose = true;";
foreach($data as $k => $v){
$dome = '';
foreach($param_arr as $v1){
$arr = explode("@",$v1);
if(count($arr) == 2){
$datas = " {$arr[0]}='{$v[$arr[1]]}' ";
}else{
$datas = " $v1='{$v[$v1]}' ";
}
$dome .= $datas;
}
$data[$k]['data'] = $dome;
}
}
return array("data"=>$data,"js"=>$js);
}


对应的控制器中search方法加入如下一句

//搜索
$data = parent::jsHandle($data);

返回的list列表页面定义如下
<pre name="code" class="javascript"><script type="text/javascript">
$(function(){
//搜索
var callclose = false;
$(".callfill").click(function(){
<!--{$js}-->
if(callclose == true) window.close();
})
});
</script>


同时在输出的行上添加如下信息

<tr class='customer_row callfill' customer_id='<!--{$v.CUSTOMER_ID}-->' <!--{$v.data}-->>


至此完成。

可以通过点击检索出来的列表行实现回填

以下是解析生成的list列表页面js代码

<script type="text/javascript">
$(function(){
//搜索
var callclose = false;
$(".callfill").click(function(){
$('#CUSTOMER_ID',window.opener.document).val($(this).attr('CUSTOMER_ID'));
$('#CUSTOMER_NAME',window.opener.document).val($(this).attr('CUSTOMER_NAME'));
callclose = true;
 if(callclose == true) window.close();
})
});
</script>



                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: