none
请教datalist事件itemdatabound实现鼠标指向变色效果 RRS feed

  • 问题

  • 类似gridview中的rowdatabound方法,我在datalist中写了如下代码:
    protected void dlAlbumMain_ItemDataBound(object sender, DataListItemEventArgs e)
    {
            if (e.Item.ItemType == ListItemType.AlternatingItem)
            {
                e.Item.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#B4D6FE'");
                e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor=c");
            }
    }
    


    可是并没有得到预期效果

    于是我加了两个测试Label(Label1在整个页面级别 和 Label2在该Datalist种的ItemTemplate里),代码如下:
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    
    <asp:DataList ID="dlAlbumMain" runat="server" ShowHeader="false" Width="100%"
                                onitemdatabound="dlAlbumMain_ItemDataBound" RepeatColumns="2" RepeatDirection="Horizontal"
                                onitemcreated="dlAlbumMain_ItemCreated">
                                <ItemTemplate>
                                <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                                <a href='./Albums.aspx?AlbumID=<%# ((DataRowView)Container.DataItem)["AlbumID"] %>'>
                                        <%# ((DataRowView)Container.DataItem)["AlbumName"] %>
                                        <asp:Label ID="lCrypt" runat="server" Text="(已加密)" Style="font-size: 12px;" Visible="false"></asp:Label>
                                </a>
                                </ItemTemplate>
    </asp:DataList>
    


    后台代码:

    if (e.Item.ItemType == ListItemType.AlternatingItem){
                this.Label1.Text = "Test";
                ((Label)e.Item.FindControl("Label2")).Text = "Test2";
                e.Item.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#B4D6FE'");
                e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor=c");
    }
    
    


    发现两个Label成功赋值,但是鼠标指向变色效果未实现,试过e.Item.Visble=false也不能取消该行显示,推测所有在itemdatabound中修改ItemTemplate中html显示的方法均无法成功得到预期结果,应该是个执行顺序的问题.请教解决办法,谢谢

    2009年5月3日 8:30

答案

  • 可以使用js实现

    <%@ Page Language="C#" Debug="true" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
     
      System.Data.DataView CreateDataSourceByXianhuiMeng()
      {
        System.Data.DataTable dt = new System.Data.DataTable();
        System.Data.DataRow dr;
        dt.Columns.Add(new System.Data.DataColumn("学生班级", typeof(System.String)));
        dt.Columns.Add(new System.Data.DataColumn("学生姓名", typeof(System.String)));
        dt.Columns.Add(new System.Data.DataColumn("语文", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("数学", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("英语", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("计算机", typeof(System.Decimal)));
    
        for (int i = 0; i < 8; i++)
        {
          System.Random rd = new System.Random(Environment.TickCount * i); ;
          dr = dt.NewRow();
          dr[0] = "班级" + i.ToString();
          dr[1] = "【孟子E章】" + i.ToString();
          dr[2] = System.Math.Round(rd.NextDouble() * 100, 2);
          dr[3] = System.Math.Round(rd.NextDouble() * 100, 2);
          dr[4] = System.Math.Round(rd.NextDouble() * 100, 2);
          dr[5] = System.Math.Round(rd.NextDouble() * 100, 2);
          dt.Rows.Add(dr);
        }
        System.Data.DataView dv = new System.Data.DataView(dt);
        return dv;
      }
    
    
      protected void Page_Load(object sender, EventArgs e)
      {
        DataList1.Attributes.Add("onmouseover", "mover(event)");
        DataList1.Attributes.Add("onmouseout", "mout(event)");
        if (!Page.IsPostBack)
        {
          DataList1.DataSource = CreateDataSourceByXianhuiMeng();
          DataList1.DataBind();
        }
      }
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title></title>
    
      <script type="text/javascript">
        function mover(evt) {
          ele = evt.target ? evt.target : window.event.srcElement;
          while (ele.tagName && ele.tagName != "TR")
            ele = ele.parentNode
    
          ele.style.backgroundColor = 'red';
        }
        function mout(evt) {
          ele = evt.target ? evt.target : window.event.srcElement;
          while (ele.tagName && ele.tagName != "TR")
            ele = ele.parentNode
    
          ele.style.backgroundColor = '#FFFFFF';
        }
      
      </script>
    
    </head>
    <body>
      <form id="form1" runat="server">
      <asp:DataList ID="DataList1" runat="server" RepeatColumns="3">
        <ItemTemplate>
          <%#Eval("学生姓名") %>
        </ItemTemplate>
      </asp:DataList>
      </form>
    </body>
    </html>
    

    【孟子E章】
    • 已标记为答案 rewalax 2009年5月3日 10:02
    2009年5月3日 9:48
    版主

全部回复

  • DataList的呈现方式与GridView 不同,所以,你可以采用别的方法如js或者直接使用GridView
    【孟子E章】
    2009年5月3日 8:45
    版主
  • 谢谢孟老师
    我查看源码确实是表格形式的啊

    2009年5月3日 8:56
  • 可以使用js实现

    <%@ Page Language="C#" Debug="true" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
     
      System.Data.DataView CreateDataSourceByXianhuiMeng()
      {
        System.Data.DataTable dt = new System.Data.DataTable();
        System.Data.DataRow dr;
        dt.Columns.Add(new System.Data.DataColumn("学生班级", typeof(System.String)));
        dt.Columns.Add(new System.Data.DataColumn("学生姓名", typeof(System.String)));
        dt.Columns.Add(new System.Data.DataColumn("语文", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("数学", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("英语", typeof(System.Decimal)));
        dt.Columns.Add(new System.Data.DataColumn("计算机", typeof(System.Decimal)));
    
        for (int i = 0; i < 8; i++)
        {
          System.Random rd = new System.Random(Environment.TickCount * i); ;
          dr = dt.NewRow();
          dr[0] = "班级" + i.ToString();
          dr[1] = "【孟子E章】" + i.ToString();
          dr[2] = System.Math.Round(rd.NextDouble() * 100, 2);
          dr[3] = System.Math.Round(rd.NextDouble() * 100, 2);
          dr[4] = System.Math.Round(rd.NextDouble() * 100, 2);
          dr[5] = System.Math.Round(rd.NextDouble() * 100, 2);
          dt.Rows.Add(dr);
        }
        System.Data.DataView dv = new System.Data.DataView(dt);
        return dv;
      }
    
    
      protected void Page_Load(object sender, EventArgs e)
      {
        DataList1.Attributes.Add("onmouseover", "mover(event)");
        DataList1.Attributes.Add("onmouseout", "mout(event)");
        if (!Page.IsPostBack)
        {
          DataList1.DataSource = CreateDataSourceByXianhuiMeng();
          DataList1.DataBind();
        }
      }
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title></title>
    
      <script type="text/javascript">
        function mover(evt) {
          ele = evt.target ? evt.target : window.event.srcElement;
          while (ele.tagName && ele.tagName != "TR")
            ele = ele.parentNode
    
          ele.style.backgroundColor = 'red';
        }
        function mout(evt) {
          ele = evt.target ? evt.target : window.event.srcElement;
          while (ele.tagName && ele.tagName != "TR")
            ele = ele.parentNode
    
          ele.style.backgroundColor = '#FFFFFF';
        }
      
      </script>
    
    </head>
    <body>
      <form id="form1" runat="server">
      <asp:DataList ID="DataList1" runat="server" RepeatColumns="3">
        <ItemTemplate>
          <%#Eval("学生姓名") %>
        </ItemTemplate>
      </asp:DataList>
      </form>
    </body>
    </html>
    

    【孟子E章】
    • 已标记为答案 rewalax 2009年5月3日 10:02
    2009年5月3日 9:48
    版主