如何在tabs页面调用tab子页面对应的function
本帖最后由 xlj.1113 于 2018-5-6 01:38 编辑需求是：实现一个上下布局的表单，布局如下图；点击上面grid的一行，下面的tab1和tab2分别显示对应的关联信息；
现在问题是，如果表单下面只是一个grid时，可以实现单击表单上面的grid，下面的grid显示关联信息。但是当表单下面是多个tab时，无法实现点击行时获取到对应行的列信息。主要是在tabs页面中不知道如何写调用tab1和tab2中的方法。求指点。具体代码如下：
1、主页面mainList.jsp
<div class="easyui-layout" fit="true">
<div region="center" style="padding:0px;border:0px;overflow-x:hidden;">
<iframe id="mainList" src="${webRoot}/XXXController.do?mainlist" frameborder="0" height="62%" width="100%"></iframe>
<div id="accDiv" class="easyui-accordion" style="padding-right:15px;overflow-x:hidden;box-sizing: border-box;">
<iframe id="tabs" height="300" src="${webRoot}/XXXController.do?tabs" frameborder="0" width="100%" ></iframe>
</div>
</div>
</div>
<script type="text/javascript">
function getXXXList(id){
$("#tabs").contentWindow.getXXXList(id);
}
</script>
2、上部分页面 mainListBase.jsp
<div class="easyui-layout" fit="true" id="lywidth_demo">
<div region="center" style="padding:0px;border:0px">
<t:datagrid name="XXXMainList" checkbox="false" fitColumns="true" title="订单主信息" actionUrl="Controller.do?datagrid"
idField="id" fit="true" collapsible="true" queryMode="group" superQuery="true" filter="true" >
<t:dgCol title="主键"field="id" hidden="true" queryMode="single" width="120"></t:dgCol>
<t:dgCol title="XXX" field="XXX"query="true" width="120"></t:dgCol>
</t:datagrid>
</div>
</div>
<script type="text/javascript">
$(function(){
$("#XXXMainList").datagrid({
onClickRow: function (index, row) {
getXXXList(row.id);
}
});
})
function getXXXList(id){
parent.getXXXList(id);
}
</script>
3、下部分的tabs.jsp
<div>
<t:tabs id="tabs" iframe="false" tabPosition="top" fit="false">
<t:tab iframe="XXXController.do?tab1list" title="tab1" id="tab1"></t:tab>
<t:tab iframe="XXXController.do?tab2list"title="tab2" id="tab2"></t:tab>
</t:tabs>
</div>
<script type="text/javascript">
这个位置我理解应该是要写调用tab1和tab2中对应的getXXXList(id)方法，但是不会写。
</script>
4、下部分的tab1.jsp
<div class="easyui-layout" fit="true">
<div region="center" style="padding:0px;border:0px">
<t:datagrid name="tab1list" title="REMOTE_DISCON_REC" actionUrl="XXXController.do?tab1datagrid" idField="id" fit="true">
<t:dgCol title="主键"field="id"hidden="true"width="0"></t:dgCol>
<t:dgCol title="外键"field="fkId"hidden="true" width="0"></t:dgCol>
</t:datagrid>
</div>
</div>
<script type="text/javascript">
function getXXXList(id){
$('#tab1list').datagrid('load',{
fkId : id
});
}
</script>
请帮忙看看，在tabs页面应该怎么写才能实现我想要的效果，或者说我其他的原本也写的不对，才导致了问题的出现？
页:
[1]