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

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

  首先要设置记录集,这里用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。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

React 深度编程:受控组件与非受控组件

作者:司徒正美 https://segmentfault.com/a/1190000012458996 受控组件与非受控组件在官网与国内网上的资料都不多,有些人...

29570
来自专栏前端知识分享

Vue入门---常用指令详解

Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单、易学上手快,近两年也也别流行,发展速度较快,已...

13510
来自专栏前端知识分享

Web前端面试宝典(最新)

html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;

51030
来自专栏数据小魔方

rept——一个可以一键成图的神奇函数!

今天想跟大家分享一个特别有趣的函数——rept函数。 ▼ 这个函数,就如同它的名字一样,具有重复显示字符的功能。 如图所示,在A57单元格中有一个数字1,如果我...

39050
来自专栏CRPER折腾记

Vue 折腾记 - (7) 写一个挺不靠谱的Vue-Echarts组件

上基友社区看了下,发现对echarts的封装都是打包进去的...想想就还是算了.. 图表这货.说实在的,若不是整个系统大量用到,打包进去没必要...

10420
来自专栏前端儿

CSS常见兼容性问题总结

浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。

16830
来自专栏熊二哥

React快速入门

正好旁边前端的兄弟最近在学习React,为了更深入的了解前端的业态,也果断来学习一发,目标是有个基础的了解,需要时能快速上手就OK,说实话,个人并不是很喜欢它的...

23780
来自专栏前端说吧

JS案例 - 基于vue的移动端长按手势

当时首先想到要做长按事件的时候,我想到的是vue内部的自定义指令,毕竟官网里边有这么一句描述:

26920
来自专栏iKcamp

追溯 React Hot Loader 的实现

文:萝卜(沪江金融前端开发工程师) 本文原创,转载请注明作者及出处 如果你使用 React ,你可以在各个工程里面看到 Dan Abramov 的身影。他于...

504140
来自专栏QQ音乐前端团队专栏

前端水印生成方案

安全问题不能大意,对于一些比较敏感的内容,我们可以通过组合使用上述的水印方案,这样才能最大程度给浏览者警示的作用,减少泄密的情况,即使泄密了,也有可能追踪到泄密...

2.1K40

扫码关注云+社区

领取腾讯云代金券