【自然框架】分享 n级联动下拉列表框-阿里云开发者社区

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

2019-06-01 1226

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

特点：
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

（服务器的网速有点慢，网页又有点大，所以需要一点时间下载。）

与二级联动的代码相对比，只是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

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

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