js在动态生成的页面上动态添加easyUI的tab

JavaScript027

js在动态生成的页面上动态添加easyUI的tab,第1张

要先初始化tabs后才能调用add方法，使用样式来初始化easyUI需要在dom

ready前将html代码添加到dom中，要不也无法初始化

var

tab

=

$("<div

id='tab_row_"

+

r

+

"_column_"

+

c

+

"'

class='easyui-tabs'

style='width:500pxheight:250px'>")

$('#xxxx').append(tab)

tab.tab()//要手动调用tabs进行初始化

var

content

=

"<table

id='table_datagrid_'"

+

view.id

+"></table>"

tab.tabs('add',

{

title:

view.title,

content

:

content,

closable:

true

})

$("#tab").tabs(".tabContent", {

tabs: "input"

})

试试把这上面的 tabs 功能定义为一个 function

例如

function tabs_run() {

....

}

然後在 click function 里面捕捉 event 完结时侯再次呼叫这个 tabs_run()

例如

$('#add').live('click', function() {

.....

tabs_run()

}

不过我疑惑了，你的 tabContent 没有设置 rel 或者 id… Tabs 是怎样侦测 index 的呢？

点击哪个 <li>会 load 哪个 tabContent 呢？

JS 语法向body中添加元素用innerHTML，下面是示例代码，供参考：

<script>

var div1 = document.getElementById('DIV1')

var code = '<TABLE>'

code += '<TR><TH>姓名</TH><TH>性别</TH></TR>'

code += '<TR><TD>张三</TD><TD>男</TD></TR>'

code += '<TR><TD>李三</TD><TD>女</TD></TR>'

code += '<TR><TD>王三</TD><TD>男</TD></TR>'

code += '<TR><TD>赵三</TD><TD>男</TD></TR>'

div1.innerHTML = code + '</TABLE>'

</script>

<body>

<div id='div1'></div>

</body>

但通常来说，开发者习惯动态的去添加行而非动态生成表格，因为表头基本都是固定的，每次都刷影响效率，故代码如下：

<script>

var div1 = document.getElementById('tb1')

var code = ''

code += '<TR><TD>张三</TD><TD>男</TD></TR>'

code += '<TR><TD>李三</TD><TD>女</TD></TR>'

code += '<TR><TD>王三</TD><TD>男</TD></TR>'

code += '<TR><TD>赵三</TD><TD>男</TD></TR>'

div1.innerHTML = code

</script>

<body>

<div>

<table>

<THEAD><TR><TH>姓名</TH><TH>性别</TH></TR></THEAD>

<TBODY id='tb1'></TBODY>

</table>

</div>

</body>