easyui taps 插件 增加新选项卡参数content配置问题

Posted 2020-07-25 LoganNi

自己工作中在遇到的问题，只是自己记录，只是部分代码，可能你也遇到类似问题，虽然表述不是很严谨周到，类似问题可以参考下。

function addTab(subtitle, url, icon, id) {   //增加选项卡函数
    if (!$(‘#tabs‘).tabs(‘exists‘, subtitle)) {
        $(‘#tabs‘).tabs(‘add‘, {
            title : subtitle,
            content : createFrame(id,url), //选项卡内容参数，用的是函数返回值，函数定义在下面
            closable : true,
            icon : icon
        });
    } else {
        $(‘#tabs‘).tabs(‘select‘, subtitle);
        // 刷新
        // $(‘#mm-tabupdate‘).click();
    }
    curtab = subtitle;
    tabClose();
}

function createFrame(id, url) {
    var s = ‘<iframe id="‘ + id + ‘" scrolling="auto" frameborder="0"  src=‘
            + url + ‘ " style="width:100%;height:100%;"></iframe>‘;
    return s;
}//该函数拼接了字符串并其返回作为content 值

一、自己初步理解的是 content 内容是string格式的， 要更改选项卡的内容需更改函数定义，内部定义实现将目标内容转换为字符串然后将其返回。
（后来测试过 content 内容可以为 number值，正常显示，object值不显示不报错，array报错）

测试函数

function aa(){//失败方法          
 //tab 主体结构下 添加了静态html <div id="aa" style=""><table style="height:300px"  class="tt"></table></div> 用以创建datagrid

$(‘.tt‘).datagrid(obj);
    var s=$("#aa").get(0).innerHTML;
    return s;
}//问题是 只有第一次点击树形菜单生效，原因是静态结构只能使用一次，第一次点击菜单节点可以使用
                                                       //第二次点击菜单节点不能访问了


---------原因暂时不详

二、换思路了 先把 Html <div id="aa" style=""><table style="height:300px"  class="tt"></table></div> 动态添加到Tab上 然后再回调中再在已有结构中创建datagrid。

function bb(){
   // var s = ‘ <div id="aa" style=""><table style="height:300px"  id="tt"></table></div>‘;
      //不能用id id唯一 多个选项卡之间id 会冲突 改为class名就好了
    var ss = ‘ <div id="aa" style=""><table style="height:300px"  class="tt"></table></div>‘;
    return ss;
}

回调函数中 

addTab(treeNode.name, treeNode.action_url, "", treeNode.id);
$(".tt").datagrid(obj);//在添加Tab卡之后加上一句 创建 datagrid。
解决了 content 配置问题。