EasyUI DataGrid 窗口大小自适用--------------未测试

EasyUI 新版本里添加了 fit 属性，不需要老版本的那么复杂，重新load DataGrid.但是昨天用的时间发现只有一个DataGrid的时候用fit:true 很好使，但是如果有其它元素，如DataGrid上面有查询条件等内容就会导致 DataGrid 的fit:true 失效，显示格式混乱，调试好一阵子，发现用layout 布局可以解决. 示例代码如下

[html]
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5.     <meta name="keywords" content="jquery,ui,easy,easyui,web">  
  6.     <meta name="description" content="easyui help you build your web page easily!">  
  7.     <title>jQuery EasyUI CRUD Demo</title>  
  8.     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">  
  9.     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">  
  10.     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">  
  11.     <style type="text/css">  
  12.         #fm{  
  13.             margin:0;  
  14.             padding:10px 30px;  
  15.         }  
  16.         .ftitle{  
  17.             font-size:14px;  
  18.             font-weight:bold;  
  19.             color:#666;  
  20.             padding:5px 0;  
  21.             margin-bottom:10px;  
  22.             border-bottom:1px solid #ccc;  
  23.         }  
  24.         .fitem{  
  25.             margin-bottom:5px;  
  26.         }  
  27.         .fitem label{  
  28.             display:inline-block;  
  29.             width:80px;  
  30.         }  
  31.     </style>  
  32.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>  
  33.     <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>  
  34.     <script type="text/javascript">  
  35.         var url;  
  36.         function newUser(){  
  37.             $('#dlg').dialog('open').dialog('setTitle','New User');  
  38.             $('#fm').form('clear');  
  39.             url = 'save_user.php';  
  40.         }  
  41.         function editUser(){  
  42.             var row = $('#dg').datagrid('getSelected');  
  43.             if (row){  
  44.                 $('#dlg').dialog('open').dialog('setTitle','Edit User');  
  45.                 $('#fm').form('load',row);  
  46.                 url = 'update_user.php?id='+row.id;  
  47.             }  
  48.         }  
  49.         function saveUser(){  
  50.             $('#fm').form('submit',{  
  51.                 url: url,  
  52.                 onSubmit: function(){  
  53.                     return $(this).form('validate');  
  54.                 },  
  55.                 success: function(result){  
  56.                     var result = eval('('+result+')');  
  57.                     if (result.success){  
  58.                         $('#dlg').dialog('close');      // close the dialog  
  59.                         $('#dg').datagrid('reload');    // reload the user data  
  60.                     } else {  
  61.                         $.messager.show({  
  62.                             title: 'Error',  
  63.                             msg: result.msg  
  64.                         });  
  65.                     }  
  66.                 }  
  67.             });  
  68.         }  
  69.         function removeUser(){  
  70.             var row = $('#dg').datagrid('getSelected');  
  71.             if (row){  
  72.                 $.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){  
  73.                     if (r){  
  74.                         $.post('remove_user.php',{id:row.id},function(result){  
  75.                             if (result.success){  
  76.                                 $('#dg').datagrid('reload');    // reload the user data  
  77.                             } else {  
  78.                                 $.messager.show({   // show error message  
  79.                                     title: 'Error',  
  80.                                     msg: result.msg  
  81.                                 });  
  82.                             }  
  83.                         },'json');  
  84.                     }  
  85.                 });  
  86.             }  
  87.         }  
  88.     </script>  
  89. </head>  
  90. <body>  
  91. <span style="color: rgb(255, 0, 0);"><strong><div data-options="region:'north'" style="height:200px;padding:10px;"></strong></span>  
  92.         <p>The north content.</p>  
  93.       
  94.     <h2>Basic CRUD Application</h2>  
  95.     <div class="demo-info" style="margin-bottom:10px">  
  96.             <div>Click the buttons on datagrid toolbar to do crud actions.</div>  
  97.     </div>  
  98.     <p>The north content.</p>  
  99.     </div>  
  100.                   
  101. <span style="color: rgb(255, 0, 0);"><strong>  <div data-options="region:'center'"></strong></span>  
  102.         <table id="dg" title="My Users" class="easyui-datagrid"  
  103.             url="get_users.php"  
  104.             toolbar="#toolbar" pagination="true" <span style="color: rgb(255, 0, 0);"><strong>fit="true"</strong></span>  
  105.             rownumbers="true" fitColumns="true" singleSelect="true">  
  106.         <thead>  
  107.             <tr>  
  108.                 <th field="firstname" width="50">First Name</th>  
  109.                 <th field="lastname" width="50">Last Name</th>  
  110.                 <th field="phone" width="50">Phone</th>  
  111.                 <th field="email" width="50">Email</th>  
  112.             </tr>  
  113.         </thead>  
  114.     </table>  
  115.     <div id="toolbar">  
  116.         <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>  
  117.         <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>  
  118.         <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>  
  119.     </div>  
  120.     </div>  
  121.   
  122.   
  123.     <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"  
  124.             closed="true" buttons="#dlg-buttons">  
  125.         <div class="ftitle">User Information</div>  
  126.         <form id="fm" method="post" novalidate>  
  127.             <div class="fitem">  
  128.                 <label>First Name:</label>  
  129.                 <input name="firstname" class="easyui-validatebox" required="true">  
  130.             </div>  
  131.             <div class="fitem">  
  132.                 <label>Last Name:</label>  
  133.                 <input name="lastname" class="easyui-validatebox" required="true">  
  134.             </div>  
  135.             <div class="fitem">  
  136.                 <label>Phone:</label>  
  137.                 <input name="phone">  
  138.             </div>  
  139.             <div class="fitem">  
  140.                 <label>Email:</label>  
  141.                 <input name="email" class="easyui-validatebox" validType="email">  
  142.             </div>  
  143.         </form>  
  144.     </div>  
  145.     <div id="dlg-buttons">  
  146.         <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>  
  147.         <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>  
  148.     </div>  
  149. </body>  
  150. </html>  

http://blog.csdn.net/kang89/article/details/8667303

posted @ 2014-03-28 22:44  秋意了了  阅读(353)  评论(0)  编辑  收藏  举报