由于需要显示分组列表，没有找到现成的，在网上找到一个漂亮的样式后进行了简单的封装，方便使用，效果如下：
样式是网上找的开源的，只做了简单的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 = //
' <li class="dropdown"><a href="#" data-toggle="dropdown">'+ ParentNodeText + '<i class="icon-arrow"></i></a>\
<ul class="dropdown-menu">';
// </ul>
//</li>'
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 = '<a href="#" class="default_a_class" data-toggle="select_li" data-index='+ i +' data-name=" '+ parent_data_arr[i].NodeName +'">'+parent_data_arr[i].NodeText+'</a>'
//循环添加li到ul
htmlString.push(li.outerHTML); //添加到ul
}
}
div_parent_div += htmlString.join("");
div_parent_div += '</ul></li>';
//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