将easyui datagrid列适合可用宽度

时间:2017-08-02 08:48:38

标签: jquery jquery-easyui

在下面的代码中,中指定了3列,除了最后一列,我需要 menu3 来占用可用的宽度。

HTML

<table id="dg" style="width:100%;height:100%">
   <thead>
      <tr height="20">
         <th data-options="field:'menu1',sortable:false,resizable:false" width="20%">Menu1</th>
         <th data-options="field:'menu2',sortable:false,resizable:false" width="20%">menu2</th>
         <th data-options="field:'menu3',sortable:false,resizable:false" width="">menu3</th>
      </tr>
   </thead>
   <tbody>
      <td></td>
      <td></td>
      <td></td>
   </tbody>
</table>

的jQuery

$(function(){
    var dg = $('#dg').edatagrid();
    dg.edatagrid({
        fit:true,
        fitColumns: true,   
    });
});

这是我到目前为止尝试过的小提琴:

http://jsfiddle.net/0hk1twng/157/

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

只需添加以下css即可。它会使表格宽度达到100%

.datagrid-btable, .datagrid-header-inner, .datagrid-htable {
   width : 100%;
}