jquery easyUi dynamically create tabs based on the data label

    <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]);"> </a> Google </ div> <div ID = "texttabs" class = "easyui -tabs" style = "width: 500px; height: 400px;"!> </ div> <- container ---> <Script type = "text / JavaScript"> function testTabs ( arr) { // this method is called multiple times testTabs () method will increase indefinitely testTabs () in the three tabs, all how you need to repeatedly call, you need tabs before deleting again before calling testTabs () is 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 ) { // dynamic cycle add tabs for ( var I = 0; I <len; I ++ ) { $ ( . '#Texttabs') tabs ( 'the Add' , { title: '...' , Content: "" , }); } // set the tabs property $ ( '# texttabs' ) .tabs ({ border: to false , Fit: to 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) } }

 

Guess you like

Origin www.cnblogs.com/webmc/p/11332413.html