javascript - jquery Treeview highlighting selected item - Stack Overflow

admin管理员组

文章数量:1426800

i read docs

also googled, but nothing found easy and good solution, how to highlighting the selected item. i use span so not redirect but nothing selected

i read docs

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

also googled, but nothing found easy and good solution, how to highlighting the selected item. i use span so not redirect but nothing selected

• javascript
• jquery
• treeview

Share Improve this question Follow asked Dec 31, 2010 at 12:51 kusanagikusanagi 14.6k2222 gold badges8989 silver badges112112 bronze badges 1

• What do you mean by the selected item? The item that was last clicked on? I would personally remend jstree as a jQuery plugin to handle trees like that since it has a larger and more extensive API structure. – Raynos Commented Dec 31, 2010 at 12:56

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

This code will work for highlighting the file in a treeview:

$(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');
            });
      });

In jquery.treeview.css:

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

You can select li items in the tree and add event listeners to them, like this:

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

Inside handler function 'this' word points to the clicked item. Or if by 'selecting' you mean something else, you can also listen desired event type like in example.

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

In the tree view, add an id tag to the added branches.

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

Then you can use jQuery highlight to highlight the selected node.

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

Or permanently change the style

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

It may be out of date but I got past it by adding the following under jqueryFileTree.js's FileTree function (version 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");
  });
}

本文标签： javascriptjquery Treeview highlighting selected itemStack Overflow