I am using the jQuery tree from here https://github.com/pioz/jquery-tree#readme
The problem is rendering of the tree when I do a cookie save. When it comes time to re-render it, the code doesnt work correctly if I dont follow a specific way of putting the ordered lists.
I guess best is to take a look at this demo code I put up.
http://jsbin.com/emaku4/23
- The entire tree is open
- Click on Level 3 arrow to expand (for both trees)
- Do a refresh
Now, the first tree renders correctly again with cookies showing what was open previously but the 2nd tree doesnt. I think it's because on the 2nd one, I put the one without sublevels on top of the one with sublevels (the one called THIS IS THE DIFFERENCE).
Is there a way to adjust the code in so it can render view correctly using cookies no matter what order I have in any of the sublevels?
// Require jQuery
// Use jQuery.cookie if you want to restore the previous expansion of the tree
jQuery.fn.tree = function(options) {
// Setup default options
/** Avaiable options are:
* - open_char: defeault character to display on open node in tree
* - close_char: defeault character to display on close node in tree
* - default_expanded_paths_string: if no cookie found the tree will be expand with this paths string
**/
if(options === undefined || options === null)
options = {};
var open_char = options.open_char;
var close_char = options.close_char;
var default_expanded_paths_string = options.default_expanded_paths_string;
if(open_char === undefined || open_char === null)
open_char = '▼';
if(close_char === undefined || close_char === null)
close_char = '►';
if(default_expanded_paths_string === undefined || default_expanded_paths_string === null)
default_expanded_paths_string = '0';
// Get the expanded paths from the current state of tree
jQuery.fn.save_paths = function() {
var paths = [];
var path = [];
var open_nodes = jQuery(this).find('li span.open');
var last_depth = null;
for(var i = 0; i < open_nodes.length; i++) {
var depth = jQuery(open_nodes[i]).parents('ul').length-1;
if((last_depth == null && depth > 0) || (depth > last_depth && depth-last_depth > 1))
continue;
var pos = jQuery(open_nodes[i]).parent().prevAll().length;
if(last_depth == null) {
path = [pos];
} else if(depth < last_depth) {
paths.push(path.join('/'));
var diff = last_depth - depth;
path.splice(path.length-diff-1, diff+1);
path.push(pos);
} else if(depth == last_depth) 开发者_JAVA百科{
paths.push(path.join('/'));
path.splice(path.length-1, 1);
path.push(pos);
} else if(depth > last_depth) {
path.push(pos);
}
last_depth = depth;
}
paths.push(path.join('/'));
try { jQuery.cookie(this.attr('class'), paths.join(',')); }
catch(e) {}
};
// This function expand the tree with 'path'
jQuery.fn.restore_paths = function() {
var paths_string = null;
try { paths_string = jQuery.cookie(this.attr('class')); }
catch(e) { paths_string = default_expanded_paths_string; }
if(paths_string === null || paths_string === undefined)
paths_string = default_expanded_paths_string;
var paths = paths_string.split(',');
for(var i = 0; i < paths.length; i++) {
var obj = jQuery(this);
var path = paths[i].split('/');
for(var j = 0; j < path.length; j++) {
obj = jQuery(obj.children('li').children('ul')[path[j]]);
obj.show();
obj.parent().children('span').attr('class', 'open');
obj.parent().children('span').html(open_char);
}
}
};
for(var i = 0; i < this.length; i++) {
if(this[i].tagName === 'UL') {
// Make a tree
jQuery(this[i]).find('li').has('ul').prepend('<span class="close" style="cursor:pointer;">' + close_char + '</span>');
jQuery(this[i]).find('ul').hide();
// Restore cookie expand path
jQuery(this[i]).restore_paths();
// Click event
jQuery(this[i]).find('span').live('click', {tree : this[i]}, function(e) {
if (jQuery(this).attr('class') == 'open') {
jQuery(this).parent().children('ul').hide('slow');
jQuery(this).attr('class', 'close');
jQuery(this).html(close_char);
} else if (jQuery(this).attr('class') == 'close') {
jQuery(this).parent().children('ul').show('slow');
jQuery(this).attr('class', 'open');
jQuery(this).html(open_char);
}
jQuery(e.data.tree).save_paths();
});
}
}
}
The issue is in line 34 of jquery.tree.js (within jQuery.fn.save_paths()
):
var pos = jQuery(open_nodes[i]).parent().prevAll().length;
open_nodes[i]
is the open/close span
, its parent is a li
, and so with prevAll()
it's counting the number of previous li
s.
But further down in line 68 (within jQuery.fn.restore_paths()
):
obj = jQuery(obj.children('li').children('ul')[path[j]]);
it's using the saved position from save_paths()
to find the nth ul
.
So in your case, after you expand the first (and only) ul
, save_paths()
remembers 1
(since there is 1 li
before the ul
), but when you reload the page, restore_paths()
tried to expand the "second" ul
(the first is 0
, a second ul
is 1
).
Hmm, I don't think I'm explaining this very well...
Anyway, the solution is to change line 34 from this:
var pos = jQuery(open_nodes[i]).parent().prevAll().length;
to this:
var pos = jQuery(open_nodes[i]).parent().prevAll(':has(">ul")').length;
This will make sure it skips li
s that don't have a nested ul
when calculating the current ul
's position.
I've submitted a pull request to pioz with this fix. In the meantime, you can use the fixed version from my fork: https://github.com/jefferyto/jquery-tree/raw/counting-fix/jquery.tree.js.
You can see it working here: http://jsbin.com/emaku4/28
Update: pioz has committed a (different) fix. You can download the working code at https://github.com/pioz/jquery-tree. Thanks pioz!
Look at this: http://docs.jquery.com/Plugins/Treeview/treeview
Set persist option for the cookie like this:
$(".selector").treeview({
persist: "cookie"
});
It is an easier way to render a tree view.
精彩评论