GirdView拖动单元格，鼠标释放后更新拖动范围内的单元格

最新推荐文章于 2021-06-04 02:01:58 发布

huangwenquan123

最新推荐文章于 2021-06-04 02:01:58 发布

阅读量998

点赞数 1

分类专栏： JS 文章标签： function server asp null filter object

本文链接：https://blog.csdn.net/huangwenquan123/article/details/6671964

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
        body{margin:0px;padding:0px;}
        td{cursor:move;width:100px;text-align:center;}
        #spantd{background-color:Red;border:1px solid red;position:absolute;text-align:center;cursor:move;color:White;z-index:3;filter:alpha(opacity=50);opacity:0.5}
    </style>
    <script type="text/javascript">
        function Drag(gvID){            
            this.gvID=typeof gvID=="string"?document.getElementById(gvID):gvID;
            this.gvLeft=this.gvID.offsetLeft;
            this.gvTop = this.gvID.offsetTop;
            this.gvHeight=this.gvID.offsetHeight;
        }
        Drag.prototype={
            init:function(){
                  var td = this.gvID.getElementsByTagName("td");
                  var len = td.length;
                  for(var i=0;i<len;i++){
                       this.addEvent(td[i],"mousedown",this.bindEvent(this,this.Down,td[i]));
                  }
            },
            Down:function(){
                var e = arguments[0];
                var thistd = arguments[1];   
                this.oLeft = thistd.offsetLeft+this.gvLeft;
                this.oTop = thistd.offsetTop+this.gvTop;
                var createspan=document.createElement("span");
                createspan.id="spantd";
                createspan.innerHTML=thistd.innerHTML;
                createspan.style.top=this.oTop+"px";
                createspan.style.left=this.oLeft+"px"
                createspan.style.height=thistd.offsetHeight-2+"px";
                createspan.style.width=thistd.offsetWidth-2+"px";
                document.body.appendChild(createspan);
                this.newtop = e.clientY-this.oTop;
                this.oMove = this.bindEvent(this,this.Move,createspan);
                this.oUp = this.bindEvent(this,this.Up,[createspan,thistd]);
                this.addEvent(document,"mousemove",this.oMove);
                this.addEvent(document,"mouseup",this.oUp);
            },
            Move:function(){
                var e = arguments[0];
                var thisspan = arguments[1];
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                var top = e.clientY-this.newtop;
                if(top<=this.gvTop+thisspan.offsetHeight)
                    top=this.gvTop+thisspan.offsetHeight;
                if(top+thisspan.offsetHeight>=this.gvHeight)
                    top=this.gvHeight-thisspan.offsetHeight;
                thisspan.style.top=top+"px";
            },
            Up:function(){
                var e = arguments[0];
                var thisspan=arguments[1][0];
                var thistd = arguments[1][1];
                var index = Math.round((parseInt(thisspan.style.top)-parseInt(this.oTop))/parseInt(thisspan.offsetHeight));
                var parent = thistd.parentNode.getElementsByTagName("td");
                var indexTwo=0;
                for(var i=0;i<parent.length;i++){
                    if(parent[i]==thistd){
                        indexTwo=i;
                        break;
                    }
                }
                if(thisspan)
                    document.body.removeChild(thisspan); 
                var star=0;
                var child = thistd.parentNode;
                while(child!=null){
                    if(star==index)
                        break;
                    if(index>0){
                        ++star;
                        child=child.nextSibling;
                    }
                    else{
                        --star;
                        child=child.previousSibling;
                    }
                }
                child.getElementsByTagName("td")[indexTwo].innerHTML=thistd.innerHTML;                
                this.deleteEvent(document,"mousemove",this.oMove);
                this.deleteEvent(document,"mouseup",this.oUp);
            },
            bindEvent:function(obj,fun,para){
                  return function(e){
                     fun.apply(obj,[e||window.event,para]);
                  }
            },
            addEvent:function(OTarget,Name,FunName){
                if(OTarget.addEventListener){
                    OTarget.addEventListener(Name,FunName,false);
                }
                else if(OTarget.attachEvent){
                    OTarget.attachEvent("on"+Name,FunName);
                }
                else{
                    OTarget["on"+Name]=FunName;
                }
            },
            deleteEvent:function(oTarget,name,funName){
                if(oTarget.removeEventListener) {  
                    oTarget.removeEventListener(name,funName,false);  
                } 
                else if(oTarget.detachEvent) {  
                    oTarget.detachEvent("on" + name,funName);  
                }
                else{  
                    oTarget["on" + name] = null;  
                } 
            }
        }
        window.onload = function(){
            var d = new Drag("GridView2");
            d.init();
            
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" >
    <Columns>
        <asp:BoundField HeaderText="ID" DataField="ID" />
        <asp:BoundField HeaderText="Name" DataField="Name" />
    </Columns>
    </asp:GridView>    
    </form>
</body>
</html>

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GridView2.DataSource = getTable();
            GridView2.DataBind();
        }
    }
    public DataTable getTable()
    {
        string[] name = { "张三", "李四", "王五","赵六","林七" };
        DataTable dt = new DataTable("XML");
        dt.Columns.Add("ID", typeof(System.Int32));
        dt.Columns.Add("Name", typeof(System.String));
        dt.Columns.Add("Time", typeof(System.DateTime));
        for (int i = 0; i < name.Length; i++)
        {
            DataRow row = dt.NewRow();
            row[0] = i + 1;
            row[1] = name[i];
            row[2] = Convert.ToDateTime("2011-6-2");
            dt.Rows.Add(row);
        }
        return dt;
    }

huangwenquan123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
GirdView拖动单元格，鼠标释放后更新拖动范围内的单元格

无标题页 body{margin:0px;padding:0px;} td{cursor:move;width:100px;text-align:center;} #spantd{background-color:
复制链接

扫一扫