表格列头加菜单(datagrid)

原创 2007年09月26日 11:33:00

Introduction

This article shows how to add a JavaScript tree menu to the DataGrid head text, as well as dynamically change the header text, which my clients require to change the date formats and dynamically change the column header text.

This demo program demonstrates these ideas.

Implementation

To demonstrate this idea, I put the following piece of code in a .aspx page:

<asp:datagrid>

 <Columns id="DataGrid1" CellPadding="2" BorderColor="#CC9966"

              style="Z-INDEX: 101; LEFT: 100px; POSITION: absolute; TOP: 47px"

              EnableViewState="False" runat="server"

              AutoGenerateColumns="False">

    <asp:BoundColumn HeaderText="Last Name" DataField="LastName"

              ItemStyle-Width="150px" ></asp:BoundColumn>

    <asp:BoundColumn HeaderText="First Name" DataField="FirstName"

              ItemStyle-Width="150px" ></asp:BoundColumn>

    <asp:BoundColumn HeaderText="_Date" DataField="Date"

              ItemStyle-Width="150px"></asp:BoundColumn>

 </Columns>

</asp:datagrid>

To add a tree menu to the DataGrid header text, I add an “onMouseOver” event to the head text JavaScript:

headtext = "<a href='#'" + " onMouseOver='HM_f_PopUp(/"elMenu1/",event)'"

          + " onclick='javascript:document.getElementById(/"{0}/").click();'>" +

          date + "</a>";

The SetHeaderText functions as follows:

private void SetHeadText()

{

    string headtext = "";

 

    //date from AppSettings["HeaderDate"]

    string date = ConfigurationSettings.AppSettings["HeaderDate"];

   

    if(date.Length > 0)

    {

        //Note add an "onMouseOver" event

        headtext = "<a href='#'" +

          " onMouseOver='HM_f_PopUp(/"elMenu1/",event)'" +

          " onclick='javascript:document." +

          "getElementById(/"{0}/").click();'>" +

          date + "</a>";

   }

    else

    {

        headtext = "<a href='#'" +

          " onMouseOver='HM_f_PopUp(/"elMenu1/",event)'" +

          " onclick='javascript:document.getElementById(/"{0}/")." +

          "click();'>Date</a>";

    }

    //Set Header Text

    this.DataGrid1.Columns[2].HeaderText = string.Format(headtext,2);

}

The tree menu "DateMenu" method functions as:

private void DateMenu(string strBrowser, string strScriptDir)

{

    StringBuilder sb = new StringBuilder();

 

    bool IsSecure;

    string strAddress = "";

    IsSecure = Request.IsSecureConnection;

    Uri MyUrl = Request.Url;

    string strUri = MyUrl.AbsoluteUri;

    string strScriptName = MyUrl.AbsoluteUri;

    if (IsSecure==true )

    {

        strAddress = MyUrl.AbsoluteUri.Replace("http", "https");

    }

    else

    {

        strAddress = MyUrl.AbsoluteUri;

    }

 

    string strHrefParam,strSortDate;

    string strGregorian1,strGregorian2,strGregorian3,strGregorian4;

    string strJulian;

 

    strHrefParam = "ChangeDateFormat=" + strChangeDateFormat;

   

    strSortDate   = strAddress + "?" + strHrefParam +

        "&DateFormat=" + strDateFormat;

    strGregorian1 = strAddress + "?" + strHrefParam +

        "&DateFormat=" + "mm/dd/yyyy" ;

    strGregorian2 =strAddress + "?" + strHrefParam +

        "&DateFormat=" + "dd/mm/yyyy";

    strGregorian3 = strAddress + "?" + strHrefParam +

        "&DateFormat=" + "mm/dd/yy";

    strGregorian4 = strAddress + "?" + strHrefParam +

        "&DateFormat=" + "dd/mm/yy";

    strJulian = strAddress + "?" + strHrefParam +

        "&DateFormat=" + "yyyy.ddd";

 

    sb.Append("<script language='JavaScript1.2'>" + "/n/r");   

    sb.Append("var varDate ='" + strSortDate + "'; " +"/n/r");

    sb.Append("var varGregorian1 ='" + strGregorian1 + "'; " + "/n/r");         

    sb.Append("var varGregorian2 ='" + strGregorian2 + "'; " + "/n/r");        

    sb.Append("var varGregorian3 ='" + strGregorian3 + "'; " + "/n/r");         

    sb.Append("var varGregorian4 ='" + strGregorian4 + "'; "+ "/n/r");        

    sb.Append("var varJulian ='" + strJulian + "'; " + "/n/r");   

   

    if(bCheckIE==true)

    {

        sb.Append ("HM_Array1 = [");

        sb.Append ("    [90],         ");

        sb.Append ("    ['Others', varDate, 1,0,0],");

        sb.Append ("    ['Format Date','',1,0,1] ");

        sb.Append ("    ];" + "/n/r");   

        sb.Append ("HM_Array1_2 = [");

        sb.Append ("    [],");

        sb.Append ("    ['MM/DD/YYYY', varGregorian1 ,1,0,0],");

        sb.Append ("    ['DD/MM/YYYY', varGregorian2 ,1,0,0],");

        sb.Append ("    ['MM/DD/YY', varGregorian3 ,1,0,0],");

        sb.Append ("    ['DD/MM/YY', varGregorian4 ,1,0,0],");

        sb.Append ("    ['YYYY.DDD', varJulian ,1,0,0] ");

        sb.Append ("    ] " + "/n/r");

    }                                                              

    else

    {

        sb.Append ("HM_Array1 = [");

        sb.Append ("    [90],         ");

        sb.Append ("    ['Sort Date', varDate, 1,0,0],");

        sb.Append ("    ['MM/DD/YYYY', varGregorian1 ,1,0,0],");

        sb.Append ("    ['DD/MM/YYYY', varGregorian2 ,1,0,0],");

        sb.Append ("    ['MM/DD/YY', varGregorian3 ,1,0,0],");

        sb.Append ("    ['DD/MM/YY', varGregorian4 ,1,0,0],");

        sb.Append ("    ['YYYY.DDD', varJulian ,1,0,0] ");

        sb.Append ("    ]" + "/n/r");

    }

 

               

    sb.Append ("HM_DOM = (document.getElementById) ? true : false;" + "/n/r");

    sb.Append ("HM_NS4 = (document.layers) ? true : false;" + "/n/r");

    sb.Append ("HM_IE = (document.all) ? true : false;" + "/n/r");

    sb.Append ("HM_IE4 = HM_IE && !HM_DOM;" + "/n/r");

    sb.Append ("HM_Mac = (navigator.appVersion.indexOf('Mac') != -1);" + "/n/r");

    sb.Append ("HM_IE4M = HM_IE4 && HM_Mac;" + "/n/r");

    sb.Append ("HM_IsMenu = (HM_DOM || HM_NS4 || (HM_IE4 && !HM_IE4M));" +

               "/n/r");

    sb.Append ("HM_BrowserString = HM_NS4 ? 'NS4'" +

               " : HM_DOM ? 'DOM' : 'IE4';" + "/n/r");

 

    sb.Append ("if(window.event + '' == 'undefined') event = null;" + "/n/r");

    sb.Append ("function HM_f_PopUp(){return false};" + "/n/r") ;

    sb.Append ("popUp = HM_f_PopUp;" + "/n/r");   

    sb.Append ("</script>" + "/n/r");

    sb.Append ("/n/r");

   

    sb.Append ("<script language='JavaScript' src='"+

               strScriptDir+

               "/web_menu.js'></script>" + "/n/r");

 

   

    sb.Append("<script language='JavaScript'" +

           " src='Script/web_scriptiens6.js'></script>" +

           "/n/r");

  

    Response.Write( sb.ToString());

}

I stored the default date format in the Web.config AppSettings["DateFormat"]. The use of key/value pair settings simply populates a hashtable that you can access with your application, which allows you to dynamically change your application settings. If the configuration data settings change, the application is automatically restarted and the new values are used. Of course, you can also use the XML file.

Note that, in the user interface, the header text is "_Date", however, at AppSettings, I set the header text as "Date". So the screen displays "Date" instead of "_Date".

Here is my appSettings:

<appSettings>

 <add key="ScriptDir" value="SCRIPT" />

 <add key="DateFormat" value="mm/dd/yyyy" />

 <add key="HeaderDate" value="Date" />

</appSettings>

The date format function "GetDateFormat" is as shown below:

private void GetDateFormat()

{

    //tempDate from AppSettings

    string tempDate = ConfigurationSettings.AppSettings["DateFormat"].ToLower();

    if(tempDate == "" || tempDate == null)

        tempDate = "mm/dd/yyyy";

 

    //strDateFormat from QueryString

    strDateFormat= Request.QueryString["DateFormat"];

 

    string [] arTempDateFormat = null;

    if(strDateFormat == null || strDateFormat == "")

        strDateFormat= tempDate;

    else if(strDateFormat.IndexOf(',') != -1)

    {

        arTempDateFormat = strDateFormat.Split(',');

 

        int len = arTempDateFormat.Length;

        for(int iDateFormat=0; iDateFormat<len; iDateFormat++)

        {

            strDateFormat = arTempDateFormat[len-1];

        }

    }

 

    //Display an error message when appSettings "DateFormat" key is invalid.

    if (strDateFormat != "mm/dd/yyyy" && strDateFormat != "dd/mm/yyyy" &&

        strDateFormat != "mm/dd/yyyy" && strDateFormat != "mm/dd/yy" &&

        strDateFormat != "dd/mm/yy" && strDateFormat != "yyyy.ddd")

    {

        strMsg = "";

        strMsg = "Date Format is incorrect:( " + strDateFormat + ")";

        strMsg = doErrorMsg(strMsg);

        Response.Write(strMsg);

    }

}

Next is binding the data. The SetHeadText() function must be called before calling the DataBind() function.

private void BindDataGid(ArrayList alData)

{

    this.SetHeadText();

 

    DataGrid1.DataSource = alData;

    DataGrid1.DataBind();

}

Conclusion

By using this example program, you can easily add a tree menu to the column header text, as well as dynamically change application settings via Web.config appSettings.

About Florence FZ Li

 

M.S.: Computer Science, B.S.: Physics, MCSD: .NET, MCSD: VS 6

Florence currently works at Confident Software, Inc. Atlanta, U.S.A. Besides programming, during her spare time she enjoys opera.

Click here to view Florence FZ Li's online profile.

 

wpf问题~解决DataGrid列列头及可见性的绑定问题

DataGrid列头绑定问题

html表格中,锁定行头和列头

  • 2011年12月20日 17:06
  • 9KB
  • 下载

C# gridview 列头画表格

http://www.csframework.com/archive/2/arc-2-20110713-1691.htm 给DevExpress GridView的选择列Header添加CheckB...

基于IE与css的表格行头与多层列头锁定方法(转)

从网上看到的,正好项目中用到了,就拿来一用,但是这个有一个问题,就是完成后移动滚动条会出现分隔线混乱的情况,如图所示: 红色是正常的分隔线,绿色是混乱的,要是有解决方式的,希望能留言出出主意哦。 ...

easyUI datagrid 表格 表头添加菜单,实现可选列。

拿其他人的code,稍微改进了下,shi'x
  • leijuly
  • leijuly
  • 2014年05月16日 15:35
  • 6673

Ext实现表格列头冻结效果,锁定列头

这段时间我们的项目中采用了Coolite来做富客户端,Coolite目前的版本是0.8.1,它所采用的Ext版本是2.2.1,因此下面主要是说明在这个版本下所实现的锁定列和多行表头,需要说明的是Ext...
  • e_wsq
  • e_wsq
  • 2013年09月08日 18:26
  • 2485

android开发之横向滚动/竖向滚动的ListView(固定列头)

http://www.jb51.net/article/33376.htm 由于项目需要,我们需要一个可以横向滚动的,又可以竖向滚动的 表格。而且又要考虑大数据量(行)的展示视图。经过几...

C# listview 点击列头排序

#region 自定义变量 int currentCol = -1; bool sort; #endregion//列头点击事件 private vo...
  • rztyfx
  • rztyfx
  • 2016年08月01日 19:37
  • 721
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:表格列头加菜单(datagrid)
举报原因:
原因补充:

(最多只允许输入30个字)