jquery实现点击GridView弹出可以拖拉的div，异步处理后台数据并返回结果显示在div里...

最新推荐文章于 2018-01-13 16:01:27 发布

原创最新推荐文章于 2018-01-13 16:01:27 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ViewUI

jquery 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个使用ASP.NET和jQuery实现的示例项目，该示例展示了如何通过前端点击事件触发后台数据请求，并利用AJAX进行异步数据加载，同时实现了弹出窗口的效果及拖拽功能。

前台页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web._Default" %>

<html>
<head runat="server">
    <title>弹出明细的div效果</title>

    <script src="jquery-1.3.2.js" type="text/javascript"></script>

    <style type="text/css">
        table tr td
        {
            padding: 10px;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            $("#GridView1 tr td").click(function() {
                //获取点击的文本
                var val = $(this).text();

                var before_val = $(this).prev("td");//获取点击的单元格当前行的前一列
                alert("前一列值：" + before_val.text());//获取前一列值

              //**************************BEGIN****************************
                var index = $(this)[0].cellIndex; //点击单元格的当前列index
                var head_text = $("#GridView1 tr th:eq(" + index + ")").text(); //表头的列头内容
                alert("所在列名："+head_text);//这里就是表头内容，你点击那个单元格所在列的列表头(比如我这里的测试数据表头有：id、name、age)
                //**********************END**********************************

                //清空提示的div
                $("#tips").remove();
                //获取div距离左边值
                var left = $(this).offset().left + 10;
                //获取div距离顶端的值
                var top = $(this).offset().top + 25;
                //动态创建div，并添加到body里
                $("body").append(create_div(left, top));
                //添加拖动事件
                drag_div("tips");

                //a标签的关闭事件
                $("#tips a").click(function() {
                    //$("#tips").fadeOut("slow");//有效果的关闭
                    $("#tips").remove(); //没效果的关闭
                });

                //异步请求
                $.ajax({
                    type: "POST",
                    url: "DataRespones.ashx", //将后台操作放在此文件里
                    data: "name=" + val,//这里是传递到后台的参数，格式为：key=value 有多个参数就用&隔开，如何前台获取到的数值你不能传到后台，那我无语了。
                    beforeSend: function() {
                        $("#tips").append("<span id='s' style='font-size:12px;'>请稍后……</span>"); //增加超时后提示
                    },
                    success: function(msg) {
                        $("span").remove();
                        $("#tips").append("<span>通过异步请求返回的值：</span><span style='color:red;'>" + msg + "</span>");
                    },
                    complete: function() {
                        $("#tips #s").remove();
                    }
                });
            });
        });

        //拖动div
        function drag_div(id) {
            var _move, _x, _y;

            $("#" + id).mousedown(function(e) {
                _move = true;
                _x = e.pageX - parseInt($("#" + id).css("left"));
                _y = e.pageY - parseInt($("#" + id).css("top"));
                $("#" + id).fadeTo(20, 0.25); //点击后开始拖动并透明显示
            });

            $(document).mousemove(function(e) {
                $("#" + id).css("cursor", "move");
                if (_move) {
                    var x = e.pageX - _x; //移动时根据鼠标位置计算控件左上角的绝对位置
                    var y = e.pageY - _y;
                    $("#" + id).css({ top: y, left: x }); //控件新位置
                }
            }).mouseup(function() {
                $("#" + id).css("cursor", "default");
                _move = false;
                $("#" + id).fadeTo("fast", 1); //松开鼠标后停止移动并恢复成不透明
            });
        }

        //创建提示div
        function create_div(left, top) {
            var html = "<div id='tips' style='left:" + left + "px;top:" + top + "px;width:120px;height:100px;font-size:12px; padding:5px; border:1px solid #9ECD2A;position:absolute;background:#EDECE1;'><a href='javascript:void(0)'>关闭</a><br/><br/></div>";
            return html;
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" Width="200" Height="50" HorizontalAlign="Center"
            RowStyle-HorizontalAlign="Center">
        </asp:GridView>
    </div>
    </form>
</body>
</html>

后台ashx代码：

using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Threading;

namespace Web
{

    public class DataRespones : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string result = string.Empty;

            string name=context.Request["name"];//从前台发送过来的值

            result = SimulationDataBase(name);//将获取到的值再去查数据库，将查询的值以字符串形式返回给前台。
            context.Response.Write(result);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

        /// <summary>
        /// 模拟操作数据库(根据你的实际情况将数据库操作放在此处操作，或以同样的方式自己创建一个方法)
        /// </summary>
        /// <param name="name">前台传过来的值</param>
        /// <returns>返回给前台用的字符串</returns>
        private string SimulationDataBase(string name)
        {
            string temp = string.Empty;
            switch (name)
            {
                case "张三":
                    temp= "好好学习";

                    Thread.Sleep(2000);//人为手工模拟超时延迟。前台会出现"请稍后……"字样
                    break;
                case "王五":
                    temp = "天天向上";
                    break;
                default:
                    temp = "没有可查询的数据";
                    break;
            }
            return temp;
        }
    }
}

完整的项目代码以下：