JS封装的一个Tree(树)控件，用于显示分组列表

由于需要显示分组列表，没有找到现成的，在网上找到一个漂亮的样式后进行了简单的封装，方便使用，效果如下：

样式是网上找的开源的，只做了简单的JS封装，第一次这样做。

// Dropdown Menu
(function(){
	var obj;
	var dropdown;
	var dropdownArray;
	var last_li;
	var select_li;
	var liArray1;
	var options;

  var tree_list = function(config){
	options = new Object();
	options.id = config.id;
	options.ParentData=config.ParentData,            //父标签数据源
    options.LiData=config.LiData,                	//子列表数据源
    options.SelectionEvent=config.SelectionEvent,   //选择某一项后回调
    this.init();
  };

  //构造函数
  tree_list.prototype.init = function(){
    //alert("x是"+this.options.x+" y是"+this.options.y+" z是"+this.options.z);
    try {
		


	} catch (error) {
		
	}
    
  };


  //初始化事件
  function event_init(){
    //alert("x是"+this.options.x+" y是"+this.options.y+" z是"+this.options.z);
    try {
		obj = document.getElementById(options.id); //获取整个对象
		if(obj == null)
		{
			dropdown = null;	//无效
			dropdownArray = null;	//无效
		}
		else
		{
			dropdown = obj.querySelectorAll('.dropdown');
			dropdownArray = Array.prototype.slice.call(dropdown,0);

			dropdownArray.forEach(function(el){
				var button = el.querySelector('a[data-toggle="dropdown"]'),
						menu = el.querySelector('.dropdown-menu'),
						arrow = button.querySelector('i.icon-arrow');
			
				button.onclick = function(event) {
					if(!menu.hasClass('show')) {
						menu.classList.add('show');
						menu.classList.remove('hide');
						arrow.classList.add('open');
						arrow.classList.remove('close');
						event.preventDefault();
					}
					else {
						menu.classList.remove('show');
						menu.classList.add('hide');
						arrow.classList.remove('open');
						arrow.classList.add('close');
						event.preventDefault();
					}
				};
			})

			
			// select li
			select_li = obj.querySelectorAll('.select_li');
			liArray1 = Array.prototype.slice.call(select_li,0);
			liArray1.forEach(function(el){
				var li = el.querySelector('a[data-toggle="select_li"]'),
						menu = el.querySelector('.select_li');
					li.onclick = function(event)
					{
						//after('adfaf');
						//select_li_class
						li.classList.remove('default_a_class');
						li.classList.add('select_a_class');
						if(last_li != null)
						{
							last_li.classList.add('default_a_class');
							last_li.classList.remove('select_a_class');
						}
						last_li = li;

						var text = event.rangeParent.data;
						var index = li.getAttribute('data-index');
						var data_name = li.getAttribute('data-name');
						if(options.SelectionEvent!=null)
						{
							options.SelectionEvent(index, data_name, text);
						}
					};
				
				
			})

		}
	} catch (error) {
		
	}
    
  };



  tree_list.prototype.render = TreeInit;

	//生成一个列表，返回字html符串
	function SpliceOneNode(ParentNodeId, ParentNodeText, parent_data_arr) {
	    var time_id = Date.now();   //获取时间戳，用于生成唯一id
	    //alert(JSON.stringify(TreeConfig, 4));
	    //父标签div,独立的
	    var div_parent_div = //
	    ' 
'+ ParentNodeText + '\
	    
';
	    //  
	    //
'


	    var htmlString = [];
	    var id;
	    //循环生成子列
	    for (var i = 0; i < parent_data_arr.length; i++) {
	        if (parent_data_arr[i].ParentNodeId == ParentNodeId) {
	            id = 'li_' + time_id + '_' + i;
	            var li = document.createElement("li");
	            //设置 li 属性
	            li.setAttribute("id", id);
	            //设置 li 属性
	            li.setAttribute("data-attribute", i);   //自定义属性，存放索引
	            //设置 li 属性
	           li.setAttribute("class", 'select_li');
	           li.innerHTML = ''+parent_data_arr[i].NodeText+''
	            
	            //循环添加li到ul
	            htmlString.push(li.outerHTML); //添加到ul
	        }
	    }
	    div_parent_div += htmlString.join("");
	    div_parent_div += '';

	    //alert(div_parent_div);
	    return div_parent_div;
	}

	//初始化tree界面
	function TreeInit() {
	    try {
	        var Tree = document.getElementById(options.id);  //获取容器
	        if (Tree != null) {
	            //顶层ul
	            var ul = document.createElement("ul");
	           // ul.setAttribute("class", "panel-group"); //添加属性     
	            var htmlString = [];
	            //循环生成列表
	            for (var i = 0; i < options.ParentData.length; i++) {
	                htmlString.push(SpliceOneNode(options.ParentData[i].ParentNodeId, options.ParentData[i].NodeText, options.LiData));
	            }
	            ul.innerHTML = htmlString.join("");
	            //alert(ul.outerHTML);
	            Tree.innerHTML = ul.outerHTML;         //添加到父div中-预留在html中的div

	            event_init();							//重新绑定事件
	        }
	    }
	    catch (e) {
	        alert("错误：" + e.message);
	    }
	}



  	window.tree_list = tree_list; //把这个函数暴露给外部，以便全局调用


  Element.prototype.hasClass = function(className) {
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

}());

使用如下：先定义一个div,一个id

//父标签
var tree_parent_data =
    [
        { ParentNodeId: 1, NodeName: '1', NodeText: '分组1'},
        { ParentNodeId: 1, NodeName: '2', NodeText: '分组2'},
    ];

//子标签
 var tree_node_data =
     [
         { ParentNodeId: 1, NodeName: '12345', NodeText: '1510260128 测试站点1'},
         { ParentNodeId: 1, NodeName: '12345', NodeText: '1510260128 测试站点'},
         { ParentNodeId: 1, NodeName: '12345', NodeText: '1510260128 测试站点'},
         { ParentNodeId: 1, NodeName: '12345', NodeText: '1510260128 测试站点'},
         { ParentNodeId: 1, NodeName: '12345', NodeText: '1510260128 测试站点'},
         { ParentNodeId: 1, NodeName: '12345', NodeText: '1510260128 测试站点'},
         { ParentNodeId: 1, NodeName: '12345', NodeText: '1510260128 测试站点'},
         { ParentNodeId: 1, NodeName: '12345', NodeText: '1510260128 测试站点'},

         { ParentNodeId: 2, NodeName: '12345', NodeText: '1510260128 测试站点'},
         { ParentNodeId: 2, NodeName: '12345', NodeText: '1510260128 测试站点'},
         { ParentNodeId: 2, NodeName: '12345', NodeText: '1510260128 测试站点'},
         { ParentNodeId: 2, NodeName: '12345', NodeText: '1510260128 测试站点'},
         { ParentNodeId: 2, NodeName: '12345', NodeText: '1510260128 测试站点'},
         { ParentNodeId: 2, NodeName: '12345', NodeText: '1510260128 测试站点'},
     ];





//初始化加载执行
    window.onload = function () {   //要执行的js代码段  
      

     var tree_config = 
      {
        id:'test_id_1',
        ParentData: tree_parent_data,             //父标签数据源
           LiData: tree_node_data,                //子列表数据源
           SelectionEvent: SelectionEvent,        //选择某一项后回调
      };
      var tree_obj = new tree_list(tree_config);
      tree_obj.render();

    }

    function SelectionEvent(index, data_name, text)
   {
      alert("index"+index + " data_name:" + data_name + " text"+ text);
   };

ParentNodeId：是父标签id

选中后就会调用回调：SelectionEvent

 

测试代码：https://download.csdn.net/download/cp1300/10611971