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

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

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

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

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

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

标准的html 结构是

<html>

<head>

    <title>这是完整的html结构</title>

    <script></script>

</head>

<body>

<div>内容</div>

</body>

</html>

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

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

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

百度地址

下面是我的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ include file="/common/page.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Insert title here</title>

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

<body>

<script type="text/javascript" src="${pageContext.request.contextPath }/easyui/datagrid-detailview.js"></script>

     <script type="text/javascript">

     $(function(){

               $("#dg").datagrid({

            title:'汽车列表',

            singleSelect:true,

            fitColumns:true,

            pagination:true,

            rownumbers:true,

            toolbar:'#toolbar',

            url:'cars/findAllCars.action',

            columns:[[

                {field:'carnumber',title:'车牌号',width:100},

                {field:'cartype',title:'类型',width:100},

                {field:'color',title:'颜色',width:100},

                {field:'price',title:'价格',width:80},

                {field:'rentprice',title:'租金',width:100},

                {field:'deposit',title:'押金',width:100}

            ]],

            view: detailview,

            detailFormatter:function(index,data){

                    //alert(index+"----------"+data.carnumber);

                    return "<table class='tbls' style='width:100%' border='1'>"+

                            "<tr><td rowspan='2' class='tds' width='34.6%'><img src='"+data.carimg+"'/></td>"+

                            "<td class='tds'>租赁状态:"+data.isrenting+"</td></tr>"+

                            "<tr><td class='tds'>描述:"+data.cardesc+"</td></tr>"+

                            "</table>";

                } /*  ,

            onExpandRow:function(index,data){

                    alert(index+"----------"+data.carnumber);

                }  */

            });

           });

        </script>

</head>

          <table id="dg" class="easyui-datagrid" style="width:700px;height:450px;" align="center">

   </table>

    <!-- 添加工具栏 -->

     <div id="toolbar">

        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add"

            plain="true" onclick="newCars()">添加车辆</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit"

            plain="true" onclick="editCars()">编辑车辆</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove"

        plain="true" onclick="destroyRole()">删除角色</a>

    </div>

    <!-- 指定添加角色信息需要的对话框 -->

    <div id="dlg" class="easyui-dialog" style="width:600px"

            closed="true" buttons="#dlg-buttons">

              <!-- 添加div层显示上传的图片 -->

              <div style="position: absolute;width: 180px;

              height: 180px;border: red solid 1px;left:65%;top: 20%" id="img">

                  <img  src="" id="carImg">

              </div>  

        <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">

            <div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">车辆信息</div>

            <div style="margin-bottom:10px">

                <input name="carnumber" class="easyui-textbox" required="true"

                label="车牌号:" style="width:60%">

            </div>

            <div style="margin-bottom:10px">

                <input name="cartype" class="easyui-textbox" required="true"

                label="类型:" style="width:60%">

            </div>

            <div style="margin-bottom:10px">

                <input name="color" class="easyui-textbox" required="true"

                label="颜色:" style="width:60%">

            </div>

            <div style="margin-bottom:10px">

                <input name="price" class="easyui-textbox" required="true"

                label="价格:" style="width:60%">

            </div>

            <div style="margin-bottom:10px">

                <input name="rentprice" class="easyui-textbox" required="true"

                label="租金:" style="width:60%">

            </div>

            <div style="margin-bottom:10px">

                <input name="deposit" class="easyui-textbox" required="true"

                label="押金:" style="width:60%">

            </div>

             <div style="margin-bottom:10px">

                <input name="isrenting" class="easyui-textbox" required="true"

                label="状态:" style="width:60%">

            </div>

            <div style="margin-bottom:10px">

                <input name="cardesc" class="easyui-textbox" required="true"

                data-options="label:'描述:',multiline:true"

                 style="width:100%;height:100px">

            </div>

            <input type="hidden" id="cimg" name="carimg">

            </form>

            <form id="fm2" method="post" enctype="multipart/form-data"

                novalidate style="margin:0;padding:1px 50px">

                <div style="margin-bottom:10px">

                    <input name="mf" class="easyui-filebox"

                    label="图片:" style="width:60%">

                    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add"

                plain="true" onclick="uploadCarsImg()">上传图片</a>

                </div>

            </form>

    </div>

    <!-- 指定提交表单的按钮 -->

     <div id="dlg-buttons">

        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveCars()" style="width:90px">Save</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>

    </div>

    <!-- --------------------------授权的对话框------------------------ -->

    <!-- 指定添加角色信息需要的对话框 -->

    <div id="mdlg" class="easyui-dialog" style="width:400px;height: 400px"

            closed="true" buttons="#mdlg-buttons">

             <div id="treePrivilege" class="ztree"></div>

    </div>

  <script type="text/javascript">

          /***

          发送异步上传图片的请求

          **/

          function uploadCarsImg(){

              //获得页面的表单多对象

              var formData = new FormData($("#fm2")[0]);

              $.ajax({

                  url:'uploadCarImg.action',

                  type:'POST',

                  data:formData,

                  async:false,

                  cache:false,

                  contentType:false,

                  processData:false,

                  success:function(path){

                      $("#carImg").attr({src:path});

                      $("#cimg").val(path);

                  },

                  error:function(rv){

                      alert(rv);

                  }

              });

          }

        var url;

        //打开添加角色信息的对话框

        function newCars(){

            //打开对话框

            $('#dlg').dialog('open').dialog('center').dialog('setTitle','新增车辆');

            $('#fm').form('clear');//清空对话框的表单

             $('#fm2').form('clear');//清空对话框的表单

            $('#carImg').attr({src:''});

            url = 'addCars.action';

        }

        /*

        打开修改角色信息的对话框

        */

        function editCars(){

            //获得list列表中被选中的行

            var row = $('#dg').datagrid('getSelected');

            if (row){

                $('#dlg').dialog('open').dialog('center').dialog('setTitle','修改角色');

                $('#fm').form('load',row);//将选中的行的数据（json），在表单中进行回显

                url = 'updateCars.action';

                //情况表单二

                $('#fm2').form('clear');

                //回显图片

                $('#carImg').attr({src:row.carimg});

                //将车辆图片原来的路径保存到隐藏域

                $('#cimg').val(row.carimg);

            }

        }

        //发送异步请求，保存输入的角色信息

        function saveCars(){

            //发送ajax请求提交表单

            $('#fm').form('submit',{

                    url: url,

                    onSubmit: function(){

                        return $(this).form('validate');

                    },

                    //异步请求发送后，处理响应结果的回调函数

                    success: function(result){

                        //var result = eval('('+result+')');

                        if (result.errorMsg){

                            $.messager.show({//显示错误消息的消息框

                                title: 'Error',

                                msg: result.errorMsg

                            });

                        } else {//后台没有异常，正常响应，状态200

                            $('#dlg').dialog('close');        // close the dialog

                            $('#dg').datagrid('reload');    // 重新加载datagrid控件

                        }

                    }

            });

        }

    </script>

</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. [BZOJ2330][SCOI2011]糖果 差分约束系统+最短路

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2330 类似于题目中这种含有不等式关系,我们可以建立差分约束系统来跑最长路或最短路. 对于一 ...

  2. CSS3实现边框线条动画特效

    <div class="box-line"></div> CSS代码 .box-line, .box-line::before, .box-line::af ...

  3. 网盘资源搜索的一些知识 C#

    针对互联网盘上的资源进行搜索查找.写一个网盘资源搜索的要点主要有以下几点. 1.这个网盘资源搜索的原理就是利用互联网搜索引擎的site 命令. 其次就是针对网页链接进行提取以及处理. 首先就是编写一个 ...

  4. Java序列化技术性能分析(JDK原生与Protostuff)

    熟悉Java的朋友应该知道Java有一个叫序列化的技术,即把一个Object转换为可保存,可传输的流数据.相应的,同时存在反序列化,即将流数据转换为Object类,而在转换的过程中,该Object保持 ...

  5. vue2.0 路由知识一(路由的创建的全过程)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. C++ class、struct区别

    一.默认访问控制不同(最主要) struct默认为public,class默认为private.这个访问控制既是指成员的默认访问属性,又指继承时默认的继承属性. 二.定义template时不同 在模版 ...

  7. Laravel 使用中间件进行权限控制

    Laravel 使用中间件进行权限控制 飞凡的陀螺 关注 2018.01.24 17:45 字数 264 阅读 1138评论 0喜欢 1 先看 文档Laravel 中间件提供了一种方便的机制来过滤进入 ...

  8. cat - 连接文件并在标准输出上输出

    SYNOPSIS 总览 cat [选项列表] [文件列表]... DESCRIPTION 描述 将文件列表中的文件或标准输入连接到标准输出. -A, --show-all 等价于 -vET . -b, ...

  9. cookie和session的用法用途,执行流程,区别联系

    1.为什么要有cookie/session?在客户端浏览器向服务器发送请求,服务器做出响应之后,二者便会断开连接(一次会话结束).那么下次用户再来请求服务器,服务器没有任何办法去识别此用户是谁.比如w ...

  10. Android突破64K限制

    1.添加依赖 android{ defaultConfig{ ... multiDexEnabled true ... } } dependencies{ compile 'com.android.s ...