easyUi 学习笔记 （二 ） 使用tabs 里datagridview 发送ajax请求 不访问后台的问题

时间：2021-08-16 13:08:08

这个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>标签里，   这个问题一定要注意，包括学习别的前端框架 也是一样的道理

相关文章