专栏首页更流畅、简洁的软件开发方式【自然框架】分享 n级联动下拉列表框

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

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用了继承、多态还有工厂模式和反射,但是还是没有OO的感觉。[已经增加了实现的代码]

    最近项目里遇到了一个问题,为了解决这个问题“动用了”继承、多态还有工厂模式和反射,但是还是没有OO的感觉。呵呵。 先说一下具体情况: 1、使用短信猫来接收短...

    用户1174620
  • 我的数据访问类(第二版)—— for .net2.0 (二)

    下面写一下相对来说不变的地方 SQL语句部分,改成了静态函数的形式。 using System; using System.Collections.Generi...

    用户1174620
  • 在网页里让文本框只能输入数字的一种方法。外加回车换Tab

    第一步利用样式表。 <asp:TextBox Runat="server" id="TT" style="ime-mode:disabled"  onkeyd...

    用户1174620
  • 使用 Kotlin , Groovy ,Java 开发一个自己的 Gradle 插件

    使用 Kotlin , Groovy ,Java 开发一个自己的 Gradle 插件

    一个会写诗的程序员
  • SaaS企业纷纷融资 进军云计算“新领域”

    云计算正逐渐成为各个行业的“宠儿”,无论是最近炒得沸沸扬扬的无人机,还是机器人;无论是传统的医学界,还是人工智能领域都开始与“云”结缘。近日,SaaS企业纷纷融...

    静一
  • Consul注销实例时候的问题

    当我们在Spring Cloud应用中使用Consul来实现服务治理时,由于Consul不会自动将不可用的服务实例注销掉(deregister),这使得在实际使...

    程序猿DD
  • Spring Batch 批处理(3) - Job、Flow、Split

    在成功创建一个job后,Spring Batch 默认在项目启动时候执行配置的job。往往在正常业务处理中,需要我们手动或者定时去触发job,所以这边便引入了j...

    chenchenchen
  • 百度10.55亿元入股创维酷开,李彦宏要为电视带来AI遥控器

    他说当时还没有遥控器,看电视换台要从被窝中抽身,所以一直认为遥控器是电视发展中历史性的发明。

    量子位
  • Linux下部署SSH登录时的二次身份验证环境记录(利用Google Authenticator)

    一般来说,使用ssh远程登录服务器,只需要输入账号和密码,显然这种方式不是很安全。为了安全着想,可以使用GoogleAuthenticator(谷歌身份验证器)...

    洗尽了浮华
  • linux基础命令介绍三:文件搜索及其它

    find是一个非常有效的工具,它可以遍历目标目录甚至整个文件系统来查找某些文件或目录:

    用户5030870

扫码关注云+社区

领取腾讯云代金券