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

  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. <h2>Basic CRUD Application</h2>
  94. <div class="demo-info" style="margin-bottom:10px">
  95. <div>Click the buttons on datagrid toolbar to do crud actions.</div>
  96. </div>
  97. <p>The north content.</p>
  98. </div>
  99. <span style="color: rgb(255, 0, 0);"><strong>  <div data-options="region:'center'"></strong></span>
  100. <table id="dg" title="My Users" class="easyui-datagrid"
  101. url="get_users.php"
  102. toolbar="#toolbar" pagination="true" <span style="color: rgb(255, 0, 0);"><strong>fit="true"</strong></span>
  103. rownumbers="true" fitColumns="true" singleSelect="true">
  104. <thead>
  105. <tr>
  106. <th field="firstname" width="50">First Name</th>
  107. <th field="lastname" width="50">Last Name</th>
  108. <th field="phone" width="50">Phone</th>
  109. <th field="email" width="50">Email</th>
  110. </tr>
  111. </thead>
  112. </table>
  113. <div id="toolbar">
  114. <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
  115. <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
  116. <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>
  117. </div>
  118. </div>
  119. <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
  120. closed="true" buttons="#dlg-buttons">
  121. <div class="ftitle">User Information</div>
  122. <form id="fm" method="post" novalidate>
  123. <div class="fitem">
  124. <label>First Name:</label>
  125. <input name="firstname" class="easyui-validatebox" required="true">
  126. </div>
  127. <div class="fitem">
  128. <label>Last Name:</label>
  129. <input name="lastname" class="easyui-validatebox" required="true">
  130. </div>
  131. <div class="fitem">
  132. <label>Phone:</label>
  133. <input name="phone">
  134. </div>
  135. <div class="fitem">
  136. <label>Email:</label>
  137. <input name="email" class="easyui-validatebox" validType="email">
  138. </div>
  139. </form>
  140. </div>
  141. <div id="dlg-buttons">
  142. <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
  143. <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
  144. </div>
  145. </body>
  146. </html>

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

EasyUI DataGrid 窗口大小自适用--------------未测试的更多相关文章

  1. jQuery EasyUI datagrid列名包含特殊字符会导致表格错位

    首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试,太老的版本不想去折腾了. 洒家在写前端的SQL执行工具时,表格用了 jQuery EasyUI datagrid,因为 ...

  2. easyui datagrid 禁止选中行 EF的增删改查（转载） C# 获取用户IP地址（转载） MVC EF 执行SQL语句（转载） 在EF中执行SQL语句（转载） EF中使用SQL语句或存储过程 .net MVC使用Session验证用户登录 PowerDesigner 参照完整性约束(转载)

    easyui datagrid 禁止选中行   没有找到可以直接禁止的属性,但是找到两个间接禁止的方式. 方式一: //onClickRow: function (rowIndex, rowData) ...

  3. 关于EasyUI DataGrid行编辑时嵌入时间控件

    本人做一个名为“安徽中控”项目时,为快速开发基础数据增删改模块,遂采用EasyUIDatagrid将所有增删改查的操作都集中于表格中,并且所有增删改查操作都集中于泛型对象,从而不必为每个表写具体的增删 ...

  4. easyUI datagrid editor扩展dialog

    easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 <!DOCTYPE html> <htm ...

  5. easyui datagrid标题列宽度自适应

    最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ...

  6. easyui datagrid使用

    http://www.cnblogs.com/zgqys1980/archive/2011/01/04/1925775.html 加载相关js和css,因为easyui依赖jquery,所有加载eas ...

  7. jQuery EasyUI datagrid实现本地分页的方法

    http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...

  8. easyui datagrid的列编辑

    [第十五篇]easyui datagrid的列编辑,同时插入两张表的数据进去   看图说话. 需求:插入两张表,上面的表单是第一张表的内容,下面的两个表格是第二张详情表的内容,跟第一张表的id关联 第 ...

  9. easyui datagrid使用(好)

    加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery,否则为提示找不到datagrid <!-- 加载jquery --> <scrip ...

随机推荐

  1. [POJ1050]To the Max（最大子矩阵，DP）

    题目链接:http://poj.org/problem?id=1050 发现这个题没有写过题解,现在补上吧,思路挺经典的. 思路就是枚举所有的连续的连续的行,比如1 2 3 4 12 23 34 45 ...

  2. [HDOJ4325]Flowers（树状数组 离散化）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4325 关于离散化的简介:http://blog.csdn.net/gokou_ruri/article ...

  3. 【转】Android 使用ORMLite 操作数据库

    Android 使用ORMLite 操作数据库   用过ssh,s2sh的肯定不会陌生 ,应该一学就会 第一步: 下载ormlite-android-4.41.jar和ormlite-core-4.4 ...

  4. webhdfs追加写HDFS异常

    问题 {:timestamp=>"2015-03-04T00:02:47.224000+0800", :message=>"Retrying webhdfs ...

  5. ibernate学习笔记5---实体类或属性名与数据库关键字冲突、hql命名参数、hql实现通用分页

    一.实体类或属性名与数据库关键字冲突问题1.实体类名与数据库中的关键字冲突比如:实体表User与oracle中的系统表冲突解决方式1:在xml中添加table属性,指定表名,使其不与name默认相等 ...

  6. HTTP使用BASIC认证的原理及实现方法

    一．   BASIC认证概述 在HTTP协议进行通信的过程中,HTTP协议定义了基本认证过程以允许HTTP服务器对WEB浏览器进行用户身份证的方法,当一个客户端向HTTP服务器进行数据请求时,如果客户 ...

  7. [转载] mysql5.6 删除之前的ibdata1文件后再重新生成，遇到[Warning] Info table is not ready to be used. Table 'mysql.slave_master_info' cannot be opened.问题

    [转载] mysql5.6 删除之前的ibdata1文件后再重新生成,遇到[Warning] Info table is not ready to be used. Table 'mysql.slav ...

  8. 在VMware 虚拟机中配置 windows2003系统的NLB负载均衡;0x800706D5错误的解决方法;没有接口可用于安装新的群集

    首先在VM里面 我装了3个2003的系统,  分别为 webservice01 ,webservice 02 , 以及   webview 这3台. 前面两台用于配置负载均衡,后面的webview就是 ...

  9. JS改变input的value值不触发onchange事件解决方案 （转）

    方法(一)(转载的网络资料) 需要了解的知识     首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...

  10. MongoDB数据库和集合的状态信息

    查看数据库统计信息:db.stats()  > use testswitched to db test> db.stats(){        "db" : " ...