arvindr21 / jstree-directive Goto Github PK
View Code? Open in Web Editor NEWAn Angular Directive for jsTree. Docs :
Home Page: http://jstree-directive.herokuapp.com/
An Angular Directive for jsTree. Docs :
Home Page: http://jstree-directive.herokuapp.com/
How to ignore capitalize in sort ?
Can you show example of using this directive?
Also with communication between this directive and other modules.
Hi, this could help you if you want to search using an input-text with Arvind's directive: http://jstree-directive.herokuapp.com/#/plugins
I used the Arvind's jsTree-directive example and I changed the tree-plugins attribute, putting equals to search and it works perfectly! :
Thanks Arvind!
Just wondering
when set tree-data="scope", the jsTree will not be initiated unless the scope data changes.
in the code you setup the watch, but the function will not be triggered until I call $scope.$apply() some where.
s.$watch(a.treeModel, function(o, n) {
if (n) {
config = {
'core': {
'data': s[a.treeModel]
}
};
$(e).jstree('destroy');
treeDir.init(s, e, a, config);
}
}, true);
so this example of my plunker. I did every step follow by doc but the custom menu doesn't work. Where is my problem?
Hi,
I would like to make static node, but i have problem , in my database i have maybe 5k records
Error is in this line jstree.min.js
if ("#" === r.id) return this.redraw(!0);
if (i = i || 0 === r.children.length, t = document.querySelector ? this.element[0].querySelector("#" + (-1 !== "0123456789".indexOf(r.id[0]) ? "\3" + r.id[0] + " " + r.id.substr(1).replace(e.jstree.idregex, "$&") : r.id.replace(e.jstree.idregex, "$&"))) : document.getElementById(r.id)) t = e(t), s || (n = t.parent().parent()[0], n === this.element[0] && (n = null), a = t.index()), i || !r.children.length || t.children(".jstree-children").length || (i = !0), i || (d = t.children(".jstree-children")[0]), p = t.attr("aria-selected"), f = t.children(".jstree-anchor")[0] === document.activeElement, t.remove();
what can i do ?
When i include this in my project i got the error as follows:
TypeError: undefined is not a function
at Object.treeDir.init (jsTree.directive.js:131)
at jsTree.directive.js:99
at jsTree.directive.js:16
at deferred.promise.then.wrappedCallback (angular.js:11573)
at deferred.promise.then.wrappedCallback (angular.js:11573)
at angular.js:11659
at Scope.$get.Scope.$eval (angular.js:12702)
at Scope.$get.Scope.$digest (angular.js:12514)
at Scope.$get.Scope.$apply (angular.js:12806)
at done (angular.js:8379)
Code:
It will be great if you will add another option for the data source to be 'model' for example.
With this option, the data will be an array in the scope that will be passed to the directive. The directive will watch on it also will refresh the tree content every time the data is changed.
If i try to use an $resource (ngResource) object as model, i get following error:
RangeError: Maximum call stack size exceeded
at Array.toString (native)
Using simple json, seems not to be a problem. Im wondering how shpul i use such object with the jsTree?
If multiple trees are loaded and one of them will have the state parameter.
Errors between the trees occur when traverses the same folders.
TypeError: a.state is undefined
...d:function(a){return a=this.get_node(a),a&&a.state.loaded},is_loading:function(a...
or
TypeError: this._model.data[b].state is undefined
...model.data.hasOwnProperty(b)&&"#"!==b&&(this._model.data[b].state.opened&&a.core...
Hi, is there any way to retrieve the jstree instance in the controller so that I can use the jsTree API?
My problem is that I have multiple trees in a page and when I select one folder I would like to deselect any selected folder in the other trees. I think it could work by calling the "deselect_all" method in each tree.
It would be good if you could bind the instance with a scope variable:
<js-tree tree-instance="myTree" ...>
Thanks.
Hi, I want to use the out-of-box search box, but I would like to have it on the top of the tree. Is it possible to make it configurable?
Thanks,
-ZJ
Is it possible to bind double click event from controller ?
I followed vakata/jstree#515, but double click event was not fired.
`
var myApp = angular.module('myApp', [ 'jsTree.directive']);
myApp.controller('mainController', function($scope) {
// jstree double click event
// vakata/jstree#515
$(function() {
console.log( "ready!", $('#mytree') );
$('#mytree').on('dblclick','.jstree-anchor', function (e) {
alert("double click fired");
});
});
})
`
Hi arvindr21 !
First problem is : I have tree with data and if some children are selected ,then root is opened .Root is open although his state is "opened = false"
Second problem is : Scope is not updating when i would like select a checkbox
Could you fix the problem ?
Regards
Simon
I load the tree : "js-tree tree-plugins="wholerow,dnd" tree-ajax="api/v1/apps/files_tree"></js-tree"
My backend emit this json:
[{"text": "Child Node 1", "a_attr": {"b-prop": false, "a-prop": false}, "children": true, "state": {"disabled": false, "selected": true, "opened": false}, "id": 2, "li_attr": {"x-prop": false, "y-prop": false}}, {"text": "Child Node 2", "state": {"disabled": false, "selected": false, "opened": false}, "children": true, "id": 3, "icon": "/jstree/imgs/tree.png"}]
And i get this error from jquery 2.1.3:
Error: Syntax error, unrecognized expression: [{"text": "Root Node 1", "a_attr": {"b-prop": true, "a-prop": true}, "children": true, "state": {"disabled": false, "selected": true, "opened": false}, "id": "tree_id_1", "li_attr": {"x-prop": true, "y-prop": true}, "icon": "/jstree/imgs/tree.png"}, {"text": "Root Node 2", "a_attr": {"b-prop": false, "a-prop": false}, "children": true, "state": {"disabled": false, "selected": false, "opened": false}, "id": "tree_id_2", "li_attr": {"x-prop": false, "y-prop": false}}]
throw new Error( "Syntax error, unrecognized expression: " + msg );
With tree-json everything is ok but not with tree-ajax ...
I use jstree 3.0.9
Hi, I am using jsTree directive for my project and I have found that when the tree is refreshed/ reloaded multiple times, it causes the browser tab to crash regardless of the size of tree. The issue is even reproduced on the http://jstree-directive.herokuapp.com mentioned on your git repository as shown in the gif attached.
Is there a way to manage errors from backend on tree-ajax url call ?
Could you provide examples on the documentation ?
Thanks
So sorry. This is not an issue but I do not know where to put this kind of questions.
What I try to do is to select a specific Node in the tree using a function inside the controller so.
$scope.SelectNode = function() {
var item = _.findWhere($scope.treeData, { id : $scope.selectedNodeId } );
//And Here I need to select the node in the tree so the user knows what s/he is looking at. Samething like item.select =true.
};
I try to use $scope.treeData.jstree("select_node", $scope.selectedNodeId); but it is not working I get the error TypeError: $scope.treeData.jstree is not a function
I really need help!
Best Regards
Henry
In case of large tree, search input box positioning before tree-view is better.
I want position search input box before jstree. I have tried to change position, but not worked.
from :
e.after(<input type="text" placeholder="Search Tree" class="ng-tree-search"/>
)
to:
e.before(<input type="text" placeholder="Search Tree" class="ng-tree-search"/>
)
Hi , I'm using the directive by looking at the example. In my application I upload a file by pressing a button. Then tree should update the graphic tree of files, but I have to refresh the entire page in order to see the changes in dir tree. Is there any way by using your directive to refresh the tree ? Thanks in advance
I have 2 instances of jstree.
var selectedNode = $('js-tree').jstree(true).get_selected(true)[0];
var parentNodeId = $('js-tree').jstree("get_parent",selectedNode);
but parentNodeId is returning false.
It does not understand which tree is it on.
I have this tree:
In my controller :
$scope.openNodeCB = function(e, data) {
console.log('open-node event call back');
};
And nothing log .... :(
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.