如何在tabs页面调用tab子页面对应的function

xlj.1113

需求是：实现一个上下布局的表单，布局如下图；点击上面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")[0].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页面应该怎么写才能实现我想要的效果，或者说我其他的原本也写的不对，才导致了问题的出现？