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

原创 2006年06月01日 18:14:00


用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部分的代码只是具体的用到此控件 来实现一个简单的功能.

 

相关文章推荐

实现下拉列表,点击其他位置自动隐藏效果的三种方式比较

实现效果:1.点击按钮展开下拉列表 2.点击下拉列表中的选项进行选择,随后收起下拉列表 3.点击除下拉列表外的位置(包括按钮),收起下拉列表效果图如下所示: 完整代码请查看: https://...

jQuery EasyUI详解-EasyUI下拉列表datalist

本篇主要介绍下拉列表控件的数据绑定和下拉列表选中项的获取。与下拉框有两点不同,第一是外观上下拉列表会同时显示多个待选项,第二是下拉列表会经常遇到需要多选的情况。之前猫哥自己也没在EasyUI中遇到过使...

ExpandableListView+Dialog实现弹出二级下拉列表选项。可自由用于Activity和Fragment中

话说今天刚是本人 失业第二天。已经感觉有点无聊了。对于这次失业挺突然的。不过想通之后也没啥可惋惜的。毕竟身怀技术走到哪都不怕找不到饭碗。作为技术人员要做的首要就是不断提高自身技术水平,以适应这个瞬息万...

JS实现二级列表(包含下拉刷新、上拉加载更多、侧滑操作等)

本篇文章讲述的是使用js实现可收缩二级列表,包含以下特性: 1,点击打开/收缩二级列表; 2,列表下拉刷新数据; 3,列表上拉加载更多数据; 4,列表item项可侧滑操作(类似于QQ和微信); 5,数...

jquery实现下拉列表二级联动

function getPositionGrade(){ $("#flag").nextAll().remove();//如果二级有列表,清除下 //下拉列表二级联动内容 var p...

jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

二级联动的实现方法还真不少,实用性也很强,这里结合一个学生信息表的实例,来分享一下我的实现过程 实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询...
  • zyu67
  • zyu67
  • 2015年08月09日 09:08
  • 2404

JS实现下拉列表显示当前日期到之前半年的所有日期

博主在最近做的项目中用到一个功能,有一个下拉列表,内容为当前日期到之前半年的日期列表,格式为yyyy-MM-dd。之后在网上并未搜索到完整的解决方案,但是我想出了一个集众家之所长的解决方案,于是就有了...

如何用C#实现Word里的字体选择下拉列表框!

第一步,新建一个默认的C#项目,相信大家一步大家都会了,我就不重复了。 第二步,在窗体上添加一个ComboBox控件。修改ComboBox的name属性为cboFont;修改DrawMode属性...

表格点击当前行,在其下边展示其子信息列表(即下拉显示数据)

1、html代码:(主题列表信息)${theme.name}2、js代码:(获取该主题下的成分股列表)//获取成分股 function getStockList(id,name){...
  • ailo555
  • ailo555
  • 2016年07月28日 20:07
  • 344

Qt学习笔记之文本编辑器实现加粗、倾斜、下划线、字体、居中对齐、左对齐、右对齐

一、加粗、倾斜、下划线 在实现这些功能的时候,我们首先要知道,这三个功能是要施加在所选中的字体上的,如果没有这个过程,那么这三个功能将会对所有的字符进行上述处理。所以,第一部就是要实现设置光...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用DataList + Repeater实现二级下拉列表 当前被点击的字体加粗.
举报原因:
原因补充:

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