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

 

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

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

WPF中DataGrid设置列头样式

Boss 一声令下,来吧,略Geek的黑色风格太阴暗,界面风格给我改得阳光点。接下来各种调整。记一下设置DataGrid列头样式的方法。 ... ...
  • alading2009
  • alading2009
  • 2015年10月10日 19:37
  • 5392

DataGrid如何显示双层表头,合并列头

DataGrid显示双层表头假设你的DataGrid有三列,现在想将前两列作为"大类1",第三列作为"大类2",原有标题到第二行现在,你可以在ItemDataBound事件中加入下面的代码:if (e...
  • z_h_e_n_g
  • z_h_e_n_g
  • 2007年12月06日 09:26
  • 2029

01.手把手教你 .Net EasyUI DataGrid(创建数据表格)

这是我的第一篇CSND博客文章,最近一直在学习EasyUI,这个插件官方的教程是基于PHP的后台,而我是学习.NET的,所以希望通过自己的整理与与汇总能够帮助到,.Net的想使用EasyUI的人! ...
  • lemoncorporation
  • lemoncorporation
  • 2016年05月20日 16:14
  • 4442

easyui 列表按钮 DataGrid(数据表格)

要实现的效果图. 官方现有的demo有没有现成的.这种超链接按钮就需要我们自己去拼凑了. 需要用到easyui formatter 函数 (待更新...) My Project的实践 $("...
  • sat472291519
  • sat472291519
  • 2016年08月17日 13:32
  • 1681

Flex 四种方式设置dataGrid表头颜色

有时候需要改变dataGrid表头颜色,整理了四种方式,大家还有其他方式可以讨论下。 1.直接通过as代码设置 grid1.setStyle("headerColors", ["red", "blue...
  • q3581353
  • q3581353
  • 2014年03月12日 22:14
  • 2897

easyui datagrid 创建带Toolbar的表格(1)

创建带复选框的datagrid
  • yb305
  • yb305
  • 2017年01月12日 15:14
  • 382

EasyUI-DataGrid编辑时出现下拉列表框选择,同时修改其它列的值

首先是进行表格式的初始化,主要是为了可以进行编辑//初始化表格 $.extend($.fn.datagrid.methods, { editCell: function (jq, param)...
  • u013493957
  • u013493957
  • 2015年01月09日 10:26
  • 5311

easyUI-datagrid属性设置display:none,加载数据或表头不显示

页面有三个选项卡,datagrid在第三个选项卡中,初始化时,第三个选项卡display:none ,加载数据或表头时,datagrid数据或表头不显示。 如果初始化时,第三个选项卡不设置隐藏(dis...
  • sum__mer
  • sum__mer
  • 2016年01月13日 17:26
  • 8000

easyui datagrid 创建带复选框表格(2)

1.源码 创建带复选框的datagrid
  • yb305
  • yb305
  • 2017年01月12日 14:48
  • 2663
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:表格列头加菜单(datagrid)
举报原因:
原因补充:

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