jhfrench/bootstrap-tree

JavaScript and LESS/CSS for creating Bootstrap-themed trees (to display hierarchical data).

bootstrap-tree's Issues

How to use Multi-Select ?

Hey

I need to ask how to get multi-select configured in this bootstrap-tree ?

cannot compile against bootstrap 3.0

Running "less:dev" (less) task

Running "less:prod" (less) task

NameError: variable @BaseBorderRadius is undefined in less\bootstrap-tree.less on line 3, column 15:
2 .tree {
3 .border-radius(@BaseBorderRadius);
4 .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
Warning: Error compiling LESS. Use --force to continue.

Aborted due to warnings.

question

How would I start the folder list as closed instead of all open?

draggable items

what would be the best way to move the items to a new branch in the tree through draggable capabilities?

Design suggestion

Hi Jeromy,
I would like to suggest a modification to the styling, as I had pointed out in my comment here.

1. Instead of the child elements absolutely losing their colour on hovering the parent, It would be better (strictly my opinion) to highlight the paths of the child nodes which will be closed.
2. Or highlight the borders of the nodes to be closed instead of the whole background.

It seemed a bit buggy to me initially when I first saw it all those months ago, but I let it pass. I noticed your repo today, and thought I'll have a look. The tree is absolutely fantastic, except that one niggle which I just can't shake, so I thought I'd rather raise this issue for you to consider.

Thanks for your patience.
-- khs

Just a postive comment - no issue

This not actually an issue, but havn't yet found a way to comment on github

Just wanted to say that it looks great. I see no other issues etc listed here so wanted to pass a comment to show there is interested out there in case it motivates you take it further. Every few months I scan looking for a bootstrap tree - saw this on stackoverflow - currently using ajaxtree which isn't bootstrap styled but does what I need it to.

Yours looks awesome. I do need the javascript functionality of ajaxtree, so hoping someone else merges yours with ajaxtree before I need to :). I have nested sets and adjacency lists all over the place within my current project (yii php) and surprised there isn't already more good code out there for trees - a tingle of excitement after coming across yours.

Amazing all that achieved in just css!

Cheers

Depricated use of css selectors

http://caniuse.com/#search=%3A%3A

the use of "::" pseudo-selectors arent viable to all browsers.and is depricated.

Styling glitches

• Tree well shouldn't have a scroll bar. If I'm not wrong, this depends on the tree CSS class which in turn depends on bootstrap-tree which will need to be forked for this.
• Change the <pre> rendering of result failure description by a <p> with, perhaps, <br>s mapping to the new lines in the description. Aside of not looking that good, the <pre> somehow breaks the tree lines.
• Results section doesn't need to be a table, just a div, only the summary section.
• Collapse/Expand JS?
• Add bootstrap icons?
• Mouse over hints?
• Show number of tests for successful tests?

Expand and Collapse - All and at diffrent levels

This really ins't an issue but I wanted to contribute. I found your code but needed to do expand and collapse all. I ended up writing these two functions:

function toggleSingleElement(el){
	var children = $(el).parent('li.parent_li').find(' > ul > li');
    if (children.is(":visible")) {
        children.hide('fast');
        $(el).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
    } else {
        children.show('fast');
        $(el).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
    }
}

function globalToggle(element, selector){
	var addClass;
	var removeClass;
	var title;
	
	if($(element).find(' > i').hasClass('icon-minus-sign')){
		addClass = 'icon-plus-sign';
    	removeClass = 'icon-minus-sign';
    	title = 'Expand this branch';
	}else{
		addClass = 'icon-minus-sign';
    	removeClass = 'icon-plus-sign';
    	title = 'Collapse this branch';
	}
	
	$(element).attr('title', title).find(' > i').addClass(addClass).removeClass(removeClass);
	
	
	$(selector).each(function (index, value) {
		console.log('span' + index + ':' + $(this).attr('id'));
		toggleSingleElement(this);
	});
}

Then I added the following to my document ready:

$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
    
    $('.tree li.parent_li > span').on('click', function (e) {
    	toggleSingleElement(this);
        e.stopPropagation();
    });
    
    $('.app-toggle').on('click', function (e) {
    	globalToggle(this ,'.app-element');  	
    	
        e.stopPropagation();
    });
    
    $('.device-toggle').on('click', function (e) {
    	globalToggle(this ,'.device-element');  
    	
        e.stopPropagation();
    });

add bower

please add bower bootstrap tree

Update documentation

• Incorporate Bootstrap's documentation typography and layout
• Add <code> snippets after examples
• Flesh out "Usage" block

CheckBox support for bootstrap-tree

Dear Team,

Is there checkbox support for this tree?

I have a requirement to populate tree-view dynamically and tree-view should have check-boxes so that User can check some nodes and in the back-end I have to get those nodes that are checked.