jQuery UI-JQuery easyUI 如何在左侧菜单单栏收起时让右侧表格适应网页宽度的变化
问题描述：
- jquery easyUI 1.3
- 使用layout布局，主页显示头部，左侧，中间，和底部。
点击左侧菜单时
在中间会添加一个标签页tab，在这个tab中实际是一个jsp页面，页面分上下两部分，上面是查询参数。下部是datagrid。问题来了，就是当我收起左侧菜单栏时，datagrid不能自动适应页面大小的变化，原来多大，在收起菜单栏后还是多大。
我想问大家如何才能解决这个问题呢。jquery easyUI 用的不多。希望熟悉的朋友不吝赐教。
或者怎么才能找到图中红色方框框起来的图片的方法，在调用时用js改变datagrid的大小。
附两图如下：第一幅是收起前，第二幅是收起后。
我使用http://www.iteye.com/problems/88744#solutions这里henghanan
提供的答案 解决了 datagrid的自适应问题，很简单一个配置搞定。
但是新的问题出现了。
场景重现步骤：
1.点击左侧菜单来，打开右侧datagrid；
2.收起datagrid，再收起左侧菜单栏；
3.展开datagrid，就会发现如下图所示的效果：注意看第一幅图和第三幅图，您就会发现问题了，datagrid里的列表头width变大了。
不知道谁能解决这个问题，拜谢了。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
其实我在 @jQuery EasyUI 表格宽度如何自适应 把主要代码已贴出来了，有的兄弟说不适合他们的要求，这可能和页面里的布局有关系，我现在把一个完成的页面贴出来，另外说一下jQuery EasyUI右侧center里的宽度和高度是通过js根据页面数据来计算出来的，并不是通过css固定写死的
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="jquery/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery/themes/icon.css"> <script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery/jquery.easyui.min.js"></script> <script type="text/javascript" src="javascript/My97DatePicker/WdatePicker.js"></script> </head> <body class="easyui-layout"> <div region="center" boder="false" style="padding:0 20px;"> <fieldset style="border: 1px solid #99BBE8; margin:10px 0; padding:5px;"> <form id="searchform" name="formsearchform" method="get" action="manage.php?act=logmanage.vlist"> <input type="hidden" name="act" value="logmanage.vlist"> <table class="n_input" id="searchform"> <tr> <td width="100" height="20" align="right" nowrap >{$cout.lang.log_list_module_name}：</td> <td nowrap> <select name="search[module]" onchange="var url='manage.php?act=logmanage.getOperationType&module='+this.value;$('#search_type').load(url);"> <option value="">{$cout.lang.log_list_choose_module}</option> {foreach item=module from=$cout.vform.ml}{if $module && $module !='ajax'} <option value="{$module}" {if $params.search.module==$module}selected{/if} >{$cout.log_module_list[$module]}</option> {/if}{/foreach} </select> </td> <td width="100" height="20" align="right" nowrap >{$cout.lang.log_list_operation_type}：</td> <td nowrap id="type_td"> <select name="search[type]" id="search_type"> <option value="">{$cout.lang.log_list_choose_operation_type}</option> {foreach item=type from=$cout.vform.type}{if $module} <option value="{$type}" {if $params.search.type==$type}selected{/if} >{$type}</option> {/if}{/foreach} </select> </td> <td width="100" height="20" align="right" nowrap >{$cout.lang.log_list_operation_desc}：</td> <td nowrap > <input type="text" name="search[log_desc]" value="{$params.search.log_desc}" /> </td> </tr> <tr> <td width="50" height="32" align="right" nowrap >{$cout.lang.common_operator}：</td> <td nowrap > <input type="text" name="search[name]" value="{$params.search.name}" /> </td> <td width="50" height="20" align="right" nowrap >{$cout.lang.common_operator_ip}：</td> <td nowrap > <input type="text" name="search[operator_ip]" value="{$params.search.operator_ip}" /> </td> <td width="100" height="20" align="right" nowrap >{$cout.lang.log_list_opertaion_time}：</td> <td nowrap > <input name="search[beginDate]" id="beginDate" class="Wdate" type="text" value="{if $params.search.beginDate}{$params.search.beginDate}{/if}" {literal}onfocus="WdatePicker({lang:'{/literal}{$smarty.cookies.lang}{literal}',isShowToday:false,isShowWeek:true,isShowClear:false,readOnly:true,maxDate:'#F{$dp.$D('endDate')||'{/literal}{$cout.date.today.aymd}{literal}'}'})"{/literal} style="width:90px" /> - <input name="search[endDate]" id="endDate" class="Wdate" type="text" value="{if $params.search.endDate}{$params.search.endDate}{/if}" {literal}onFocus="WdatePicker({lang:'{/literal}{$smarty.cookies.lang}{literal}',isShowToday:false,isShowWeek:true,isShowClear:false,readOnly:true,minDate:'#F{$dp.$D('beginDate')}',maxDate:'{/literal}{$cout.date.today.aymd}{literal}'}'})"{/literal} style="width:90px" /> </td> </tr> <tr> <td height="32" colspan="10" align="center" nowrap="nowrap"> <input type="hidden" id="nowpage" name="nowpage" value="{$smarty.get.nowpage|default:1}"> <button onclick="$(':button').attr('disabled','disabled'); $('#searchform').submit()">{$cout.lang.page_button_search}</button> </td> </tr> </table> </form> </fieldset> <table id="tt" class="easyui-datagrid" singleSelect="true" fitColumns="true" style=""> <thead> <tr> <th field="log_id" width="40" align="center">{$cout.lang.log_list_record_no}</th> <th field="module" width="80" align="center">{$cout.lang.log_list_module_name}</th> <th field="type" width="80" align="center">{$cout.lang.log_list_operation_type}</th> <th field="log_desc" width="400" align="center">{$cout.lang.log_list_operation_desc}</th> <th field="admin_id" width="80" align="center">{$cout.lang.common_operator}</th> <th field="log_ip" width="80" align="center">{$cout.lang.common_operator_ip}</th> <th field="log_date" width="100" align="center">{$cout.lang.log_list_opertaion_time}</th> </tr> </thead> <tbody> {foreach from=$cout.vlist.list item=field_value} {if $field_value.module !='ajax'} <tr> <td>{$field_value.log_id}</td> <td>{$field_value.module}</td> <td>{$field_value.type}</td> <td>{$field_value.log_desc}</td> <td>{$field_value.admin_id}</td> <td>{$field_value.log_ip|long2ip}</td> <td>{$field_value.log_date|date_format:"%y-%m-%d %H:%M:%S"}</td> </tr> {/if} {/foreach} </tbody> </table> <div id="pager" class="datagrid-pager" style="border:1px solid #ccc;"></div> </div> <script type="text/javascript"> var total = {$cout.cleftpage.total} ; var nowpage = {$smarty.get.nowpage|default:1} ; var page_limit = {$cout.cleftpage.page_limit} ; {literal} try{ $("#pager").pagination({ total: total, pageSize: page_limit, pageNumber: nowpage, showPageList: false, onSelectPage: function(pageNumber, pageSize){ $('#nowpage').val(pageNumber); $('#searchform').submit(); } }); $('#tt').datagrid({ onClickCell : function(rowIndex, field, value){ if(field == 'log_desc') {/literal}$.messager.alert('{$cout.lang.message_box_title_info_3}','<pre>'+value+'</pre>');{literal} } }); }catch(e){} /** * JQuery扩展方法，用户对JQuery EasyUI的DataGrid控件进行操作。 */ $.fn.extend({ /** * 修改DataGrid对象的默认大小，以适应页面宽度。 * * @param heightMargin * 高度对页内边距的距离。 * @param widthMargin * 宽度对页内边距的距离。 * @param minHeight * 最小高度。 * @param minWidth * 最小宽度。 * */ resizeDataGrid : function(heightMargin, widthMargin, minHeight, minWidth) { var height = $(document.body).height() - heightMargin; var width = $(document.body).width() - widthMargin; height = height < minHeight ? minHeight : height; width = width < minWidth ? minWidth : width; $(this).datagrid('resize', { height : height, width : width }); } }); $(function() { var datagridId = 'tt'; // 第一次加载时自动变化大小 $('#' + datagridId).resizeDataGrid(180, 40, 300, 800); // 当窗口大小发生变化时，调整DataGrid的大小 $(window).resize(function() { $('#' + datagridId).resizeDataGrid(180, 40, 300, 800); }); }); {/literal} </script> </body> </html>通过微调 heightMargin, widthMargin, minHeight, minWidth 这几个参数来达到和上面（搜索条件table和下面结果的table保持一致）
关于这个问题我找到了一个答案。
<table id="tt" class="easyui-datagrid" fit="true" singleSelect="true" fitColumns="true" style=""></table>
只要添加上fit=“true” 就可以了。