I have only one tabs in a static HTML, and two panels in the tabs. Each panel has a datagrid which show the rownumbers.
If I init the "onSelect" event for two datagrids, then one rownumber is normal who is default selected panel in tabs, but the other datagrid is abnormal.
I tried "resize" datagrid when select panel, but doesn't work.
If I comment the init of "onSelect" event, it will be ok.
test code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type='text/javascript' src='../components/easyui_1.4/easyui-include.js'></script>
</head>
<body>
<div class="easyui-tabs" id="tab" style="width:810px;height: 500px" data-options="selected:1">
<div id="tab1" title="tab1" style="padding:10px">
<table id="list_tab1" class="easyui-datagrid" style="width:358px;height: 434px"
data-options="rownumbers:true">
<thead>
<tr>
<th data-options="field:'info',width:85,align:'left',resizable:false">
info
</th>
<th data-options="field:'content',width:130,align:'left',resizable:false">
content
</th>
<th data-options="field:'retrievePerson',width:85,align:'left',resizable:false">
retrievePerson
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1<br>2<br>3<br>4</td>
<td>content 1234567890, 1234567890,, 12345678910,, ,</td>
<td>123123,......<br><a>See All</a></td>
</tr>
<tr>
<td>1<br>2<br>3<br>4</td>
<td>content 1234567890, 1234567890,, 12345678910,, ,</td>
<td>123123,......<br><a>See All</a></td>
</tr>
</tbody>
</table>
</div>
<div id="tab2" title="tab2" style="padding:10px">
<table id="list_tab2" class="easyui-datagrid" style="width:358px;height: 434px"
data-options="rownumbers:true">
<thead>
<tr>
<th data-options="field:'info',width:85,align:'left',resizable:false">
info
</th>
<th data-options="field:'content',width:130,align:'left',resizable:false">
content
</th>
<th data-options="field:'retrievePerson',width:85,align:'left',resizable:false">
retrievePerson
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1<br>2<br>3<br>4</td>
<td>content 1234567890, 1234567890,, 12345678910,, ,</td>
<td>223311,......<br><a>See All</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script type='text/javascript'>
$(function () {
$('#list_tab1').datagrid({
onSelect: function (index, data) {
}
});
$('#list_tab2').datagrid({
onSelect: function (index, data) {
}
});
// $('#tab').tabs({
// onSelect: function (title, index) {
// if (index === 0) {
// $('#list_tab1').datagrid('resize');
// console.log("list_tab1");
// } else if (index === 1) {
// $('#list_tab2').datagrid('resize');
// console.log("list_tab2");
// }
// }});
});
</script>
</html>
