Блог

Главная - Вопросы по программированию - Создание Treeview на основе выбора списка li и данных Json

Создание Treeview на основе выбора списка li и данных Json

#javascript #html #jquery #css #json

#javascript #HTML #jquery #css #json

Вопрос:

У меня есть сценарий для создания древовидного представления со списком элементов в ul li и данных json, на основе моего выбора элемента списка должно быть создано древовидное представление.В иерархии древовидного представления первым уровнем будут выбранные элементы из списка, а соответствующим следующим уровнем будут значения из данных json.пожалуйста, помогите мне с этим.

Я опубликовал ВЫВОД treeview с элементами 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: defau<
}  
 <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:

  • 1-й аргумент: куда добавить вновь созданный список
  • 2-й аргумент: объект или массив объектов
  • 3-й аргумент: значение элемента, на который нажимают, для поиска внутри объекта.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">amp;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: defau<
}

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>

Комментарии:

1. @kavya Готово. При нажатии CTRL список добавляется или удаляется в соответствии с классом выбора