zoukankan      html  css  js  c++  java

  • 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.             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="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
  • 相关阅读:
    Python开发测试工具案例分享①——开发环境搭建
    AWS—Xshell工具远程登录EC2虚拟机
    Jmeter接口测试⑧——websocker协议
    Jmeter接口测试⑦——参数化
    【转】git 2.27.0安装教程（Windows）
    Jmeter接口测试⑥——DELETE请求
    Jmeter接口测试⑤——PUT请求
    Jmeter接口测试④——响应断言
    Jmeter接口测试③——GET请求
    Jmeter接口测试②——正则提取器
  • 原文地址：https://www.cnblogs.com/dotnetmvc/p/3631640.html
Copyright © 2011-2022 走看看