EasyUI DataGrid 窗口大小自适用
EasyUI 新版本里添加了 fit 属性，不需要老版本的那么复杂，重新load DataGrid.但是昨天用的时间发现只有一个DataGrid的时候用fit:true 很好使，但是如果有其它元素，如DataGrid上面有查询条件等内容就会导致 DataGrid 的fit:true 失效，显示格式混乱，调试好一阵子，发现用layout 布局可以解决. 示例代码如下
<!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"><meta name="keywords" content="jquery,ui,easy,easyui,web"><meta name="description" content="easyui help you build your web page easily!"><title>jQuery EasyUI CRUD Demo</title><link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css"><style type="text/css">#fm{margin:0;padding:10px 30px;}.ftitle{font-size:14px;font-weight:bold;color:#666;padding:5px 0;margin-bottom:10px;border-bottom:1px solid #ccc;}.fitem{margin-bottom:5px;}.fitem label{display:inline-block;width:80px;}</style><script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script><script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script><script type="text/javascript">var url;function newUser(){$('#dlg').dialog('open').dialog('setTitle','New User');$('#fm').form('clear');url = 'save_user.php';}function editUser(){var row = $('#dg').datagrid('getSelected');if (row){$('#dlg').dialog('open').dialog('setTitle','Edit User');$('#fm').form('load',row);url = 'update_user.php?id='+row.id;}}function saveUser(){$('#fm').form('submit',{url: url,onSubmit: function(){return $(this).form('validate');},success: function(result){var result = eval('('+result+')');if (result.success){$('#dlg').dialog('close');// close the dialog$('#dg').datagrid('reload');// reload the user data} else {$.messager.show({title: 'Error',msg: result.msg});}}});}function removeUser(){var row = $('#dg').datagrid('getSelected');if (row){$.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){if (r){$.post('remove_user.php',{id:row.id},function(result){if (result.success){$('#dg').datagrid('reload');// reload the user data} else {$.messager.show({// show error messagetitle: 'Error',msg: result.msg});}},'json');}});}}</script></head><body><div data-options="region:'north'" style="height:200px;padding:10px;"><p>The north content.</p><h2>Basic CRUD Application</h2><div class="demo-info" style="margin-bottom:10px"><div>Click the buttons on datagrid toolbar to do crud actions.</div></div><p>The north content.</p></div> <div data-options="region:'center'"><table id="dg" title="My Users" class="easyui-datagrid"url="get_users.php"toolbar="#toolbar" pagination="true" fit="true"rownumbers="true" fitColumns="true" singleSelect="true"><thead><tr><th field="firstname" width="50">First Name</th><th field="lastname" width="50">Last Name</th><th field="phone" width="50">Phone</th><th field="email" width="50">Email</th></tr></thead></table><div id="toolbar"><a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a><a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a><a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a></div></div><div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"closed="true" buttons="#dlg-buttons"><div class="ftitle">User Information</div><form id="fm" method="post" novalidate><div class="fitem"><label>First Name:</label><input name="firstname" class="easyui-validatebox" required="true"></div><div class="fitem"><label>Last Name:</label><input name="lastname" class="easyui-validatebox" required="true"></div><div class="fitem"><label>Phone:</label><input name="phone"></div><div class="fitem"><label>Email:</label><input name="email" class="easyui-validatebox" validType="email"></div></form></div><div id="dlg-buttons"><a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a><a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a></div></body></html>