【自然框架】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。

  

 

相关文章
聊天框(番外篇)—如何实现@功能的整体删除
上一篇文章中,我们已经初步实现了聊天输入框,但其@功能是不完善的,例如无法整体删除、无法获取除用户名以外的数据(假设用户名不是唯一的)。有问题就要想办法解决,在网上百度了一圈后,倒是有一些收获。本文就着重解决@的整体删除以及获取额外数据。
1063 0
聊天框(番外篇)—如何实现@功能的整体删除
|
设计模式 人工智能 安全
没有性能瓶颈的无限级菜单树应该这样设计
以一门网络课程为例,我们设计一个课程的关系结构。比如,我们有Java入门课程、人工智能课程、Java设计模式、源码分析、软技能等,而Java设计模式、源码分析、软技能又属于Java架构师系列课程包,每个课程的定价都不一样。但是,这些课程不论怎么组合,都有一些共性,而且是整体和部分的关系,可以用组合模式来设计。首先创建一个顶层的抽象组件CourseComponent类。
85 0
|
Web App开发 缓存 JavaScript
简洁、巧妙、高效的长列表,无限下拉方案
简洁、巧妙、高效的长列表,无限下拉方案
126 0
|
自然语言处理 JavaScript
如何实现一个能精确同步滚动的Markdown编辑器
如何实现一个能精确同步滚动的Markdown编辑器
293 0
如何实现一个能精确同步滚动的Markdown编辑器
自然框架的定位
  首先从软件定义的角度来看,然后再从项目开发的几个阶段来看。     软件:是一系列按照特定顺序组织的计算机数据和指令的集合。一般来讲软件被划分为编程语言、系统软件、应用软件和介于这两者之间的中间件。
717 0
|
数据库
【自然框架.视频】基础设置(一)如何下载自然框架
  大家好,好久没有发博客了,这段时间是为了能够做出来更好的视频,做一些准备。目前还在锻炼中,以前一直很内向,话都说不利索,要做视频都很怵头。不过呢,要不断的提高自己,弥补自己的不足。现在还年轻,要多多努力!     打算做一套全新的视频,好好的把自然框架给详细的介绍一遍。
581 0
|
Web App开发 SQL JavaScript
【自然框架】分享 n级联动下拉列表框
  特点:1、 使用js方法,把需要的数据一次性写入到页面里,然后用js来实现联动的效果。2、 支持n级。3、 封装成了服务器控件,所以使用非常简单。4、 支持在回发的时候保持状态。5、 支持修改记录的时候设置默认选项。
1250 0
|
数据库
【自然框架 NatureFW】里的两种“映射”方式
   自然框架里面采用了两种映射关系,一个是流行的ORM,另一是非主流的“CCM ” (我自己想的,呵呵)。   先说一下ORM。ORM是O和R的映射关系。也看到很多人写关于ORM的文章,发现好像有个误区。
943 0
|
SQL
【自然框架】 之 资源角色——列表过滤方案(思路篇)
名词解释 1、资源角色,我的理解就是资源过滤方案 + 角色。就是把资源过滤方案和角色结合在一起的东东。2、资源:这里的资源指的是关系数据库里的记录。3、资源过滤:就是按照一定的条件提取数据库里的记录。
891 0
|
Android开发 Windows iOS开发
第二十五章:页面变化(六)
使用ItemTemplateTabbedPage还可用于呈现小数据集,每个数据集是由选项卡标识的单独页面。 您可以通过设置TabbedPage的ItemsSource属性并指定用于呈现每个页面的ItemTemplate来完成此操作。
554 0