关闭

用DataList + Repeater实现二级下拉列表 当前被点击的字体加粗.

971人阅读 评论(0) 收藏 举报


用DataList + Repeater实现二级下拉列表 当前被点击的字体加粗.
1.前台代码:

<script language="JavaScript" type="text/javascript">
   function expandDiv(ctrl)
   {
    ctl = eval(ctrl);
    if (ctl.style.display == "none")
     ctl.style.display = "";
    else
     ctl.style.display = "none";
    }
</script>

<asp:DataList runat="server" ID="rpt_class" RepeatDirection="Horizontal" RepeatColumns="1">
 <ItemTemplate>
  <a href='javascript:expandDiv('div<%# DataBinder.Eval(Container.DataItem, "ClassID") %>')'>
   <asp:HyperLink Runat=server Font-Bold='<%#  GetBold( DataBinder.Eval(Container.DataItem, "ClassID") , Request.Params["id"] ) %>'
        NavigateUrl='<%# "../index.aspx?id=" + DataBinder.Eval(Container.DataItem, "ClassID") + "&pid=" + DataBinder.Eval(Container.DataItem, "ParentID")  %>' ID="Hyperlink1" NAME="Hyperlink1" CssClass="menu_blue">
    <%# DataBinder.Eval(Container.DataItem, "ClassName") %>
   </asp:HyperLink>
  </a>
  <div style="display:'none'" ID='<%# "div" + DataBinder.Eval(Container.DataItem, "ClassID") %>'>
   <table width="220" border="0" cellspacing="0">
    <asp:Repeater id="MyRepeater" runat="server"
       DataSource='<%# GetResultsSource(int.Parse(DataBinder.Eval(Container.DataItem, "ClassID").ToString())) %>'>
     <ItemTemplate>
      <tr>
       <td>
        <table width="100%" border="0" cellspacing="0">
         <tr>
          <td width="10"></td>
          <td width="92%">
           <asp:HyperLink Runat=server Font-Bold='<%#  GetBold( DataBinder.Eval(Container.DataItem, "ClassID") , Request.Params["pid"] ) %>'
        NavigateUrl='<%# "../index.aspx?pid=" + DataBinder.Eval(Container.DataItem, "ClassID") + "&id="  + DataBinder.Eval(Container.DataItem, "ParentID")  %>' ID="Hyperlink2" CssClass="menu_blue">
            <%# DataBinder.Eval(Container.DataItem, "ClassName") %>
           </asp:HyperLink>
           </a>
          </td>
         </tr>
        </table>
        <table width="100%" height="1" border="0" cellspacing="0" bgcolor="CCCCCC">
         <tr>
          <td valign="bottom"></td>
         </tr>
        </table>
       </td>
       <td width="20">&nbsp;</td>
      </tr>
     </ItemTemplate>
    </asp:Repeater>
   </table>
  </div>
 </ItemTemplate>
</asp:DataList>

 

2.后台代码:      注:( 此程序采用三层结构开发,开始using System..  部分省略..)

namespace DZweb.WebUI
{
using ...
using DZweb.SQLDAL.News;

 ///  ShowLink 的摘要说明。

 public class ShowLink : System.Web.UI.UserControl
 {
  protected System.Web.UI.WebControls.DataList rpt_class;

  DZweb.SQLDAL.News.NewsClass_SQL class_sql = new NewsClass_SQL();

  public string id;
  private void Page_Load(object sender, System.EventArgs e)
  {
   if(!Page.IsPostBack)
   {
    BindCtrl();
   }
   //  
   try
   {    if(Request.Params["id"].ToString() != null)
    {    
         id = Request.Params["id"].ToString();
         ext( Convert.ToInt16( id ) );
    }
    }
   catch
   {}
  }
  private void ext( int id )
  {
   Page.RegisterStartupScript("OnClick" ,"<script language='javascript'>expandDiv(div" + id + ")</script>");
  }

  private void BindCtrl()
  {
   rpt_class.DataSource = class_sql.GetClassByParentID( 0 ).Tables[0].DefaultView;
   rpt_class.DataBind();
  }

  public bool GetBold( object obj1 , object obj2  )
  {
  
   if( Convert.ToInt16( obj1 ) == Convert.ToInt16( obj2 ) )
   {    return true;   }
   else
   {    return false;   }
  }

  public DataView GetResultsSource( int id )
  {
   return class_sql.GetClassByParentID( id ).Tables[0].DefaultView;
  }

//窗体自动生成代码 ( 略 )

}
}

3. 被调用的数据访问层中的部分代码:   (此处引用SQLHelper 提供的方法来执行对数据源的操作)

using Microsoft.ApplicationBlocks.Data;
using System.Web;
using System.Data;
namespace DZweb.SQLDAL.News
{
 public class NewsClass_SQL:INewsClass
 {
  private const string CLASSID="@ClassID";//
  private const string PARENTID="@ParentID";//
  private const string CLASSNAME="@ClassName";//
  private const string CLASSSORTID="@ClassSortID";//
        public string conn=ConfigurationSettings.AppSettings["Connstr"];

  public NewsClass_SQL()
  {
  }
//
  public DataSet GetClassByParentID(int ID)
  {
      return SqlHelper.ExecuteDataset(conn,System.Data.CommandType.Text,"Select * from Class Where ParentID =" + ID );
  }

  //
  public DataSet GetBigClassID()
  {
  
   return SqlHelper.ExecuteDataset(conn,System.Data.CommandType.Text,"Select * from Class Where ParentID = 0");
  }
   //
  public DataTable GetArticleByClassID(int Cid)
  {
  
   DataSet ds = new DataSet();
   ds = SqlHelper.ExecuteDataset(conn,System.Data.CommandType.Text,"Select Top 1 * from Article Where ArticleColumnID=" + Cid );
   DataTable dt = ds.Tables[0];
   return dt;
  }
  //
  public DataSet GetSubClassID(int classID)
  {
   SqlParameter[] param=new SqlParameter[1];
   param[0]=new SqlParameter("@ClassID",System.Data.SqlDbType.Int);
 
   param[0].Value = classID;
   return SqlHelper.ExecuteDataset(conn,System.Data.CommandType.StoredProcedure, "sp_GetSubClassID", param);
  }
//窗体自动生成代码( 略 )
}

===================  上面是一个 "用户自定义控件"  和 数据操作层 的代码
要实现如图的功能,  需要将 控件放入 页面, 
如下是应用到页面的实例:

4. 我用了两个 label  和 上面的控件 ,实现 当点击连接时 在同一页显示 文章标题 和 内容

using ...
using DZweb.Class;
using DZweb.Model.News;
using DZweb.SQLDAL.News;

namespace DZweb
{

 /// index 的摘要说明。

 public class index : System.Web.UI.Page
 {
  NewsClass_SQL  NCsql = new NewsClass_SQL();
  protected System.Web.UI.WebControls.Repeater Repeater1;
  protected System.Web.UI.WebControls.Label lb_content;

  protected System.Web.UI.WebControls.Label lbl_title;

  private void Page_Load(object sender, System.EventArgs e)
  {
   if(!Page.IsPostBack)
   {
    if(Request.QueryString["pid"]!="0")
    {
     bind(Convert.ToInt16(Request.QueryString["pid"]));
    }
    else
    {
                   bind(Convert.ToInt16(Request.QueryString["id"]));
    }
   }
  }
  private void bind(int pid)
  {
   try
   {
    DataTable dt = NCsql.GetArticleByClassID( Convert.ToInt16(pid) );
    if( dt.Rows.Count != 0 )
    {
     lb_content.Text = dt.Rows[0]["ArticleContent"].ToString();
     lbl_title.Text = dt.Rows[0]["ArticleTitle"].ToString();
    }
    else
    {        }
   }
   catch (Exception err)
   {
                Response.Write(err.Message);
   }
  }
//窗体自动生成代码( 略 )
}
}

总结: 
上面主要部分就是 1.  和 2.  的代码了 这是一个实现二级下拉列表的控件
第3部分的代码,提供了 控件中 用到的一些方法 ,主要是对数据源的连接 和 操作(显示)
第4部分的代码只是具体的用到此控件 来实现一个简单的功能.

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1295次
    • 积分:20
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档