GridView鼠标拖拽改变列宽

前端JS

<script language="javascript" type="text/javascript">
        //设置Datagrid列宽可以被拖动的函数
        function SyDG_moveOnTd(td) {
            if (event.offsetX > td.offsetWidth - 10)
                td.style.cursor = 'w-resize';
            else
                td.style.cursor = 'default';
            if (td.mouseDown != null && td.mouseDown == true) {
                if (td.oldWidth + (event.x - td.oldX) > 0)
                    td.width = td.oldWidth + (event.x - td.oldX);
                td.style.width = td.width;
                td.style.cursor = 'w-resize';
 
                table = td;
                while (table.tagName != 'TABLE') table = table.parentElement;
                table.width = td.tableWidth + (td.offsetWidth - td.oldWidth); table.style.width = table.width;
            }
        }
        function SyDG_downOnTd(td) {
            if (event.offsetX > td.offsetWidth - 10) {
                td.mouseDown = true;
                td.oldX = event.x;
                td.oldWidth = td.offsetWidth;
                table = td; while (table.tagName != 'TABLE') table = table.parentElement;
                td.tableWidth = table.offsetWidth;
            }
        }
    </script>
 

后台代码:

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {
            if (true)//如果允许改变列宽
            {
                for (int i = 0; i < e.Row.Cells.Count; i++)
                {
                    e.Row.Cells[i].Attributes.Add("onmousemove", "SyDG_moveOnTd(this)");
                    e.Row.Cells[i].Attributes.Add("onmousedown", "SyDG_downOnTd(this)");
                    e.Row.Cells[i].Attributes.Add("onmouseup", "this.mouseDown=false");
                    e.Row.Cells[i].Attributes.Add("onmouseout", "this.mouseDown=false");
                }
            }
        }
    }