关于jq easyui 刷新tabs的问题

搞了两个多小时，最后还是使用模拟点击搞定了关于tabs刷新的问题。

情景如下图：父级页面：SystemManage.aspx 子页面（传感器管理）：CGQManageWeb.aspx

使用jq-easyui提供的tabs插件完成的后台的布局操作。遇到一个问题，在父级页面添加新的tab panel也就是一个iframe后，如何在这个tab panel中调用jq-easyui提供的方法刷新这个页面。如图所示：当点击“保存修改”或“添加”后，如果保存成功那么同步刷新页面，以便重新加载数据。

有关jq-easyui的知识点可以看这里：http://www.jeasyui.net/plugins/160.html

方法：1.直接刷新页面，刷新前保存这个tab panel的title或者href，也就是在使用add方法添加新的tab panel时提供的url，然后重新设置这个panel的状态为选中状态，或者重新add一遍这个tab panel。

2.调用jq-esayui的自带方法update刷新选中的tab panel。

方法1是可行的，但没用这个方法去解决这个问题，我就想用方法2，有点轴。

addTab方法：

function addTab(title, url) {
    var gly = document.getElementById("gly").value;
    if (gly != 0&&title=="部门管理") {
        alert("无权限");
        return;
    }
    if ($('#tt').tabs('exists', title)) {
        $('#tt').tabs('select', title);
    } else {
        var content = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
        $('#tt').tabs('add', {
            title: title,
            content: content,//此处也可用href属性代替href:,
            closable: true
        });
    }
}

url就是要添加的tab的页面的地址。title就是显示的标题“传感器管理”。

下面进入正体，如何在当前选中页面中点击“保存”按钮后可以刷新当前页面。

首先来看官方的update方法的demo：

// update the selected panel with new title and content
var tab = $('#tt').tabs('getSelected');  // get selected panel
$('#tt').tabs('update', {
    tab: tab,
    options: {
        title: 'New Title',
        href: 'get_content.php'  // the new content URL
    }
});
 
// call 'refresh' method for tab panel to update its content
var tab = $('#tt').tabs('getSelected');  // get selected panel
tab.panel('refresh', 'get_content.php');

首先通过tabs方法获取选中的panel对象。然后调用update方法更新数据其实相当于重新加载了一次当前页面，只不过这个方法省了很多过程操作。

问题一，如果这个方法放在父级页面中去调用，一点问题都没有，但是如果是放在tab panel中这个子级页面中去调用就有问题了，$("#tt")是无法获取到对象的，因为在iframe里是找不到这个元素的。所以需要使用parent方法。

第二个问题，tabs方法无法识别，虽然在父级页面中你已经引入了easyui的js文件，但是iframe里是无法识别的，所以报错！还需要在子级页面iframe中引入js文件。

问题三，如上述代码中的第7行，需要提供href的值，如果在你不知道的情况下如果提供，或者说，即使知道每次调用也要改这个参数，很是麻烦！

下面解决这些问题:

问题一，没想到什么好办法，而且找到的办法都无效，弃之，所以update方法还是放在了父级页面中。方法如下：

function ReFresh() {
    var current_tab = $("#tt").tabs("getSelected");
    var urlstr = current_tab.panel('options').content.split('src')[1].split('style')[0];//获取tab panel的content，因为addTab方法中使用的就是content
    var URL = urlstr.substring(2, Number(urlstr.length-2));//截取url
    $("#tt").tabs('update', {
        tab: current_tab,
        options: {
            content: '<iframe scrolling="auto" frameborder="0"  src="' + URL + '" style="width:100%;height:100%;"></iframe>',
            //或者 href : '';  
        }
    });
}

这样$("#tt")就可以获取到对象了。

问题二，看代码中的3-4行，获取选中tab panel的href或url。

获取content的具体内容因为content里面包含tab panel的地址URL。然后根据URL的特点截取重要信息。

问题三，通过获取content的值就能获取到被选中的tab panel的href。

一个隐藏的button调用该方法。

<input type="button" value="re" id="re" onclick="ReFresh()" style="display:none"/>

该方法在CGQManageWeb.aspx上，获取隐藏的button，然后触发点击事件。

//模拟点击进行刷新
function ReFresh()
{
    var btn = parent.document.getElementById("re");
    //alert(btn.value);
    btn.click();
}

结束，可能不是很清楚，可能还有更好的方法，请大神勿喷！