开发者社区> 金色海洋> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【自然框架】n级下拉列表框的原理

简介:   其实原理也很简单,分成两个部分,一个是服务器端,一个是客户端。     首先要设置记录集,这里用DataSet来装载,二级联动,里面就要有两个DataTable;三级联动,里面就要有三个DataTable。
+关注继续查看

 

  其实原理也很简单,分成两个部分,一个是服务器端,一个是客户端。

 

  首先要设置记录集,这里用DataSet来装载,二级联动,里面就要有两个DataTable;三级联动,里面就要有三个DataTable。同理,n级联动就要有n个DataTable。

 

  然后用第一个DataTable来绑定第一个DropDownList。第一个DropDownList是固定生成的,其他的DropDownList则是根据级数动态new出来的。

 

  服务器端会根据联动级数来动态创建下拉列表框。就是这样:lst = new MyDropDownList();这样呢,做一个循环,有n级就new出来n-1个。然后在设置一些属性,根据上一个DropDownList的第一个选项,作为过滤条件,绑定控件。这样第一次的显示工作就完成了。

 

 

for (i = 1; i < ds_List.Tables.Count; i++)
                {
                    dv 
= ds_List.Tables[i].DefaultView;

                    
#region 绑定其他的列表框
                    
//获取过滤条件
                    dv.RowFilter = "ParentID=" + ParentID;

                    
//定义新的下拉列表框
                    lst = new MyDropDownList();
                    lst.EnableViewState 
= true;

                    lst.ID 
= "lst" + i;
                    lst.DataTextField 
= "txt";
                    lst.DataValueField 
= "id";

                    
if (str_HTML.Length > 2 * i)
                        
this.Controls.Add(new LiteralControl(str_HTML[2 * i]));

                    
//添加下拉列表框
                    this.Controls.Add(lst);
                    
if (str_HTML.Length > 2 * i + 1)
                        
this.Controls.Add(new LiteralControl(str_HTML[2 * i + 1]));

                    lst.DataSource 
= dv;
                    lst.DataBind();

                    
//设置父ID。第一次访问,取下拉列表框的第一个选项的值
                    if (dv.Count > 0)
                        ParentID 
= dv[0][1].ToString();
                    
else
                        ParentID 
= "-9999";

                    
#endregion
                }

 

 

  然后要输出一个js的数组,当初不会json,也不喜欢xml,所以就用数组来装载了。把这个数组输出到页面里。然后客户端的js就可以访问到需要的数据了。

 

  下面说一下客户端。客户端是通过js的onchange函数实现联动,原理呢就是“递归”。写两个js函数就搞定了,一个是入口函数(lst_change),另一个是结束函数(lstSelected)。

 

  当第一个下拉列表框触发了onchange函数(lst_change)的时候,会根据用户的选项对下一个下拉列表框的item进行设置,然后判断一下是否有下下一个下拉列表框,有的话递归调用lst_change(),没有的话调用结束函数(lstSelected)。

 

  这样不管有多少个下拉列表框,都可以用这两个js函数搞定。

 

 

  注意点:

  1、由于用的是服务器控件DropDownList,他有一个“特点”,那就是在客户端用js设置的item,在服务器端都是不承认的。为了解决这个问题,我用了一个奔办法,加了一个文本框,用这个文本框来保存客户的选项。然后提交表单,根据这个文本框里的内容来确定客户选择了哪些选项。

 

  

  原来基本就是这样。然后打算引入jQuery和json来简化一下代码,再然后看看能不能做成纯客户端的,就是不用服务器控件了,直接使用 html的input。

  

 

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

相关文章
【OpenGL ES】OpenGL ES 2.0 -- 制作 3D 彩色旋转三角形 - 顶点着色器 片元着色器 使用详解(三)
【OpenGL ES】OpenGL ES 2.0 -- 制作 3D 彩色旋转三角形 - 顶点着色器 片元着色器 使用详解(三)
51 0
冰河开源了全网首个完全开源的分布式全局有序序列号(分布式ID)框架!!
mykit-serial框架的设计参考了李艳鹏大佬开源的vesta框架,并彻底重构了mykit-serial框架,借鉴了雪花算法(SnowFlake)的思想,并在此基础上进行了全面升级和优化。支持嵌入式(Jar包)、RPC(Dubbo,motan、sofa、SpringCloud、SpringCloud Alibaba等主流的RPC框架)、Restful API(支持SpringBoot和Netty),可支持最大峰值型和最小粒度型两种模式。
92 0
线上分享-- 基于DDD的.NET开发框架-ABP介绍
前言 为了能够帮助.Net开发者开拓视野,更好的把最新的技术应用到工作中,我在3月底受邀到如鹏网.net训练营直播间为各位学弟学妹们进行ABP框架的直播分享。
972 0
Ubuntu 12.04.1 OK335xS busybox-1.24.1 文件系统编译错误及解决方案
Ubuntu 12.04.1 OK335xS busybox-1.24.1 文件系统编译错误及解决方案 一、参考文档: 编译busybox的一些错误: http://blog.
1152 0
在ASP.NET2.0里打印网页指定的内容(比如打印网页里的一个Table)
原文:在ASP.NET2.0里打印网页指定的内容(比如打印网页里的一个Table)打印指定内容: function   printPage()   {   var   newWin   =   window.
851 0
.NET(C#):XML序列化时派生类的处理
原文 www.cnblogs.com/mgen/archive/2011/12/03/2275014.html 目录 1. 针对基类的XmlSerializer序列化派生类 2. 类内成员是派生类的序列化   注意: 运行代码请注意添加如下命名空间: using System.
753 0
谦卑的程序员(The Humble Programmer) by E.W.Dijkstra,1972
谦逊的长者——Edsger Wybe Dijkstra,1930年出生于荷兰阿姆斯特丹,2002年逝世于荷兰纽南。他在祖国荷兰获得数据和物理学学士,理论物理博士学位,2000年退休前 一直是美国Texas大学的计算机科学和数学教授。
1228 0
你知道.NET框架下的自动内存管理吗?
  C#使用的自动内存管理,使用开发者从繁重的手工分配、释放内存的操作解放出来。内存的自动管理是由垃圾回收器来执行。一个对象使用内存的生命周期是这样的:  当对象被创建时,它便分配了一定的内存,当构造器中的代码开始运行时,这个对象就“活”了。
666 0
.net精简框架集下的ini文件读取(C#)
        无论是.net框架集还是.net精简框架集都能非常完美的支持XML文件,并且微软也强烈建议用xml文件取代ini文件,但是在工控领域大部分的工程都是采用ini文件配置的系统信息的。
755 0
+关注
金色海洋
算法相关技术专家
323
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载