zoukankan      html  css  js  c++  java
  • 【自然框架】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。

      

  • 相关阅读:
    HTML常用标签(自用,可能不严谨,勿怪)
    Nginx负载均衡和反向代理设置
    Django的列表反序
    Python装饰器通用样式
    WCF、Web API、WCF REST、Web Service的区别
    C++11 标准新特性: 右值引用与转移语义
    在windows下vs使用pthread
    部分浏览器记住密码后可能会带来的问题
    SQL Server、 My SQL、PG Sql、Oracle、 Access 不同数据库sql差异
    sql中select语句的逻辑执行顺序
  • 原文地址:https://www.cnblogs.com/jyk/p/1963947.html
Copyright © 2011-2022 走看看