Title: [SOLVED] the rownumbers display bug in datagrid
Post by: LoreYun on May 09, 2016, 10:43:05 PM
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>
Title: Re: the rownumbers display bug in datagrid
Post by: stworthy on May 09, 2016, 11:42:32 PM
You create the 'tabs' and 'datagrid' components more than once. If you are using the javascript code to create the components, please remove the 'easyui-tabs' and 'easyui-datagrid' class from the elements. You also can call 'fixRowHeight' method to reset the row height of the datagrid.
Title: Re: the rownumbers display bug in datagrid
Post by: LoreYun on May 10, 2016, 12:24:50 AM
Hi stworthy, Thank a lot! :D 'fixRowHeight' is worked! In fact, I use "data-options:url" to load data. Only static HTML has this problem. fixed code: $('#tab').tabs({
onSelect: function (title, index) {
if (index === 0) {
$('#list_tab1').datagrid('fixRowHeight');
} else if (index === 1) {
$('#list_tab2').datagrid('fixRowHeight');
}
}});
Thanks again.
|