这个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. （6）《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记

    1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...

  2. cookie设置和读取以及获取超链接参数

    function setCookie(c_name, value, expiredays) { var exdate = new Date() exdate.setDate(exdate.getDat ...

  3. github修改仓库项目的语言类型

    github是 采用Linguist来自动识别你的代码应该归为哪一类. 解决方法: 我们可以在仓库的根目录下添加.gitattributes文件: ## 使用 `.gitattributes` 配置文 ...

  4. Codeforces_789C_(dp)

    C. Functions again time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  5. Swift 中的值类型与引用类型

    顶级修饰 次级修饰 赋值类型 存储类型 值类型 值类型   深拷贝 栈 值类型 引用类型 浅拷贝 堆 引用类型 值类型 浅拷贝 堆 引用类型 引用类型 浅拷贝 堆 复合引用类型会改变内部值类型的存储行 ...

  6. laravel UserRequest $request error

    laravel UserRequest $request error Ask Question   0   laravel5.2,I create a UserRequest.php under Re ...

  7. JDK1.8中的Stream详解

    Stream简介 Stream 作为 Java 8 的一大亮点,它与 java.io 包里的 InputStream 和 OutputStream 是完全不同的概念.它也不同于 StAX 对 XML ...

  8. jdk5.0新增两个线程创建方法

    1.实现callable接口 import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; ...

  9. 花括号的使用 printf %${width}s , 否则会 去找 $widths

    花括号的使用  printf %${width}s , 否则会 去找  $widths 1 #! /usr/bin/perl   2 use strict;  3 use warnings;  4   ...

  10. Java调用WebService接口实现发送手机短信验证码功能，java 手机验证码，WebService接口调用

    近来由于项目需要,需要用到手机短信验证码的功能,其中最主要的是用到了第三方提供的短信平台接口WebService客户端接口,下面我把我在项目中用到的记录一下,以便给大家提供个思路,由于本人的文采有限, ...