jQuery-UI标签页中W2UI网格渲染异常：第二个网格显示不全

我用jQuery-UI构建了一个包含两个标签页的页面，每个标签页分别展示一个W2UI网格，但第二个网格显示为部分截断状态——第一个标签页的grid1显示正常，第二个标签页的grid2仅显示5个字段中的2个。

原代码示例 #

JavaScript代码 #

$(function() {
    $('#tabs').tabs({
     heightStyle: "fill"
  });
  
    let grid1 = new w2grid({
    name: 'grid1',
    box: '#grid1',
    columns: [
        { field: 'recid', text: 'ID', size: '50px', sortable: true, attr: 'align=center' },
        { field: 'lname', text: 'Last Name', size: '30%', sortable: true },
        { field: 'fname', text: 'First Name', size: '30%', sortable: true },
        { field: 'email', text: 'Email', size: '40%' },
        { field: 'sdate', text: 'Start Date', size: '120px' }
    ],
    records: [
        { recid: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
    ],
    })
    let grid2 = new w2grid({
    name: 'grid2',
    box: '#grid2',
    columns: [
        { field: 'recid', text: 'ID', size: '50px', sortable: true, attr: 'align=center' },
        { field: 'lname', text: 'Last Name', size: '30%', sortable: true },
        { field: 'fname', text: 'First Name', size: '30%', sortable: true },
        { field: 'email', text: 'Email', size: '40%' },
        { field: 'sdate', text: 'Start Date', size: '120px' }
    ],
    records: [
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
    ],
    })
})

HTML代码 #

<link href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id='tabs'>
      <ul>
        <li><a href='#grid1'>Grid1</a></li>
        <li><a href='#grid2'>Grid2</a></li>
      </ul>
      <div id='grid1'>This is Grid1</div>
      <div id='grid2'>This is Grid2</div>
    </div>

问题原因与解决方案 #

问题出在jQuery-UI标签页的隐藏特性：初始化页面时，第二个标签页的内容处于隐藏状态（display: none），W2UI网格计算宽度时无法获取到隐藏容器的实际尺寸，导致列宽计算错误，最终显示截断。

解决方法是在标签页切换时，重新渲染对应的W2UI网格，让它能获取容器的真实尺寸：

修改后的JavaScript代码 #

$(function() {
    $('#tabs').tabs({
        heightStyle: "fill",
        // 监听标签页切换事件
        activate: function(event, ui) {
            // 获取当前激活标签页的容器ID
            const gridId = ui.newPanel.attr('id');
            // 重新渲染对应网格
            if (w2ui[gridId]) {
                w2ui[gridId].refresh();
            }
        }
    });
  
    let grid1 = new w2grid({
        name: 'grid1',
        box: '#grid1',
        columns: [
            { field: 'recid', text: 'ID', size: '50px', sortable: true, attr: 'align=center' },
            { field: 'lname', text: 'Last Name', size: '30%', sortable: true },
            { field: 'fname', text: 'First Name', size: '30%', sortable: true },
            { field: 'email', text: 'Email', size: '40%' },
            { field: 'sdate', text: 'Start Date', size: '120px' }
        ],
        records: [
            { recid: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        ],
    });
    
    let grid2 = new w2grid({
        name: 'grid2',
        box: '#grid2',
        columns: [
            { field: 'recid', text: 'ID', size: '50px', sortable: true, attr: 'align=center' },
            { field: 'lname', text: 'Last Name', size: '30%', sortable: true },
            { field: 'fname', text: 'First Name', size: '30%', sortable: true },
            { field: 'email', text: 'Email', size: '40%' },
            { field: 'sdate', text: 'Start Date', size: '120px' }
        ],
        records: [
            { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        ],
    });
})

关键改动说明 #

• 给tabs()方法添加activate事件监听，每次切换标签页时触发回调
• 在回调中获取当前激活的标签面板ID，调用对应W2UI网格的refresh()方法，让网格重新计算容器尺寸并渲染列

这样处理后，第二个网格在切换到对应标签页时，会根据容器的真实宽度重新计算列宽，就能完整显示所有字段了。

内容的提问来源于stack exchange，提问作者Stefano Radaelli