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

Posted 2023-05-08

【中文标题】基于li列表选择和Json数据创建Treeview

【英文标题】：Create Treeview based on li list selection and Json data

【发布时间】：2020-12-23 23:42:33

【问题描述】：

我有一个场景使用 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>

所需的输出

【参考方案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>

【讨论】：

@kavya 完成。在 CTRL+CLICK 上，根据选择类添加或删除列表