easyUI-datagrid属性设置display：none，表头不显示-CSDN博客

本文介绍了一种解决在使用Datagrid组件时遇到的表头不显示问题的方法。当通过隐藏和显示不同的div来实现Tab效果时，可能会出现Datagrid表头无法正常显示的情况。文章提供了一个简单的解决方案：在显示新的div时调用Datagrid的resize方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="box1">
        <div class="dg1Box" style="margin-top:15px; margin-left:25px;">
            <table id="dg1" style="width:575px;"></table>
        </div>
    </div>

    <div class="box2" style="display:none;">
        <div class="dg2Box" style="margin-top:15px; margin-left:25px;">
            <table id="dg2" style="width:575px;"></table>
        </div>
    </div>

这样布局tab之后在JS中绑定datagrid：

    $('#dg1').datagrid({
        columns: [[
            { field: 'CompoundName', title: '组分名', width: 130, align: 'center', resizable:false },
            { field: 'CompoundMofo', title: '分子式', width: 130, align: 'center', resizable: false },
            { field: 'CompoundGraph', title: 'CAS号', width: 130, align: 'center', resizable: false },
            { field: 'operate', title: '操作', width: 130, align: 'center', resizable: false }
        ]],
        rownumbers: true
    });

    $('#dg2').datagrid({
        columns: [[
            { field: 'TBCompoundID', title: '组分库Id', width: 130, align: 'center', resizable: false },
            { field: 'HeaderText', title: '表头', width: 130, align: 'center', resizable: false },
            { field: 'Format', title: '格式', width: 130, align: 'center', resizable: false },
            { field: 'operate', title: '操作', width: 130, align: 'center', resizable: false }
        ]],
        rownumbers: true
    });