[原创]dataGrid在页面拖动行(在表头，用htc文件实现)

#region 声明
//----------------------------------------------------------------------
//
// 修改: 李淼（Nick.Lee）
//
// dataGrid在页面拖动行(在表头，用htc文件实现)

// 时间:2005-04-23

// [email protected]
// [email protected]
// QQ:16503096
//注意：引用请标明修改出处,谢谢
//----------------------------------------------------------------------
#endregion

前台页面

1@ Page language="c#" Codebehind="WebForm5.aspx.cs" AutoEventWireup="false" Inherits="WebApplication1.WebForm5" 

 1<html>
 2<head>
 3<title>WebForm5</title>
 4<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR"/>
 5<meta content="C#" name="CODE_LANGUAGE"/>
 6<meta content="JavaScript" name="vs_defaultClientScript"/>
 7<meta content=" http://schemas.microsoft.com/intellisense/ie5 " name="vs_targetSchema"/>
 8<link href="xpTable.css" rel="stylesheet" type="text/css"/>
 9</head>
10<body>
11<form id="Form1" method="post" runat="server">
12<asp:datagrid backcolor="White" bordercolor="#CC9966" borderstyle="None" borderwidth="1px" cellpadding="4" font-size="9pt" id="DataGrid1" runat="server" style="BEHAVIOR:url(grid.htc)">
13<selecteditemstyle backcolor="#FFCC66" font-bold="True" forecolor="#663399"></selecteditemstyle>
14<itemstyle backcolor="White" forecolor="#330099"></itemstyle>
15<headerstyle backcolor="#990000" font-bold="True" forecolor="#FFFFCC"></headerstyle>
16<footerstyle backcolor="#FFFFCC" forecolor="#330099"></footerstyle>
17<pagerstyle backcolor="#FFFFCC" forecolor="#330099" horizontalalign="Center"></pagerstyle>
18</asp:datagrid>
19</form>
20</body>
21</html>

后台cs文件
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace WebApplication1
{
///

1<summary>   
2/// WebForm5 的摘要说明。   
3/// </summary>

public class WebForm5 : System.Web.UI.Page
{
protected System.Data.SqlClient.SqlDataAdapter sqlDataAdapter1;
protected System.Data.SqlClient.SqlCommand sqlSelectCommand1;
protected System.Data.SqlClient.SqlConnection sqlConnection1;
protected WebApplication1.DataSet1 dataSet11;
protected System.Web.UI.WebControls.DataGrid DataGrid1;

private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
sqlDataAdapter1.Fill(this.dataSet11);
this.DataGrid1.DataSource=this.dataSet11.Tables[0];
this.DataBind();
}

#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}

///

1<summary>   
2/// 设计器支持所需的方法 - 不要使用代码编辑器修改   
3/// 此方法的内容。   
4/// </summary>

private void InitializeComponent()
{
this.sqlDataAdapter1 = new System.Data.SqlClient.SqlDataAdapter();
this.sqlSelectCommand1 = new System.Data.SqlClient.SqlCommand();
this.sqlConnection1 = new System.Data.SqlClient.SqlConnection();
this.dataSet11 = new WebApplication1.DataSet1();
((System.ComponentModel.ISupportInitialize)(this.dataSet11)).BeginInit();
//
// sqlDataAdapter1
//
this.sqlDataAdapter1.SelectCommand = this.sqlSelectCommand1;
this.sqlDataAdapter1.TableMappings.AddRange(new System.Data.Common.DataTableMapping[] {
new System.Data.Common.DataTableMapping("Table", "Categories", new System.Data.Common.DataColumnMapping[] {
new System.Data.Common.DataColumnMapping("CategoryID", "CategoryID"),
new System.Data.Common.DataColumnMapping("CategoryName", "CategoryName"),
new System.Data.Common.DataColumnMapping("Description", "Description"),
new System.Data.Common.DataColumnMapping("Picture", "Picture")})});
//
// sqlSelectCommand1
//
this.sqlSelectCommand1.CommandText = "SELECT CategoryID, CategoryName, Description, Picture FROM Categories";
this.sqlSelectCommand1.Connection = this.sqlConnection1;
//
// sqlConnection1
//
this.sqlConnection1.ConnectionString = "workstation id="STAR-NICK";packet size=4096;user id=sa;data source="(local)";pers" +
"ist security info=False;initial catalog=Northwind;pwd=sa;";
//
// dataSet11
//
this.dataSet11.DataSetName = "DataSet1";
this.dataSet11.Locale = new System.Globalization.CultureInfo("zh-CN");
this.Load += new System.EventHandler(this.Page_Load);
((System.ComponentModel.ISupportInitialize)(this.dataSet11)).EndInit();

}
#endregion
}
}

grid.htc文件:
/**
*

1<p>Title: dataGrid在页面拖动行(在表头，用htc文件实现)</p>

1<p>Description: dataGrid在页面拖动行(在表头，用htc文件实现)</p>

1<p>Copyright: 2005-2005 by mail_ricklee Corporation</p>

1<p>Company: mail_ricklee Corporation</p>

1<p>CreateTime: 2005-04-23 21:30</p>

1<p>ModifyTime: </p>
  • @CreateAuthor 李淼 * @version 1.0
  • @ModifyAuthor * @version 1.0
    */
  1<public:component>
  2<public:attach event="oncontentready" onevent="fnInit()"></public:attach>
  3<public:attach event="onclick" onevent="fnClick()"></public:attach>
  4<method name="menubarpush"></method>
  5<script language="JScript">   
  6function fnInit()   
  7{   
  8for(var i=0;i<element.rows.length;i++)   
  9{   
 10var _tr = element.rows[i];   
 11for(var j=0;j<_tr.cells.length;j++)   
 12{   
 13if(i==0)   
 14{   
 15_tr.attachEvent("onmousedown", fnMousedown);   
 16_tr.attachEvent("onmousemove",fnMousemove);   
 17_tr.attachEvent("onmouseover",fnMouseover);   
 18_tr.attachEvent("onselectstart",fnCancel);   
 19window.document.attachEvent("onmouseup", fnMouseup);   
 20window.document.attachEvent("onmousemove",fnMouseMove);   
 21}   
 22} 
 23
 24}   
 25var _line = window.document.createElement("DIV");   
 26_line.style.position = "absolute";   
 27_line.style.backgroundColor="Silver";   
 28_line.style.width=1;   
 29window.document.body.appendChild(_line);   
 30element.splitLine = _line;   
 31element.splitLine.style.display = "none";   
 32}   
 33function fnMouseover()   
 34{   
 35return;   
 36}   
 37function fnMouseMove(){   
 38if(!element.splitlocked) return;   
 39fnMousemove();   
 40}   
 41function fnMousemove(){   
 42var oEl = event.srcElement;   
 43element.splitLine.style.left = window.event.x;   
 44element.splitLine.style.top = getTop(element);   
 45element.splitLine.style.height = element.parentElement.clientHeight;   
 46if(element.splitlocked) return;   
 47if(!IfSplitLocation(oEl)) return;   
 48}   
 49function fnClick(){   
 50var oEl = event.srcElement;   
 51}   
 52function fnMousedown(){   
 53var oEl = event.srcElement;   
 54if(!IfSplitLocation(oEl)) return;   
 55element.splitLine.style.display = "";   
 56element.splitlocked = true;   
 57window.document.attachEvent("onselectstart",fnCancel);   
 58}   
 59function fnMouseup()   
 60{   
 61element.splitLine.style.display = "none";   
 62element.splitlocked = false;   
 63element.document.body.style.cursor='default';   
 64if(element.curResizeTD == null) return;   
 65var otd = element.curResizeTD;   
 66var otdLeft = getLeft(otd);   
 67var otdwidth = element.splitLine.style.pixelLeft - otdLeft   
 68if(otdwidth < 0) return;   
 69otd.style.width = otdwidth;   
 70window.document.detachEvent("onselectstart",fnCancel);   
 71}   
 72function IfSplitLocation(oEl)   
 73{   
 74if(oEl.tagName == "DIV")   
 75oEl = oEl.parentElement;   
 76if(oEl.tagName == "TD")   
 77{   
 78if(Math.abs(event.offsetX - oEl.clientWidth) <= 5)   
 79{   
 80element.curResizeTD = oEl;   
 81element.document.body.style.cursor='col-resize';   
 82}   
 83else if (Math.abs(event.offsetX) <= 5 && oEl.cellIndex>0){   
 84if(oEl.cellIndex>0){   
 85element.curResizeTD = oEl.parentElement.cells(oEl.cellIndex-1);   
 86element.document.body.style.cursor='col-resize';   
 87}   
 88}   
 89else{   
 90element.curResizeTD = null;   
 91element.document.body.style.cursor='default';   
 92return false;   
 93}   
 94}   
 95return true;   
 96}   
 97function getTop(e){   
 98var t=e.offsetTop;   
 99while(e=e.offsetParent){   
100t+=e.offsetTop;   
101}   
102return t;   
103}   
104function getLeft(e){   
105var l=e.offsetLeft;   
106while(e=e.offsetParent){   
107l+=e.offsetLeft;   
108}   
109return l;   
110}   
111function fnCancel()   
112{   
113window.event.returnValue = false;   
114return false;   
115}   
116</script>
117</public:component>

新修改了拖动线和去掉边框^_^

Published At
Categories with Web编程
Tagged with
comments powered by Disqus