js 自动生成下拉树

toTree:function(treeDatas) {
    	 var that = this;
    	 var rs = [];
		 for(var i=0; i<treeDatas.length; i++) {
			var pid = -1;
			if(treeDatas[i].hasOwnProperty("pid")){
				pid = treeDatas[i].pid;
			}
			rs.push({id: treeDatas[i].id, name: treeDatas[i].subjectName, pid: pid, code: treeDatas[i].subjectNo});
		 }
     	 //获取容器对象
     	 var selectbox = document.getElementById("selectbox");
     	 var tree = that.listToTree(rs,-1);//调用函数,传入要转换的list数组,和树中顶级元素的pid

     	 //调用函数,并将结构出入到下拉框容器中
     	 selectbox.innerHTML = that.creatSelectTree(tree);
     },
     listToTree:function(list,pid) {
    	 var that = this;
    	 var ret = [];//一个存放结果的临时数组
    	 for(var i in list) {
    		 if(list[i].pid == pid) {//如果当前项的父id等于要查找的父id,进行递归
    			 list[i].children = that.listToTree(list, list[i].id);
    			 ret.push(list[i]);//把当前项保存到临时数组中
    		 }
    	 }
    	 return ret;//递归结束后返回结果
     },
     preFlag:"+",//前缀符号,用于显示父子关系,这里可以使用其它符号
     creatSelectTree:function(d){
    	 var that = this;
     	 var option="";
    	 for(var i=0;i<d.length;i++){
    		 if(d[i].children.length){//如果有子集
    			 option += "<option value=‘" + d[i].id + "‘>" + that.preFlag + d[i].name + "</option>";
    			 that.preFlag += "-";//前缀符号加一个符号
       		  	 option += that.creatSelectTree(d[i].children);//递归调用子集
       		  	 that.preFlag = that.preFlag.slice(0,that.preFlag.length - 1);//每次递归结束返回上级时,前缀符号需要减一个符号
    	 	 }else{//没有子集直接显示
    	 		 option += "<option value=‘"+d[i].id+"‘>" + that.preFlag + d[i].name + "</option>";
    		 }
     	 }
     	 return option;//返回最终html结果
     }
时间: 2024-11-05 02:18:08

js 自动生成下拉树的相关文章

EXTJS下拉树ComboBoxTree参数提交及回显方法

http://blog.csdn.net/wjlht/article/details/6085245 使用extjs可以构造出下拉数,但是不方便向form提交参数,在此,笔者想到一个办法,很方便ComboBoxTree向form提交. 原理: 在form中增加一个隐藏的字段,当在comboBoxTree中选定值后自动在隐藏字段中赋值. 为实现此方法,需要重载comboBoxTree中collapse事件方法. Ext.ux.ComboBoxTree = function(){    this.t

配置时间生成下拉菜单

<?php //设置时区 date_default_timezone_set('PRC'); //设置中国时区 ?> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>配置时间生成下拉菜单</title> <link rel="stylesheet" type="text/css" hre

Extjs下拉树代码测试总结

http://blog.csdn.net/kunoy/article/details/8067801 首先主要代码源自网络,对那些无私的奉献者表示感谢! 笔者对这些代码做了二次修改,并总结如下: Extjs3.x版本下拉树代码: [javascript] view plaincopy Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, { constructor : function(cfg) { cfg = cfg || {}; Ext.ux.Tr

DIV+CSS+JS仿Select下拉表单网页特效源代码下载

DIV+CSS+JS仿Select下拉表单 原文:DIV+CSS+JS仿Select下拉表单网页特效源代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463331830784.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <

JS实现 网页下拉一段后固定导航条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JS为Select下拉框增加输入功能

JavaScript使用parentNode.nextSibling.value实现的本功能,实际上你会发现网页上有两个控件元素,一个是Select,一个是input,使用CSS将input覆盖于select之上,再使用JS将下拉框的值赋值给input,实际上是用input模拟出了select的功能,思路很新颖,也不知到底有多少人需要select可输入文字的功能,下面是详细的实现代码:前端资源分享 .代码   <div style="position:relative;">

div长度过小自动添加下拉

<div style="height: 600px;overflow-y: auto;"> <table width="100%" border="0"> <tr> <td width="15%" valign="top"> <UC:TreeView ID="MyTreeView" Target="frmMain"

WPF 组织机构下拉树多选,递归绑定方式现实

原文:WPF 组织机构下拉树多选,递归绑定方式现实 使用HierarchicalDataTemplate递归绑定现实 XAML代码: <UserControl x:Class="SunCreate.CombatPlatform.Client.MultiSelOrgTree" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas

c# - Winform DatagridView上显示下拉树

Winform的DatagridView是不支持下拉树的,所以需要扩展 废话不多说,直接贴代码 首先需要对comBox扩展,下拉内容变成TreeView using System.Drawing;using System.Windows.Forms;namespace WindowsApplication23{ public class ComboBoxTreeView : ComboBox { private const int WM_LBUTTONDOWN = 0x201, WM_LBUTT