【自然框架】分享 n级联动下拉列表框

摘要:
特点:1.使用js方法将所需数据一次性写入页面,然后使用js实现链接效果。页面完全下载后,没有js脚本错误。在线演示通过:http://demo.naturefw.com/Nonline/other/UniteList02.aspxprotectedvoidPage_Load{DataAccessLibrarydal=DALFactory.CreateDAL();stringsql=@“SELECTAreaIDASid,AreaNameAStxtROMBase_AreaWHERESELECTParentID,AreaName AStxtPROMBase_AreaWHEREAND”;DataSets=dal.ExecutFillDataSet;this.lst_Area.DataSource=ds;this.st_Area.DataBind();}protectedvoidbtn_Save_单击{//提交表单后,获取链接下拉列表框的选项值。//获取IDstringlitemID=this.lst_Rea.SelectedValue;this.txt_Value.Text=itemID;//获取textstringlitem Text=this.lstArea.SelectedText;this.txt_Value.Text=itemID;}protectedvoidbtn_SetItemSelect_单击{//设置下拉列表框stringitemID=this.txt_SetID.TextTrimNone;this.lst_Area.SetSelectedValue;}的选项2.三级联动示范以省、市、区县联动为例。N级链接需要N个SQL语句。这可以在下拉列表框前面进行修改。

特点:
1、 使用js方法,把需要的数据一次性写入到页面里,然后用js来实现联动的效果。
2、 支持n级。
3、 封装成了服务器控件,所以使用非常简单。
4、 支持在回发的时候保持状态。
5、 支持修改记录的时候设置默认选项。
6、 页面设置比较灵活。
7、 采用DataSet作为数据的容器。

缺点:
1、 由于是把需要的数据一次性写入页面交给客户端,所以在网速比较慢的时候,显示页面需要比较长的时间。

可以改进的地方:
1、 引入json,可以把需要的数据放到单独的js文件里面,这样可以减少带宽的压力。
2、 Ajax,按需所取。每次只加载需要的数据。


在线演示:
  使用省、市、区县的数据库进行演示。由于服务器的网速很慢,所以需要等待一下,等页面完全下载完毕之后,才可以使用,否则会出现js脚本错误。页面完全下载完毕之后就没有js脚本错误了。

在线演示:http://demo.naturefw.com/Nonline/other/default.aspx

1、 二级联动的演示
以省、市联动为例演示。提交表单后可以保持状态,可以设置选项。

在线演示直通:http://demo.naturefw.com/Nonline/other/UniteList02.aspx

 protected void Page_Load(object sender, EventArgs e)
        {
            DataAccessLibrary dal 
= DALFactory.CreateDAL();

            
string sql = @"SELECT AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode LIKE '__0000') 
                            SELECT ParentID,AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode LIKE '____00') AND (AreaCode NOT LIKE '__0000') 
";

            DataSet ds 
= dal.ExecuteFillDataSet(sql);
            
this.lst_Area.DataSource = ds;
            
this.lst_Area.DataBind();
            
        }

        
protected void btn_Save_Click(object sender, EventArgs e)
        {
            
//提交表单后,获取联动下拉列表框的选项值

            
//获取ID
            string itemID = this.lst_Area.SelectedValue;

            
this.txt_Value.Text = itemID;

            
//获取text
            string itemText = this.lst_Area.SelectedText;
            
this.txt_Value.Text = itemID;

        }

        
protected void btn_SetItemSelect_Click(object sender, EventArgs e)
        {
            
//设置下拉列表框的选项
            string itemID = this.txt_SetID.TextTrimNone;
            
this.lst_Area.SetSelectedValue(itemID);

        }

2、 三级联动的演示
以省、市、区县联动为例演示。提交表单后可以保持状态,可以设置选项。

演示直通:http://demo.naturefw.com/Nonline/other/UniteList03.aspx

(服务器的网速有点慢,网页又有点大,所以需要一点时间下载。)

protected void Page_Load(object sender, EventArgs e)
        {
            DataAccessLibrary dal 
= DALFactory.CreateDAL();

            
string sql = @"SELECT AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode LIKE '__0000') 
                            SELECT ParentID,AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode LIKE '____00') AND (AreaCode NOT LIKE '__0000') 
                            SELECT ParentID,AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode NOT LIKE '__0000') AND (AreaCode NOT LIKE '____00') 
";

            DataSet ds 
= dal.ExecuteFillDataSet(sql);
            
this.lst_Area.DataSource = ds;
            
this.lst_Area.DataBind();

        }

与二级联动的代码相对比,只是SQL语句的地方不同,即多了一条SQL语句。其他的都是一样的。同理,如果是四级的,那么就在多一条SQL语句。

n级联动,那么就需要n条SQL语句。

3、 修改记录演示
一般在修改记录的时候,需要根据记录里的信息设置列表框的选项,这里演示了这种功能。

演示直通:http://demo.naturefw.com/Nonline/other/UniteListUpdate.aspx 

增加下面这样的代码即可。

 if (!Page.IsPostBack)
            {
                
//6,568,572 是“辽宁省,抚顺市,望花区”对于的ID
                
//实际项目中,是从数据库里获取,然后设置,这里只是一个实例
                this.lst_Area.SetSelectedValue("6,568,572"); 
            }

4、 页面修饰演示
您看了上面的演示,可呢会觉得几个下拉列表框挨在一起太难看了,这里演示如何来做修饰。这个可以在下拉列表框的前面,加上一些修饰。

演示直通:http://demo.naturefw.com/Nonline/other/UniteListHTML.aspx

 protected virtual void SetHTML()
        {
            
//一行里,下拉列表框前面加说明的方法
            string[] html = new string[6];
            html[
0= "省份:";
            html[
2= "城市:";
            html[
4= "区/县:";

            
this.lst_Area.ListHTML = html;
        }

5、 Table形式的表单
在表单里,如果是table形式的话,一行里只想显示一个列表框,那么要如何设置呢?

演示直通:http://demo.naturefw.com/Nonline/other/UniteListHTML_table.aspx

省份、城市、区县各占一行的形式。

 protected override void SetHTML()
        {
            
//多行表格的方法
            string[] html = new string[6];
            html[
0= "";
            html[
1= "</td></tr>";
            html[
2= "<tr><td align=\"right\">城市:</td><td>";
            html[
3= "</td></tr>";
            html[
4= "<tr><td align=\"right\">区/县:</td><td>";

            
this.lst_Area.ListHTML = html;
        }

6、 Div形式的表单
在表单里,如果是div形式,一行里只想显示一个列表框,那么又要如何设置呢?
演示直通:http://demo.naturefw.com/Nonline/other/UniteListHTML_div.aspx 

省份、城市、区县各占一行的形式。

 【自然框架】分享 n级联动下拉列表框第1张

protected override void SetHTML()
        {
            
//多行表格的方法
            string[] html = new string[6];
            html[
0= "";
            html[
1= "</div>";
            html[
2= "<div class=\"formLeft\">城市:</div><div class=\"formRight\">";
            html[
3= "</div>";
            html[
4= "<div class=\"formLeft\">区/县:</div><div class=\"formRight\">";

            
this.lst_Area.ListHTML = html;
        }

注意:

  由于控件自身并没有保存数据,所以每次访问的时候,都需要设置DataSource 属性,并且需要绑定(DataBind)。这一点和一般的服务器控件不一样。

  设置选项的时候,需要在 if (!Page.IsPostBack) 内设置,否则无法得到用户的选择。

源码下载:http://www.naturefw.com/down/List1.aspx 

免责声明:文章转载自《【自然框架】分享 n级联动下拉列表框》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇IDEA 快捷键(MAC 版)说明DNN简介以及安装下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

CSS学习笔记08 浮动

从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法外,还有没有其他方法可以实现这种效果呢,答案是肯定的,那就是下面要介绍的CSS的浮动特性,浮动从字面意思上来看,就是浮起来,动起来,那么是谁浮起来,又是谁动...

XSL基础教程(二)

青苹果工作室编译,转自 ccidnet 网站2001年03月16日内容:    客户端XSL 服务器端XSL XSL(eXtensible Style sheet Language),即可扩展样式表语言,是XML的亲密伙伴。要学习好XML,不能不掌握XSL。本文就向你全面讲述XSL的一切一切: 客户端XSL:如何用XML解析器在客户机上将XML文档转换成H...

javascript流行框架

1. jQuery – Javascript框架 应用最广泛的JavaScript框架,jQuery插件非常之多,涉及LightBox灯箱插件、日期插件、图表插件等各种类型的插件不计其数,OsChina就收录了1000多款jQuery插件。 2. Dojo Javascript框架 Dojo是一个强大的面向对象JavaScript框架。主要由三大模块组成:C...

AIR:使用 HTML + Javascript 开发桌面应用

背景 断断续续用Winform和WPF开发过一些小工具,始终不得其法门,在玩Flex的时候就接触过AIR,最近发现可以用HTML + Javascript开发AIR应用,本文就尝试一下(Hello,World)。 什么是AIR? AIR本质上是一个浏览器(Webkit),这个浏览器可以从本机加载静态资源文件,可以受限的访问本机资源。 环境准备 AI...

HTML页面的加载

HTML页面的加载实际上是基于http过程+浏览器对数据的解析渲染。 http协议的请求过程是基于TCP协议的。http是要基于TCP连接基础上,简单的说,TCP单纯建立连接,不涉及任何我们需要请求的实际数据,简单的传输。http基于TCP建立的连接来收发数据,即实际应用上来的。 一个HTML页面的加载的交互流程大致如下: 0.输入URL1.解析URL2....

你不知道的 Blob

来自公众号:全栈修仙之路 如果你允许用户从你的网站上下载某些文件,那你可能会遇到 Blob 类型。为了实现上述的功能,你可以很容易从网上找到相关的示例,并根据实际需求进行适当的调整。对于部分开发者来说,在完成上述功能之后,他们并不会继续思考 Blob 是什么? 这就导致了一些开发者,还是停留在熟练使用 API 的层面,当遇到比较棘手的问题时,就束手无策...