tab+easyui datagrid无法正常显示

简介: tab+easyui datagrid无法正常显示


  • 问题
    bootstrap的tab页签里用easyUI的datagrid数据表格,请求正常,数据返回正常。第一个页签只显示表头和分页数据不显示。其他页签正常显示。
    如果指定初始显示第二个页签,则第二个页签的数据不显示了,其他正常。
    Chrome查看元素,数据表格高度太小。
  • 解决:初始显示的表格 指定高度和宽度 具体值。不要百分比指定。
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane active" id="bull" style="width:1000px;height:800px">
        <table id='grid' style="width:100%;height:96%"></table>
    </div>
</div>

在tab中放置一个datagrid,无法正常显示,查看结构,datagrid的所有元素大小都为0;

原因:datagrid会适应父元素的大小,在tab页显示前,父元素是不可见的,大小为0,0,所以datagrid下的所有元素大小也为0,0,导致不可见。

在显示tab页时 $("#gridApplyBusiness").datagrid("resize");即可正常显示


相关文章
|
7月前
EasyUI datagrid 从左至右递归合并表格
EasyUI datagrid 从左至右递归合并表格
41 2
|
7月前
EasyUI DataGrid 假分页
EasyUI DataGrid 假分页
71 0
|
7月前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
7月前
|
前端开发
easyui datagrid 的 tip实现
easyui datagrid 的 tip实现
175 0
|
7月前
|
JSON 监控 数据格式
Easy UI datagrid的学习
Easy UI datagrid的学习
Easyui datagrid 编辑结束时combobox显示value而不显示text
Easyui datagrid 编辑结束时combobox显示value而不显示text
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
286 0
EasyUI DataGrid 可编辑列级联操作
EasyUI DataGrid 可编辑列级联操作
easyui datagrid reload后自动全选解决
easyui datagrid reload后自动全选解决