jquery easyUi 根据数据动态创建tabs标签

Posted 2022-06-28 webmc

    <link rel="stylesheet" type="text/css" href="tabs.css">

    <script type="text/javascript" src="jquery.min.js"></script>

    <script type="text/javascript" src="jquery.easyui.min.js"></script>

<div style="margin-bottom:10px">
        <a href="#" class="easyui-linkbutton" onclick="testTabs([3]);">google</a>
    </div>
    <div id="texttabs" class="easyui-tabs" style="width:500px;height:400px;"> </div>  <!--容器  --->

    <script type="text/javascript">
        function testTabs(arr) 
            //这个方法如果多次调用testTabs()方法，会无限增加testTabs()中的3个tabs,所有如何需要多次反复调用，需要在再次调用testTabs()之前删除之前的tabs
            for (var i = $(‘#texttabs‘).tabs(‘tabs‘).length - 1; i >= 0; i--) 
                $("#texttabs").tabs(‘close‘, i);
            
            var content = "<table id=‘dataGrid‘></table><div id=‘dataGridPage‘></div>";
            var len = arr.length;
            if (len > 1) 
                //动态循环添加tabs
                for (var i = 0; i < len; i++) 
                    $(‘#texttabs‘).tabs(‘add‘, 
                        title: ‘...‘,
                        content: "",
                    );
                
                //设置tabs属性
                $(‘#texttabs‘).tabs(
                    border: false,
                    fit: false,
                    onSelect: function (title, index) 
                        console.log(index);
                        var sum = $(‘#texttabs‘).tabs(‘tabs‘).length
                        $(‘#texttabs‘).tabs(‘update‘, 
                            tab: $(‘#texttabs‘).tabs(‘getTab‘, index),
                            options: 
                                content: content,
                            ,
                        );
                        for (var i = 0; i < sum; i++) 
                            if (i != index) 
                                console.log(i)
                                $(‘#texttabs‘).tabs(‘update‘, 
                                    tab: $(‘#texttabs‘).tabs(‘getTab‘, i),
                                    options: 
                                        content: "<b></b>",
                                    ,
                                );
                            
                        
                        setTimeout(function () 
                            createtable();
                        , 500)
                    ,
                );
                $(‘#texttabs‘).tabs(‘select‘, 0);

             else 
                $(‘#texttabs‘).tabs(‘add‘, 
                    title: ‘测试tabs1‘,
                    content: content,
                );
                setTimeout(function () 
                    createtable();
                , 500)