jquery Treeview выделение выбранного элемента

Question

я читаю документы

http://docs.jquery.com/Plugins/Treeview/treeview#options

тоже гуглил, но ничего не нашел легкого и хорошего решения, как выделить выделенный пункт. я использую span, чтобы не перенаправлять, но ничего не выбрано

Answer 1

Этот код будет работать для выделения файла в виде дерева:

$(document).ready(function(){
        $("#index").treeview();
          $('#index span.file').bind('click', function() {
              //clear all clicked items if any
              $('.selected').removeClass('selected');
              //set this clicked
              $(this).addClass('selected');
            });
      });

В jquery.treeview.css:

.treeview span.file.selected { background-color: #F0FFF0; }

Answer 2

Вы можете выбрать элементы li в дереве и добавить к ним прослушиватели событий, например:

$('#browser li.file').bind('click', function() {
  //clear all clicked items if any
  $('.clicked').removeClass('clicked');
  //set this clicked
  $(this).addClass('clicked');
})

Внутри функции обработчика слово «this» указывает на элемент, по которому щелкнули. Или, если под «выбором» вы подразумеваете что-то еще, вы также можете прослушать желаемый тип события, как в примере.

$('#browser li.file').bind('mouseover', function() {
 ... your code ...
})

Answer 3

В древовидном представлении добавьте тег id к добавленным ветвям.

"<li><span id="myNode1" class='file'>Item2</span></li>"

Затем вы можете использовать подсветку jQuery для выделения выбранного узла.

$("#myNode1").click(function () {
      $(this).effect("highlight", {}, 3000);
});

Или навсегда изменитьстиль

$('#myNode1').css('styleFloat');

Answer 4

Возможно, он устарел, но я справился с этим, добавив следующее в функцию FileTree jqueryFileTree.js (версия 2.14)

function FileTree(el, args, callback) {
  ...
  $el.delegate("li a", this.options.folderEvent, _this.onEvent);
  $el.delegate("li a", "click", function(event){
    $("#" + $el[0].id + " li a.selected").removeClass("selected");
    $(this).addClass("selected");
  });
}