基于li列表选择和Json数据创建Treeview

Question

我有一个场景使用 ul li 和 json 数据中的项目列表创建树视图，根据我对列表项的选择，应该创建一个树视图。在树视图层次结构中，第一级将是从列表中选择的项目和其对应的下一级将是来自 json 数据的值。请帮助我。

我发布了一个树视图的输出，其中包含我的数据选择的 li 项。

JSON 数据 所有列表元素的格式都相似

data={
  project_name: 'Sales1',
  info: {
    Value1: 'Value1',
    Value2: 'Value2'
   }
}

$(document).ready(function() {
  $('#projects-menu').append("<li  value='sales1'>Sales 1</li>")
 

  $(document).on('click', '#projects-menu > li', function(event) {
    event.preventDefault();
    if (event.ctrlKey) {
      if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
      } else {
        $(this).addClass("selected");
      }
    } else {
      $("#projects-menu > li").removeClass("selected");
      $(this).addClass("selected");
    }
  });

})

ul.menu {
  margin-top: 30px;
  list-style-type: none;
}

ul.menu li {
  background-color: #e0e0e0;
  padding: 8px 12px;
  border: solid 2px white;
  cursor: pointer;
  border: 3px solid #FFFFFF;
  border-radius: 10px;
}

ul.menu li:hover {
  background-color: #A9A9A9;
}

ul.menu li.selected {
  background-color: #23ac61;
}

ul.menu li.disabled:hover {
  background-color: #e0e0e0;
  cursor: default;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="projects">
  <ul class="menu" id="projects-menu">
  </ul>
</div>

所需的输出

Answer 1

为了构建您可以使用的所有子 li：

Object.values(data.info): ...获取给定对象自己的数组 可枚举的属性值，...

根据您的评论，我添加了一个名为 createList 的函数：

• 第一个参数：将新创建的列表添加到何处
• 第二个参数：对象或对象数组
• 第三个参数：点击元素的值，以便在 obj..s 中搜索

更新片段：

function createList(AppendToEle, obj, searchFor, currEle) {
  var objToUse = null;

  if (obj.constructor == Array) {
      obj.forEach(function(ele) {
          if (ele.project_name.toLowerCase() == searchFor.toLowerCase()) {
              objToUse = ele;
          }
      });
  }
  if (obj.constructor == Object) {
      if (obj.project_name.toLowerCase() == searchFor.toLowerCase()) {
          objToUse = obj;
      }
  }
  if (objToUse != null) {
      if (AppendToEle.find('.divList.' + objToUse.project_name.toLowerCase()).length != 0) {
          if ($(currEle).is('.selected')) {
              AppendToEle.find('.divList.' + objToUse.project_name.toLowerCase()).parent().remove();
          } else {
              console.log('Error: list (' + objToUse.project_name.toLowerCase()+  ' ) already created!');
          }
          return;
      }

      var div = $('<div/>');
      div.append($('<ul/>', {class: 'divList ' + objToUse.project_name.toLowerCase()}).append($('<li/>', {value: objToUse.project_name, text: objToUse.project_name})
              .prepend('<span class="glyphicon glyphicon-triangle-bottom">&nbsp;</span>')).append($('<ul/>')));
      Object.values(objToUse.info).forEach(function(val) {
          div.find('ul:last').append($('<li/>', {value: val, text: val}));
      });
      div.find('ul:first').on('click', function(e) {
          var isVis = !$(this).find('ul').is(':visible');
          $(this).find('ul').toggle(isVis);
          $(this).find('span.glyphicon ').toggleClass('glyphicon glyphicon-triangle-top glyphicon glyphicon-triangle-bottom');
      })
      AppendToEle.append(div);
  }
}

var data = {
  project_name: 'Sales1',
  info: {
      Value1: 'Value1',
      Value2: 'Value2'
  }
};
var data1 = [{
  project_name: 'Sales2',
  info: {
      Value1: 'Value2',
      Value2: 'Value2'
  }
},
  {
      project_name: 'Sales1',
      info: {
          Value1: 'Value1',
          Value2: 'Value1'
      }
  }];


$('#projects-menu').append("<li  value='sales1'>Sales 1</li>")
$('#projects-menu').append("<li  value='sales2'>Sales 2</li>")


$(document).on('click', '#projects-menu > li', function (event) {
  event.preventDefault();
  if (event.ctrlKey) {

      // create the list on the fly......
      createList($('body'), data1, this.getAttribute('value'), this);


      if ($(this).hasClass('selected')) {
          $(this).removeClass('selected');
      } else {
          $(this).addClass("selected");
      }
  } else {
      $("#projects-menu > li").removeClass("selected");
      $(this).addClass("selected");
  }
});

ul.menu {
    margin-top: 30px;
    list-style-type: none;
}

ul.menu li {
    background-color: #e0e0e0;
    padding: 8px 12px;
    border: solid 2px white;
    cursor: pointer;
    border: 3px solid #FFFFFF;
    border-radius: 10px;
}

ul.menu li:hover {
    background-color: #A9A9A9;
}

ul.menu li.selected {
    background-color: #23ac61;
}

ul.menu li.disabled:hover {
    background-color: #e0e0e0;
    cursor: default;
}

ul.divList li {
    list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div class="projects">
    <ul class="menu" id="projects-menu">
    </ul>
</div>