EasyUI中的Tabs名称变化的简单示例

首先是在使用tabs的页面前台（一般若使用layout布局的话，则在layout页面）：

此js代码的作用为：查看不同数据（单击datagridv行触发事件）的时候，如果没有此“查看页面”标签，则添加，若有此标签，则回选中此标签产生不同的tabs页面。

由于每次查看时候的标签名称都为“查看页面”，则其每次都会回选到查看页面，但其并不会刷新（update）当前页面的数据。

但是判定的条件是title是相等的为true，难道换一个判断条件？

但这样做的话每次都会产生一个新页面，而且需要后缀一个标示符来区别每一个标签（一般选择主键id），非常不美观。

处理办法：

如下代码，在var content =tabs中添加的内容，可以是一个独立的页面，也可以是一个模板页，由于每次向标签页添加内容的时候，其查看数据时候传的参数不会相同（主键id），故url不会相同，var content也不会相同，所以问题解决了

        function addTab(title, url) {
            var content = '<iframe  marginwidth="0" marginheight="0" src="' + url + '"  frameborder="0" width="100%" height="100%"></iframe>';
            if ($('#tab').tabs('exists', title)) {
                $('#tab').tabs('select', title);
                var tab = $('#tab').tabs('getSelected');
                var options = tab.panel('options');
                var closable = options.closable;
                if (content != options.content) {
                    $('#tab').tabs('update', {
                        tab: tab,
                        options: {
                            title: title,
                            content: content,
                            closable: closable
                      　　 }
                    　　});
               　　   }
           　　　　 }
　　　　　　 else {
                $('#tab').tabs('add', {
                    title: title,
                    content: content,
                    closable: true
                });
            }
        }

 这样的话，每次查看都会判定content 和options.content是否相同来决定是否添加一个新tab；但每次查看都只显示一个tabs页面，如果需要另起一个新页面，则可以在datagridv出添加一个右键新建查看的页面的事件，然后再绑定

 

                $('#tab').tabs('add', {
                    title: title,
                    content: content,
                    closable: true
                });

 

 方法即可，这里不做相关代码解释。

新增数据——如下：

             function add(bh) 
                {  
                      var url='页面地址';
                       var title='新增数据';
                    if(window.parent.addTab)
                    {
                        window.parent.addTab(title, url);
                    }
                    else
                    {
                        OpenWindow(url,'OpenDocument');
                   }
                }  

 单击查看数据——如下：

onClickRow:function (rowIndex, rowData) {
                    var selectId=rowData.{key};
                    var url='页面地址';
                    var title='查看页面';
                    if(window.parent.addTab)
                    {
                        window.parent.addTab(title, url);
                    }
                    else
                    {
                        OpenWindow(url,'OpenDocument');
                    }
                });

 

 注： 这里用到的是datagrid的行单击事件，如有需要可另写js事件。