【解决方法】EasyUI DataGrid不显示滚动条时，没有数据的问题

忘是亡心i 2022-04-10 10:42 798阅读 0赞

## 解决方法 ##

于dataGrid例如，下面的代码被添加到的定义：

JavaScript Code

<table style="font-family:Consolas, 'Courier New';font-size:12px;vertical-align:text-top;line-height:15px;"> 
 <tbody> 
  <tr> 
   <td style="color:#008284;background-color:#e3e3e3;vertical-align:text-top;"> 
    <div style="text-align:right;">
      1 
     <br> 2 
     <br> 3 
     <br> 4 
     <br> 5 
     <br> 6 
     <br> 7 
     <br> 8 
     <br> 9 
     <br> 10 
     <br> 
    </div> </td> 
   <td style="background-color:#008284;"> 
    <div style="border:1px #008284 solid;"></div> </td> 
   <td style="vertical-align:text-top;background-color:rgb(239,239,239);"> 
    <div>
      onLoadSuccess&nbsp;:&nbsp; 
     <span style="color:#0000ff;">function</span>&nbsp;(data)&nbsp;{ 
     <br> &nbsp;&nbsp;&nbsp;&nbsp; 
     <span style="color:#0000ff;">if</span>&nbsp;(data.total&nbsp;==&nbsp; 
     <span style="color:#ff0000;">0</span>)&nbsp;{ 
     <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$( 
     <span style="color:#800000;">'#dg'</span>).datagrid( 
     <span style="color:#800000;">'insertRow'</span>,&nbsp;{ 
     <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;row&nbsp;:&nbsp;{} 
     <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); 
     <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$( 
     <span style="color:#800000;">"#dg"</span>).parent().find( 
     <span style="color:#800000;">"tr[datagrid-row-index='0']"</span>).css({&nbsp;&nbsp; 
     <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     <span style="color:#800000;">"visibility"</span>&nbsp;:&nbsp; 
     <span style="color:#800000;">"hidden"</span>&nbsp;&nbsp; 
     <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp; 
     <br> &nbsp;&nbsp;&nbsp;&nbsp;} 
     <br> } 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## 更新日志 ##

经@云飞扬同学指点，将上文的部分代码做了更改。

下面引自@云飞扬同学的评论：

*整体思路正确，只是须要改动下选择器的限定，否则会影响全部的datagrid，将全部datagrid的第一行给隐藏掉了。  
easyui处理datagrid时将id的table部分保留并封装，添加datagrid-view1和datagrid-view2两个子元素，这俩view和原始table形成兄弟关系。第一个view是用于放置冻结列的，有冻结列的这里就会有数据。*

view2放置自然列的数据。所以，限定范围那句代码应该这么写了：

**\[javascript\]** [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  $("\#dg").parent().find("tr\[datagrid-row-index='0'\]").css(\{ 
2.  "visibility" : "hidden"

原代码：

JavaScript Code

<table style="font-family:Consolas, 'Courier New';font-size:12px;vertical-align:text-top;line-height:15px;"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,130,132);vertical-align:text-top;background-color:rgb(227,227,227);"> 
    <div style="text-align:right;">
      1 
     <br> 2 
     <br> 3 
     <br> 4 
     <br> 5 
     <br> 6 
     <br> 7 
     <br> 8 
     <br> 9 
     <br> 10 
     <br> 11 
     <br> 
    </div> </td> 
   <td style="background-color:rgb(0,130,132);"> 
    <div style="border:1px solid rgb(0,130,132);"></div> </td> 
   <td style="vertical-align:text-top;background-color:rgb(239,239,239);"> 
    <div>
      onLoadSuccess&nbsp;:&nbsp; 
     <span style="color:rgb(0,0,255);">function</span>&nbsp;(data)&nbsp;{ 
     <br> &nbsp;&nbsp;&nbsp;&nbsp; 
     <span style="color:rgb(0,0,255);">if</span>&nbsp;(data.total&nbsp;==&nbsp; 
     <span style="color:rgb(255,0,0);">0</span>)&nbsp;{ 
     <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$( 
     <span style="color:rgb(128,0,0);">'#dg'</span>).datagrid( 
     <span style="color:rgb(128,0,0);">'insertRow'</span>,&nbsp;{ 
     <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;row&nbsp;:&nbsp;{} 
     <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); 
     <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$( 
     <span style="color:rgb(128,0,0);">"tr[datagrid-row-index='0']"</span>).css({ 
     <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     <span style="color:rgb(128,0,0);">"visibility"</span>&nbsp;:&nbsp; 
     <span style="color:rgb(128,0,0);">"hidden"</span> 
     <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); 
     <br> &nbsp;&nbsp;&nbsp;&nbsp;} 
     <br> } 
     <br> 
    </div> 
    <div> 
     <br> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

[view plain]: http://blog.csdn.net/zhyl8157121/article/details/37763111#