这个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. 从单机到2000万 QPS 并发的 Redis 高性能缓存实践之路

    1.引言 知乎存储平台团队基于开源Redis 组件打造的知乎 Redis 平台,经过不断的研发迭代,目前已经形成了一整套完整自动化运维服务体系,提供很多强大的功能.本文作者陈鹏是该系统的负责人,本次文 ...

  2. 锐动SDK针对游戏直播提出的解决方案

    方案架构 PC端视频直播与录播功能为游戏厂商宣传,玩家个人秀,大型电竞赛事提供完美的技术解决方案. 直播形式灵活多变不,同音源的选择,画面切换,游戏中嵌入摄像头丰,富解说画面.突出主播个人魅力与粉丝形 ...

  3. 黑马程序员----java基础：多线程

    ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ---- ...

  4. ubuntu个人初始配置记录

    1.安装vim编辑器 sudo apt-get install vim vim-gnome. vim有vim(vim-basic),vim-tiny,vim-gnome(gvim)等多个版本,安装ub ...

  5. COGS.1200 ganggang的烦恼

    背景 Zhang Gangrui 年纪大了,记性不好,保险箱的密码记不住了,他只记得密码是一个数的阶乘各个位的数相加的和,最后还有个T或F,代表这个数是否为素数,正好,你到他家去了,他请你帮他这个忙, ...

  6. 数据结构算法 - ConcurrentHashMap 源码解析

    五个线程同时往 HashMap 中 put 数据会发生什么? ConcurrentHashMap 是怎么保证线程安全的? 在分析 HashMap 源码时还遗留这两个问题,这次我们站在 Java 多线程 ...

  7. 生产者-消费者中的缓冲区：BlockingQueue接口

    BlockingQueue接口使用场景相信大家对生产者-消费者模式不陌生,这个经典的多线程协作模式,最简单的描述就是生产者线程往内存缓冲区中提交任务,消费者线程从内存缓冲区里获取任务执行.在生产者-消 ...

  8. wireshark mqtt协议解析

    local tcp_dissector_table = DissectorTable.get("tcp.port") local ws_dissector_table = Diss ...

  9. php简单实用的调试工具类

    <?php /* * 调试类 */ class Common_Debug { //打开错误报告 public static function showError($debug = true) { ...

  10. hibernate5.3版本出现hibernate中The server time zone value“乱码”问题的解决办法。

    <!-- 配置关于数据库连接的四个项 driverClass url username password --> <property name="hibernate.con ...