easyui datagrid panel的列宽自适应浏览器大小

让datagrid或panel随浏览器的大小变化而相应调整自身大小，防止出现滚动条，可采取以下几个步骤：

1：对于panel本身

设置fit  boolean  当设置为true的时候面板大小将自适应父容器。下面的例子显示了一个面板，可以自动在父容器的最大范围内调整大小。

<div class="easyui-panel" style="width:200px;height:100px"
data-options="fit:true,border:false">
Embedded Panel
</div>

或 

$('#p').panel({   
    fit : true
});  

2：对于datagrid自身

fitColumns

boolean

真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。

可设置列宽 width为百分比

<table class="easyui-datagrid" style="width:400px;height:250px"  
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">  
    <thead>  
        <tr>  
            <th data-options="field:'code',width:33%">编码</th>  
            <th data-options="field:'name',width:33%">名称</th>  
            <th data-options="field:'price',width:33%,align:'right'">价格</th>  
        </tr>  
    </thead>  
</table>  

或

$('#dg').datagrid({   
    url:'datagrid_data.json',  
    itColumns:true, 
    columns:[[   
        {field:'code',title:'Code',width:33%},   
        {field:'name',title:'Name',width:33%},   
        {field:'price',title:'Price',width:33%,align:'right'}   
    ]]   
});  

3：当浏览器大小有变化时

/* 让搜索栏与表格随浏览器大小调整而调整 */

$(window).resize(function(){
$('#dg').datagrid('resize');//信息列表 datagrid
$('.easyui-panel').panel('resize');//搜索栏 panel
});

以上三个步骤  可保证页面不会出现滚动条情况。