表格列头加菜单(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.

 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

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

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

拿其他人的code,稍微改进了下,shi'x

flex datagrid 表格 合计

  • 2011-05-20 11:58
  • 16KB
  • 下载

HTML5定制全选列头

随着HTML5产品分支的不断深入使用,HTML5的需求也是越来越多,表格组件的使用也不例外,什么排序,分页,自动列宽等。最近有客户提出了如果让表格的列头加上全选的功能。细细分析其实就是两部分,表格的b...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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