`
shirlly
  • 浏览: 1652038 次
  • 性别: Icon_minigender_2
  • 来自: 福州
社区版块
存档分类
最新评论

如何用JS实现下拉框中的值树形展示

    博客分类:
  • .NET
J# 
阅读更多
主要的思路:
将全部记录读出,在后台重组读出的Datatable,用JS绑定。
示例:
js代码
//设置用户控件中的存放附件的文件路径的下拉框中的值  
SubModule_PMS_ProjTask_TaskAdd.SetUploadPath(proname.value,0,SetUploadPathDll);

c#后台代码
#region 设置附件存放位置的下拉框中的值 add by shirlly 20100112
    [AjaxPro.AjaxMethod]
    public DataTable SetUploadPath(string str, int pProjFolderID)
    {
        DataSet ds = null; 
        if (!Equals("", str))
        {
            int projectID = Int32.Parse(str); 
            SMSIPMS.BLL.PMS_ProjFolderInfo ProFolderBll = new SMSIPMS.BLL.PMS_ProjFolderInfo();
            ds = ProFolderBll.GetList(" ProjectID=" + projectID);
            DataTable inDatatable = ds.Tables[0];
            DataTable outDatatable = new DataTable();
            outDatatable.Columns.Add("ProjFolderID", typeof(System.Int32));
            outDatatable.Columns.Add("ProjFolderName", typeof(System.String));
            PMS.PMSCommon.addProFoloderOtherDll("", 0, inDatatable, 1, ref outDatatable);
            return outDatatable;
        }
        else
        {
            return null;
        }

    }
    #endregion

主要展示树形的代码:
#region 构造树形结构的DataTable  add by shirlly 20100113
        /// <summary>
        /// 构造树形结构的DataTable
        /// </summary>
        /// <param name="Pading"></param>
        /// <param name="DirId"></param>
        /// <param name="inDatatable">构造之前的DataTable</param>
        /// <param name="deep"></param>
        /// <param name="outDatatable">构造之后的DataTable</param>
        public static void addProFoloderOtherDll(string Pading, int DirId, DataTable inDatatable, int deep, ref DataTable outDatatable)
        {
            DataRow[] rowlist = inDatatable.Select("PProjFolderID='" + DirId + "'");
            foreach (DataRow row in rowlist)
            {
                string strPading = "";
                for (int j = 0; j < deep; j++)
                {
                    strPading += " ";         //用全角的空格
                }
                //添加节点
                string Note = strPading + "|--" + row["ProjFolderName"].ToString();
                DataRow dr = outDatatable.NewRow();
                dr[0] = row["ProjFolderID"].ToString();
                dr[1] = Note;
                outDatatable.Rows.Add(dr);

                //递归调用addOtherDll函数,在函数中把deep加1
                addProFoloderOtherDll(strPading, Convert.ToInt32(row["ProjFolderID"].ToString()), inDatatable, deep + 1, ref outDatatable);
            }
        } 
        #endregion

JS代码:
//设置用户控件的下拉框中的值
        function SetUploadPathDll(response)
        {
            var dt = response.value;
            document.getElementById("MyUpdateFile_dropFileClass").options.length = 0; //通过用户控件ID+用户控件中想获得控件的ID
            var UploadPathDll = document.getElementById("MyUpdateFile_dropFileClass");
            UploadPathDll.options.add(new Option("--请选择--", ""));
            if (dt != null)
            {  
                for (var i = 0; i < dt.Rows.length; i++)
                {
                    var UploadPathDll_text = dt.Rows[i]["ProjFolderName"];
                    var UploadPathDll_value = dt.Rows[i]["ProjFolderID"];
                    UploadPathDll.options.add(new Option(UploadPathDll_text, UploadPathDll_value)); 
                }
            }
        } 


分享到:
评论

相关推荐

    使用javascript实现下拉框的动态控制

    资源名称:使用Javascript实现下拉框的动态控制   内容简介: 使用Javascript实现下拉框的动态控制 一、前言 下拉框是常用的一种web页面控件。它很简单实用,便于 操作者从…组选项...

    JS实现下拉框树形

    在网页开发中,"JS实现下拉框树形"是一种常见的交互设计,它结合了下拉框和树形结构的特点,使得用户可以在一个下拉菜单中以层级方式浏览和选择数据。这种技术常用于需要展示多级分类或者层级关系的场景,如地区选择...

    bootstrap树形下拉框 下拉框树形菜单

    而Bootstrap Treeview.js是一个专门用于创建树形结构的JavaScript库,它可以轻松地集成到Bootstrap环境中,实现下拉框中的树形菜单。 首先,要实现Bootstrap树形下拉框,你需要包含以下关键文件: 1. Bootstrap CSS...

    js实现下拉框选择要显示图片的方法

    在JavaScript中,下拉框通常是通过`&lt;select&gt;`元素来实现的。而图片的显示通常与`&lt;img&gt;`标签相关联。在实际开发中,我们可能会遇到一种需求,即通过下拉框选择来控制图片的显示。本文将详细介绍如何使用JavaScript来...

    使用JavaScript实现下拉框的动态控制

    ### 使用JavaScript实现下拉框的动态控制 #### 引言 在Web开发中,下拉框作为用户界面的重要组成部分,提供了高效的选择机制,允许用户从一组预设的选项中进行选择。然而,静态的下拉框往往无法满足复杂的业务需求...

    bootstrap树形下拉框 下拉框树形菜单(修改版)

    4. **初始化树形下拉框**:在JavaScript中,使用`bootstrap-treeview.js`初始化下拉框元素。调用`treeview.init()`方法并传入配置对象,设置数据源、选中项、展开状态等参数。 5. **事件监听**:为了响应用户的交互...

    JS多选下拉框_实现多项选择

    JS多选下拉框,实现多选。点击显示下拉。 &lt;script type="text/javascript"&gt; &lt;!-- function $(e){return document.getElementById(e) ;} $('btnSelect').onclick = function () { //§ó§ï?? $('status')....

    JS实现下拉框多项选择

    本篇文章将详细讲解如何使用JavaScript(JS)来实现下拉框的多选功能。 首先,我们来看一下HTML的基础结构。一个基本的下拉框`&lt;select&gt;`元素默认只支持单选,如果想要实现多选,我们需要在`&lt;select&gt;`标签上添加`...

    bootstrap树形下拉框 下拉框树形菜单(花了一小时修改过的)

    这个组件是基于流行的前端框架Bootstrap和JavaScript库构建的,使得在网页设计中实现树形下拉框变得简单高效。 在Bootstrap中,树形下拉框主要依赖于`bootstrap-treeview.js`这个JavaScript插件,它扩展了Bootstrap...

    javascript实现下拉框二级联动

    在网页开发中,二级联动下拉框是一种常见的交互设计,常用于地区选择、产品分类等场景,用户在第一个下拉框中做出选择后,第二个下拉框会动态更新其选项,展示与前一个选择相关的内容。本文将详细介绍如何使用...

    java+js实现下拉框提示搜索功能

    Java 和 JavaScript 结合实现下拉框提示搜索功能是前端开发中的常见需求,它极大地提升了用户交互体验,使得用户能够快速找到所需的信息。这种功能广泛应用于各种网页表单、搜索引擎、推荐系统等。以下是对这个主题...

    纯前端实现下拉框.zip

    在前端开发中,下拉框(Dropdown)是一种常见的交互元素,用于展示一组可选项供用户选择。本项目“纯前端实现下拉框”提供了一种自定义的解决方案,旨在帮助开发者构建具有高度定制化功能的下拉框控件。下面我们将...

    js实现下拉框菜单插件.zip

    本项目“js实现下拉框菜单插件.zip”提供了一种用JavaScript实现这种功能的方法。 首先,我们来看下拉框菜单的基本结构。在HTML中,一个简单的下拉菜单通常由`&lt;select&gt;`元素和一系列`&lt;option&gt;`元素组成。然而,为了...

    Js实现下拉框联动按钮(静态)

    本文将详细介绍如何使用JavaScript(简称JS)来实现一个静态的下拉框联动按钮功能。 #### 技术栈 1. **HTML**:用于构建网页的基本结构。 2. **CSS**:用于美化网页样式。 3. **JavaScript**:用于添加交互逻辑。 ...

    layui组件之树形下拉框

    "layui组件之树形下拉框"是Layui框架中的一个重要组件,用于在下拉菜单中展示层级结构的数据,常用于选择组织结构、地区分类等具有树状关系的场景。 ### layui组件简介 Layui是一个轻量级的前端框架,它包含了基础...

    纯js实现多选下拉框并模糊查询.html

    纯JS控制实现多选拉下框并且带全模糊查询,不是首字母查询,打勾多选并带回隐藏值,非常实用!!

    js多选下拉框多选下拉框多选下拉框

    JavaScript(简称js)作为客户端脚本语言,常被用来增强网页的交互性,其中包括实现多选下拉框的功能。本文将深入探讨如何使用JavaScript来创建和操作多选下拉框。 首先,HTML基础是构建多选下拉框的起点。一个基本...

Global site tag (gtag.js) - Google Analytics