向 DataGrid 页眉文本添加树形菜单

• 下载源代码 - 22.8 Kb

引言

本文档展示了如何在 DataGrid 标题文本中添加 JavaScript 树形菜单，以及动态更改标题文本的方法。我的客户需要能够更改日期格式和动态更改列标题文本。

这个演示程序展示了这些想法。

实现

为了演示这个想法，我将以下代码片段放在一个 .aspx 页面中

<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>

为了在 DataGrid 标题文本中添加树形菜单，我向标题文本 JavaScript 添加了一个“onMouseOver”事件

headtext = "<a href='#'" + " onMouseOver='HM_f_PopUp(\"elMenu1\",event)'" 
          + " onclick='javascript:document.getElementById(\"{0}\").click();'>" + 
          date + "</a>";

SetHeaderText 函数的作用如下

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);
}

树形菜单 "DateMenu" 方法的作用如下

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());
}

我将默认日期格式存储在 Web.config 的 AppSettings["DateFormat"] 中。使用键/值对设置可以简单地填充一个哈希表，您可以使用应用程序访问它，从而可以动态更改应用程序设置。如果配置数据设置发生更改，应用程序将自动重新启动并使用新值。当然，您也可以使用 XML 文件。

请注意，在用户界面中，标题文本是 "_Date"，但是，在 AppSettings 中，我将标题文本设置为 "Date"。因此，屏幕上显示的是 "Date"，而不是 "_Date"。

这是我的 appSettings

<appSettings>
  <add key="ScriptDir" value="SCRIPT" /> 
  <add key="DateFormat" value="mm/dd/yyyy" />
  <add key="HeaderDate" value="Date" /> 
</appSettings>

日期格式函数 "GetDateFormat" 如下所示

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);
    }
}

接下来是绑定数据。在调用 DataBind() 函数之前，必须调用 SetHeadText() 函数。

private void BindDataGid(ArrayList alData)
{
    this.SetHeadText(); 

    DataGrid1.DataSource = alData;
    DataGrid1.DataBind();
}

结论

通过使用这个示例程序，您可以轻松地将树形菜单添加到列标题文本中，以及通过 Web.config appSettings 动态更改应用程序设置。