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

    <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="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) } }

原文地址:https://www.cnblogs.com/webmc/p/11332413.html