这个BUG 我花了一个半小时, 还是看不出哪里的问题,  于是就百度到这么一段话,我需要记住

<======================================================================================================================>

   使用tabs标签, 本身这个标签就在一个html里面,

   easyui中加载外部界面的组件,例如:panel,window,dailog,tabs等。请确保你引入的界面是一个html片段。

   html片段正确的写法再次提醒不要出现<html><head><body>三个标签:

<======================================================================================================================>

标准的html 结构是

  1. <html>
  2. <head>
  3. <title>这是完整的html结构</title>
  4. <script></script>
  5. </head>
  6. <body>
  7. <div>内容</div>
  8. </body>
  9. </html>

本身tabs 就在标准的html  中, 一般我们写html代码都应该遵循此此结构。而所谓的html片段就是上面完整结构中的内容部分。

虽然我们也会建立一个文件如b.html来保存html片段,但是在这个b.html中我们只需要编写<body>里面的内容不需要在把html的标准结构写出来。

详情请看:http://www.cnblogs.com/summer_adai/p/3548252.html

百度地址

下面是我的代码

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <%@ include file="/common/page.jsp" %>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  5.  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8. <meta http-equiv="pragma" content="no-cache">
  9. <meta http-equiv="cache-control" content="no-cache">
  10. <body>
  11. <script type="text/javascript" src="${pageContext.request.contextPath }/easyui/datagrid-detailview.js"></script>
  12. <script type="text/javascript">
  13. $(function(){
  14. $("#dg").datagrid({
  15. title:'汽车列表',
  16. singleSelect:true,
  17. fitColumns:true,
  18. pagination:true,
  19. rownumbers:true,
  20. toolbar:'#toolbar',
  21. url:'cars/findAllCars.action',
  22. columns:[[
  23. {field:'carnumber',title:'车牌号',width:100},
  24. {field:'cartype',title:'类型',width:100},
  25. {field:'color',title:'颜色',width:100},
  26. {field:'price',title:'价格',width:80},
  27. {field:'rentprice',title:'租金',width:100},
  28. {field:'deposit',title:'押金',width:100}
  29. ]],
  30. view: detailview,
  31. detailFormatter:function(index,data){
  32. //alert(index+"----------"+data.carnumber);
  33. return "<table class='tbls' style='width:100%' border='1'>"+
  34. "<tr><td rowspan='2' class='tds' width='34.6%'><img src='"+data.carimg+"'/></td>"+
  35. "<td class='tds'>租赁状态:"+data.isrenting+"</td></tr>"+
  36. "<tr><td class='tds'>描述:"+data.cardesc+"</td></tr>"+
  37. "</table>";
  38. } /* ,
  39. onExpandRow:function(index,data){
  40. alert(index+"----------"+data.carnumber);
  41. } */
  42. });
  43. });
  44.  
  45. </script>
  46.  
  47. </head>
  48.  
  49. <table id="dg" class="easyui-datagrid" style="width:700px;height:450px;" align="center">
  50.  
  51. </table>
  52. <!-- 添加工具栏 -->
  53. <div id="toolbar">
  54. <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add"
  55. plain="true" onclick="newCars()">添加车辆</a>
  56. <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit"
  57. plain="true" onclick="editCars()">编辑车辆</a>
  58. <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove"
  59. plain="true" onclick="destroyRole()">删除角色</a>
  60.  
  61. </div>
  62. <!-- 指定添加角色信息需要的对话框 -->
  63. <div id="dlg" class="easyui-dialog" style="width:600px"
  64. closed="true" buttons="#dlg-buttons">
  65.  
  66. <!-- 添加div层显示上传的图片 -->
  67. <div style="position: absolute;width: 180px;
  68. height: 180px;border: red solid 1px;left:65%;top: 20%" id="img">
  69. <img src="" id="carImg">
  70. </div>
  71.  
  72. <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
  73. <div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">车辆信息</div>
  74. <div style="margin-bottom:10px">
  75. <input name="carnumber" class="easyui-textbox" required="true"
  76. label="车牌号:" style="width:60%">
  77. </div>
  78. <div style="margin-bottom:10px">
  79. <input name="cartype" class="easyui-textbox" required="true"
  80. label="类型:" style="width:60%">
  81. </div>
  82. <div style="margin-bottom:10px">
  83. <input name="color" class="easyui-textbox" required="true"
  84. label="颜色:" style="width:60%">
  85. </div>
  86. <div style="margin-bottom:10px">
  87. <input name="price" class="easyui-textbox" required="true"
  88. label="价格:" style="width:60%">
  89. </div>
  90. <div style="margin-bottom:10px">
  91. <input name="rentprice" class="easyui-textbox" required="true"
  92. label="租金:" style="width:60%">
  93. </div>
  94. <div style="margin-bottom:10px">
  95. <input name="deposit" class="easyui-textbox" required="true"
  96. label="押金:" style="width:60%">
  97. </div>
  98. <div style="margin-bottom:10px">
  99. <input name="isrenting" class="easyui-textbox" required="true"
  100. label="状态:" style="width:60%">
  101. </div>
  102.  
  103. <div style="margin-bottom:10px">
  104. <input name="cardesc" class="easyui-textbox" required="true"
  105. data-options="label:'描述:',multiline:true"
  106. style="width:100%;height:100px">
  107. </div>
  108. <input type="hidden" id="cimg" name="carimg">
  109. </form>
  110. <form id="fm2" method="post" enctype="multipart/form-data"
  111. novalidate style="margin:0;padding:1px 50px">
  112. <div style="margin-bottom:10px">
  113. <input name="mf" class="easyui-filebox"
  114. label="图片:" style="width:60%">
  115. <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add"
  116. plain="true" onclick="uploadCarsImg()">上传图片</a>
  117. </div>
  118. </form>
  119.  
  120. </div>
  121. <!-- 指定提交表单的按钮 -->
  122. <div id="dlg-buttons">
  123. <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveCars()" style="width:90px">Save</a>
  124. <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
  125. </div>
  126.  
  127. <!-- --------------------------授权的对话框------------------------ -->
  128. <!-- 指定添加角色信息需要的对话框 -->
  129. <div id="mdlg" class="easyui-dialog" style="width:400px;height: 400px"
  130. closed="true" buttons="#mdlg-buttons">
  131. <div id="treePrivilege" class="ztree"></div>
  132. </div>
  133.  
  134. <script type="text/javascript">
  135. /***
  136. 发送异步上传图片的请求
  137. **/
  138. function uploadCarsImg(){
  139. //获得页面的表单多对象
  140. var formData = new FormData($("#fm2")[0]);
  141. $.ajax({
  142. url:'uploadCarImg.action',
  143. type:'POST',
  144. data:formData,
  145. async:false,
  146. cache:false,
  147. contentType:false,
  148. processData:false,
  149. success:function(path){
  150. $("#carImg").attr({src:path});
  151. $("#cimg").val(path);
  152. },
  153. error:function(rv){
  154. alert(rv);
  155. }
  156. });
  157. }
  158.  
  159. var url;
  160. //打开添加角色信息的对话框
  161. function newCars(){
  162. //打开对话框
  163. $('#dlg').dialog('open').dialog('center').dialog('setTitle','新增车辆');
  164. $('#fm').form('clear');//清空对话框的表单
  165. $('#fm2').form('clear');//清空对话框的表单
  166. $('#carImg').attr({src:''});
  167. url = 'addCars.action';
  168. }
  169.  
  170. /*
  171. 打开修改角色信息的对话框
  172. */
  173. function editCars(){
  174. //获得list列表中被选中的行
  175. var row = $('#dg').datagrid('getSelected');
  176. if (row){
  177. $('#dlg').dialog('open').dialog('center').dialog('setTitle','修改角色');
  178. $('#fm').form('load',row);//将选中的行的数据(json),在表单中进行回显
  179. url = 'updateCars.action';
  180. //情况表单二
  181. $('#fm2').form('clear');
  182. //回显图片
  183. $('#carImg').attr({src:row.carimg});
  184. //将车辆图片原来的路径保存到隐藏域
  185. $('#cimg').val(row.carimg);
  186.  
  187. }
  188. }
  189. //发送异步请求,保存输入的角色信息
  190. function saveCars(){
  191. //发送ajax请求提交表单
  192. $('#fm').form('submit',{
  193. url: url,
  194. onSubmit: function(){
  195. return $(this).form('validate');
  196. },
  197. //异步请求发送后,处理响应结果的回调函数
  198. success: function(result){
  199. //var result = eval('('+result+')');
  200. if (result.errorMsg){
  201. $.messager.show({//显示错误消息的消息框
  202. title: 'Error',
  203. msg: result.errorMsg
  204. });
  205. } else {//后台没有异常,正常响应,状态200
  206. $('#dlg').dialog('close'); // close the dialog
  207. $('#dg').datagrid('reload'); // 重新加载datagrid控件
  208. }
  209. }
  210. });
  211. }
  212.  
  213. </script>
  214.  
  215. </body>

仔细发现   我的datagridview 发送ajax请求 是在<body>标签里,   这个问题一定要注意,包括学习别的前端框架 也是一样的道理

easyUi 学习笔记 (二 ) 使用tabs 里datagridview 发送ajax请求 不访问后台的问题的更多相关文章

  1. easyUI学习笔记二

    1.  拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...

  2. angular学习笔记(二十四)-$http(2)-设置http请求头

    1. angular默认的请求头: 其中,Accept 和 X-Requested-With是$http自带的默认配置 Accept:application/json,text/plain       ...

  3. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  4. JMX学习笔记(二)-Notification

    Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...

  5. java之jvm学习笔记二(类装载器的体系结构)

    java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...

  6. Django学习笔记二

    Django学习笔记二 模型类,字段,选项,查询,关联,聚合函数,管理器, 一 字段属性和选项 1.1 模型类属性命名限制 1)不能是python的保留关键字. 2)不允许使用连续的下划线,这是由dj ...

  7. muduo学习笔记(二)Reactor关键结构

    目录 muduo学习笔记(二)Reactor关键结构 Reactor简述 什么是Reactor Reactor模型的优缺点 poll简述 poll使用样例 muduo Reactor关键结构 Chan ...

  8. python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法

    python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...

  9. python3.4学习笔记(二十) python strip()函数 去空格\n\r\t函数的用法

    python3.4学习笔记(二十) python strip()函数 去空格\n\r\t函数的用法 在Python中字符串处理函数里有三个去空格(包括'\n', '\r', '\t', ' ')的函数 ...

随机推荐

  1. html5移动端适配- media query

    iPad部分css适配 - media query 代码如下图:   注:  @media要放在css最下方,防止被覆盖.  

  2. .NET 出现参数化查询 需要参数但未提供该参数的错误

    1.问题的来源 在.NET或者C#中,我们一般执行sql语句的话,推荐使用参数化查询,这样可以避免sql注入的攻击,但是,我在使用参数化查询的时候 出现了以下的错误,详细如下图: 图一这是写sql语句 ...

  3. debian设置英文模式

    Ubuntu太臃肿了,遂换回debian系统.在虚拟机上装debian,发现console下中文不显示. 各种export方法试过,始终无效.废了一个小时终于找到方法了.记录之. debian设置语言 ...

  4. qt查找框设置

    转载请注明出处:http://www.cnblogs.com/dachen408/p/7229129.html 主界面弹出查找框方法,查找框显示在主界面上层,并还可以点击主界面,非模态. class ...

  5. 【My First Blog】评近期国产烂片-《何以笙箫默》

    昨晚,我脑抽去看了[何以笙箫默],看完后我的感觉就是被这部片子恶心到了,现在想起来我还是想说:何以笙箫默是烂片烂片烂片!重要的是说三遍.以前,我问电视剧版<何以笙箫默>何以这么LOW,看了 ...

  6. 最小生成树Prim算法 Kruskal算法

    Prim算法(贪心策略)N^2 选定图中任意定点v0,从v0开始生成最小生成树 树中节点Va,树外节点Vb 最开始选一个点为Va,其余Vb, 之后不断加Vb到Va最短距离的点 1.初始化d[v0]=0 ...

  7. Vue之x-template(2)

    将html结构写在一对script标签中,设置type=“x-template” <!DOCTYPE html> <html> <head lang="en&q ...

  8. SpringMVC+ajax返回JSON串

    一.引言 本文使用springMVC和ajax做的一个小小的demo,实现将JSON对象返回到页面,没有什么技术含量,纯粹是因为最近项目中引入了springMVC框架. 二.入门例子 ①. 建立工程, ...

  9. NOIP2016玩具迷题

    题目大意就不说了,反正水水就过了. 主要在于找01关系. 代码: #include<cstdio> int n,m; struct node { ]; int f; }a[]; int m ...

  10. <Redis> 入门五 持久化RBD/AOF

    RDB RDB持久化是指在指定的时间间隔内将内存中的数据集快照写入磁盘(默认是 dump.rdb). 默认持久化机制,就是将内存中的数据以快照的方式写入二进制文件dump.rbd中. 触发快照的条件 ...