jsTree documentation

페이지 정보

작성자 서방님 댓글 0건 조회 94회 작성일 19-04-15 10:39

본문

Using jsTree

Including the files

First of all, as jsTree is a jQuery component, you need to include jQuery itself. Currently jsTree uses version 1.3.2 (the latest as of 14.Sept.2009)

<script type="text/javascript" src="source/lib/jquery.js"></script>

Then you need to include jsTree:

<script type="text/javascript" src="source/jquery.tree.js"></script>

Or you could use the minified version:

<script type="text/javascript" src="source/jquery.tree.min.js"></script>

You may change the path to whatever you like, but it is recommended not to rename jquery.tree.js or jquery.tree.min.jsas the filenames are used in path autodetection. If you decide to rename them make sure you set the theme_path config option, so that jsTree succesfully includes your chosen theme (you also MUST set this option if you decide to move the folder of your chosen theme out of jstree-location/themes/).

Additionally you may decide to include some of the plugins from the plugins/ folder. If you do that the first time you open a page the plugin you loaded will alert you about missing dependancies - they can all be found lib/ folder.

Creating an instance

You can create an instance in one of two ways. Make sure that you do not use an <ul> node for the container node.

Method 1:

jQuery("selector-to-container-node-here").tree( options ^* );

* You may pass the configuration options as a parameter to the tree() function. Detailed information about configuring can be found below.

If you use this method, to get the address the instance you just created use this code:

jQuery.tree.reference( selector ^* );

* Selector can be: the ID of the container node, the ID of any contained DOM element, an actual DOM element contained within the tree, or a jQuery extended DOM node container within the tree

Method 2:

var your-tree-var = jQuery.tree.create(); your-tree-var.init( options ^* )

* You may pass the configuration options as a parameter to the init() function. Detailed information about configuring can be found below.

If you use this method, the your-tree-var is a reference to the instance. You can still use jQuery.tree.reference(). A note regarding IE8 - it has been known to cause some trouble if you use tree as variable name, so please don't.

Configuration

The object storing all default values for newly created instances can be found in jQuery.tree.defaults. If you extend or modify the object, all instances created after the modification will use the modified object as default settings. When configuring an instance only pass those values, that are different from the defaults.

data`Object`

This section of the config stores all data source related settings.

data.async`Boolean`

If this is set to true a request will be made each time a closed node is opened, and its data is not yet loaded.

Default is false.

data.type`String`

A string specifying one of the included datastores ("html" and "json" are in the main source file (jquery.tree.js) and "xml_flat" and "xml_nested" are available in the plugins/ directory).

Default is "html".

data.opts`Object`

An object specifying all the options for the chosen datastore.

Default is { method: "GET", url: false }.

data.opts.method`String`

The method used when querying the server for data. Either "GET" or "POST". Keep in mind that while all included datastore plugins respect this setting, other third party datastore plugins may choose not to.

Default is "GET".

data.opts.url`String`

The URL used when querying the server for data. You may specify GET parameters here, or use the beforedatacallback.

Default is false.

selected`mixed`

A single node ID, or a list of node IDs to be initially selected when the tree first loads. Either a String, an Array or false.

Default is false.

opened`Array`

An array of node IDs to be initially opened when the tree first loads.

Default is [].

languages`Array`

An array of string values, each one representing a language. Keep in mind those string will be used internally for CSS classes, so each string must be a valid CSS classname (a safe approach is to use typical language codes "en", "de", etc).

Default is [].

ui`Object`

This section of the config stores various user interface related settings.

ui.dots`Boolean`

Should the tree have guiding dots or not.

Default is true.

ui.animation`Integer`

The duration in milliseconds of the open/close animation.

Default is 0 (meaning no animation).

ui.scroll_spd`Integer`

When dragging near the edge of the tree container it scrolls if neccessary. This setting controls the speed of the scroll.

Default is 4.

ui.selected_parent_close`mixed`

This option specifies the behavior of the tree when a parent of a selected node is closed. The options are "select_parent" - which deselects the selected node and selects the closed one (similar to windows explorer), "deselect" - only deselects the selected node or false - does nothing.

Default is "select_parent".

ui.selected_delete`mixed`

This option specifies the behavior of the tree when a selected node is deleted. The options are "select_previous" - which selects the previous node (similar to windows explorer) or false - does nothing.

Default is "select_previous".

ui.theme_path`String`

The folder where jsTree's themes are located. If this is set to false, jsTree will autodetect the folder using its own folder location and appending themes/ at the end.

Default is false (meaning autodetect).

ui.theme_name`String`

The theme to use. If set to false no theme is loaded.

Default is "default".

types`Object`

This section of the config stores all defined node types and their possible interactions. Each setting (except for icon) may be set to a function - if so whenever a user interaction is evaluated this function will be invoked and will receive two arguments - the node that is being checked and the tree instance. In any new types you define you may only supply the rules that are different from the default type.

By default only the "default" node type is defined:

{
	"default" : {
		clickable	: true,
		renameable	: true,
		deletable	: true,
		creatable	: true,
		draggable	: true,
		max_children	: -1,
		max_depth	: -1,
		valid_children	: "all",

		icon : {
			image : false,
			position : false
		}
	}
}

type.clickable`mixed`

Are nodes of this type clickable. Boolean or Function.

type.renameable`mixed`

Are nodes of this type renameable. Boolean or Function.

type.deletable`mixed`

Are nodes of this type deletable. Boolean or Function.

type.creatable`mixed`

Can new nodes be created in nodes of that type. Boolean or Function.

type.draggable`mixed`

Are nodes of this type draggable. Boolean or Function.

type.max_children`mixed`

The maximum number of direct children allowed in this type of node. -1 means unlimited amount of direct children, 0means no children are allowed, 1 means maximum one child is allowed, etc. Integer or Function.

type.max_depth`mixed`

The maximum number of levels below this type of node. -1 means unlimited amount of levels, 0 means no children are allowed, 1 means maximum one level is allowed, etc. Integer or Function.

type.valid_children`mixed`

Types of nodes allowed inside this type of node. Can be an Array of string values (one for each allowed type), if set to String "all" nodes of any type can be children of a nodes of this type. Can also be a Function

type.icon`Object`

An optional configuration of the icon used for that node type. If using a sprite (a big image with a lot of icons in it) define the image property on the "default" node type and for all other types just define the position property. Keep in mind IE6 is not supported (internally this uses a node[attribute=value] > node selector).

Default is: { image : false, position : false }, which means the icon is defined in the theme.

rules`Object`

This section is for defining a few rules for the whole tree.

rules.multiple`mixed`

This controls multiple selection. Can be either false - multiple selection is off, "ctrl" - multiple selection is on when the Ctrl key is held down or "on" - multiple selection is always on.

Default is: "ctrl"

rules.multitree`mixed`

This controls accepting nodes from other trees. Can be either "none" - will not accept any nodes from any tree, "all" - will accept from any tree or Array - an array of strings, each one representing the ID of the container of a tree to accept from.

Default is: "none"

rules.type_attr`String`

The attribute to read the type of the node from.

Default is: "rel"

rules.createat`String`

Specifies the default location to insert new nodes at - at the top amongst the parent node's children or at the bottom. Also controls what happens if a node is dropped onto another node. Should be either "top" or "bottom".

Default is: "bottom"

rules.drag_copy`mixed`

This controls how to copy when dragging. Can be either false - when the user drags a move is always performed, "ctrl" - a copy is made if the Ctrl key is held down or "on" - the drag always results in a copy.

Default is: "ctrl"

rules.drag_button`String`

This controls which button initiates a drag. Can be either "left", "right" or "both".

Default is: "left"

rules.use_max_children`Boolean`

Should max_children rules be checked when moving/copying nodes.

Default is: true

rules.use_max_depth`Boolean`

Should max_depth rules be checked when moving/copying nodes.

Default is: true

type.max_children`Integer`

The maximum number of root nodes allowed. -1 means unlimited amount of root nodes, 1 means maximum one root node is allowed, etc.

Default is: -1

type.max_depth`Integer`

The maximum number of levels. -1 means unlimited amount of levels, 1 means maximum one level is allowed, etc.

Default is: -1

type.valid_children`mixed`

Types of nodes allowed as root nodes. Can be an Array of string values (one for each allowed type), if set to String"all" nodes of any type can be root nodes.

Default is: "all"

langs`Object`

This section of the config stores various settings related to languages.

lang.new_node`mixed`

The default name for newly created nodes (if the new name is not specified on creation). Can be a String or an Arrayof strings for each defined language. If you use multiple languages but set this to a single string - it will be used in all languages.

Default is "New folder".

lang.loading`String`

The string displayed when loading content from the server.

Default is "Loading ...".

callback`Object`

This section is for defining all callback functions which fire on various events.

callback.beforechangeShould return: `Boolean`

Triggered before selection changes. Receives two parameters - the node involved in the event and a reference to the tree instance. If false is returned selection is not changed.

Default is: function(NODE, TREE_OBJ) { return true }

callback.beforeopenShould return: `Boolean`

Triggered before opening a node. Receives two parameters - the node about to be opened and a reference to the tree instance. If false is returned the node is not opened.

Default is: function(NODE, TREE_OBJ) { return true }

callback.beforecloseShould return: `Boolean`

Triggered before closing a node. Receives two parameters - the node about to be closed and a reference to the tree instance. If false is returned the node is not closed.

Default is: function(NODE, TREE_OBJ) { return true }

callback.beforemoveShould return: `Boolean`

Triggered before moving a node. Receives four parameters - the node about to be moved, the reference node in the move, the new position relative to the reference node (one of "before", "after" or "inside") and a reference to the tree instance. If false is returned the node is not moved.

Default is: function(NODE, REF_NODE, TYPE, TREE_OBJ) { return true }

callback.beforecreateShould return: `Boolean`

Triggered before creating a node. Receives four parameters - the node about to be created, the reference node in the creation, the new position relative to the reference node (one of "before", "after" or "inside") and a reference to the tree instance. If false is returned the node is not created.

Default is: function(NODE, REF_NODE, TYPE, TREE_OBJ) { return true }

callback.beforerenameShould return: `Boolean`

Triggered before renaming a node. Receives three parameters - the node about to be renamed, the current language and a reference to the tree instance. If false is returned the node is not renamed.

Default is: function(NODE, LANG, TREE_OBJ) { return true }

callback.beforedeleteShould return: `Boolean`

Triggered before deleting a node. Receives two parameters - the node about to be deleted and a reference to the tree instance. If false is returned the node is not deleted.

Default is: function(NODE, TREE_OBJ) { return true }

callback.beforedataShould return: `Object`

Used for passing custom parameters to the server. Receives two parameters - a node (if applicable) and a reference to the tree instance.

Default is: function(NODE, TREE_OBJ) { return { id : $(NODE).attr("id") || 0 } }

callback.ondataShould return: `mixed`

Used for modifying the data received from the server before parsing it.

Default is: function(DATA, TREE_OBJ) { return DATA; }

callback.onparseShould return: `String`

Used for modifying the HTML about to be inserted in the DOM before actually inserting it.

Default is: function(STR, TREE_OBJ) { return STR; }

callback.onhover

Triggered when a node is hovered. Receives two parameters - the hovered node and a reference to the tree instance.

Default is: function(NODE, TREE_OBJ) { }

callback.onselect

Triggered when a node is selected. Receives two parameters - the selected node and a reference to the tree instance.

Default is: function(NODE, TREE_OBJ) { }

callback.ondeselect

Triggered when a node is deselected. Receives two parameters - the deselected node and a reference to the tree instance.

Default is: function(NODE, TREE_OBJ) { }

callback.onchange

Triggered when selection is changed in any way (select or deselect). Receives two parameters - the node involved and a reference to the tree instance.

Default is: function(NODE, TREE_OBJ) { }

callback.onrename

Triggered when a node is renamed. Receives three parameters - the renamed node, a reference to the tree instance and a rollback object that you can use with jQuery.tree.rollback.

Default is: function(NODE, TREE_OBJ, RB) { }

callback.onmove

Triggered when a node is moved. Receives five parameters - the node that was moved, the reference node in the move, the new position relative to the reference node (one of "before", "after" or "inside"), a reference to the tree instance and a rollback object that you can use with jQuery.tree.rollback.

Default is: function(NODE, REF_NODE, TYPE, TREE_OBJ, RB) { }

callback.oncopy

Triggered when a node is copied. Receives five parameters - the node that was copied, the reference node in the copy, the new position relative to the reference node (one of "before", "after" or "inside"), a reference to the tree instance and a rollback object that you can use with jQuery.tree.rollback.

Default is: function(NODE, REF_NODE, TYPE, TREE_OBJ, RB) { }

callback.oncreate

Triggered when a node is created. Receives five parameters - the node that was created, the reference node in the create operation, the new position relative to the reference node (one of "before", "after" or "inside"), a reference to the tree instance and a rollback object that you can use with jQuery.tree.rollback.

Default is: function(NODE, REF_NODE, TYPE, TREE_OBJ, RB) { }

callback.ondelete

Triggered when a node is deleted. Receives three parameters - the node that was deleted, a reference to the tree instance and a rollback object that you can use with jQuery.tree.rollback.

Default is: function(NODE, TREE_OBJ, RB) { }

callback.onopen

Triggered when a node is opened. Receives two parameters - the node that was opened and a reference to the tree instance.

Default is: function(NODE, TREE_OBJ) { }

callback.onopen_all

Triggered when a open_all operation completes. Receives one parameter - a reference to the tree instance.

Default is: function(TREE_OBJ) { }

callback.onclose

Triggered when a node is closed. Receives two parameters - the node that was closed and a reference to the tree instance.

Default is: function(NODE, TREE_OBJ) { }

callback.onclose_all

Triggered when a close_all operation completes. Receives one parameter - a reference to the tree instance.

Default is: function(TREE_OBJ) { }

callback.error

Triggered when an error occurs. Receives two parameters - the error string and a reference to the tree instance.

Default is: function(TEXT, TREE_OBJ) { }

callback.ondblclk

Triggered when a node is doubleclicked. Receives two parameters - the node that was doubleclicked and a reference to the tree instance.

Default is:

function(NODE, TREE_OBJ) { 
	TREE_OBJ.toggle_branch.call(TREE_OBJ, NODE);
	TREE_OBJ.select_branch.call(TREE_OBJ, NODE);
}

callback.onrgtclk

Triggered when a node is rightclicked. Receives three parameters - the node that was rightclicked, a reference to the tree instance and the event object. To prevent the browser menu use:

function(NODE, TREE_OBJ, EV) { 
	EV.preventDefault(); 
	EV.stopPropagation(); 
	return false; 
}

Default is: function(NODE, TREE_OBJ, EV) { }

callback.onload

Triggered when the tree is loaded with data for the first time or refreshed. Receives one parameter - a reference to the tree instance.

Default is: function(TREE_OBJ) { }

callback.oninit

Triggered when the tree is initialized and before any data is requested or parsed. Receives one parameter - a reference to the tree instance.

Default is: function(TREE_OBJ) { }

callback.onfocus

Triggered when the tree is focused. When creating a new tree it is always focused and the callback fires after oninit, but if a data request should be made to the server - possibly before onload. Receives one parameter - a reference to the tree instance.

Default is: function(TREE_OBJ) { }

callback.ondestroy

Triggered before the tree is destroyed. Receives one parameter - a reference to the tree instance.

Default is: function(TREE_OBJ) { }

callback.onsearch

Triggered after a search is performed and results are ready. Receives two parameters - a jQuery collection of nodes matching the search and a reference to the tree instance.

Default is: function(NODES, TREE_OBJ) { NODES.addClass("search"); }

callback.ondrop

Triggered when a foreign node is dropped on the tree. Receives four parameters - the foreign node that was dropped, the reference node in the move, the new position relative to the reference node (one of "before", "after" or "inside") and a reference to the tree instance.

Default is: function(NODE, REF_NODE, TYPE, TREE_OBJ) { }

callback.check

Triggered when a node is checked for a certain rule. Receives four parameters - the rule that is checked, the node that is checked, the value computed so far (as the callback is called last - before that types are evaluated) and a reference to the tree instance.

Default is: function(RULE,NODE,VALUE,TREE_OBJ) { return VALUE; }

callback.check_moveShould return: `Boolean`

Triggered when a move is evaluated. Receives four parameters - the node that is moved, the reference node in the move, the new position relative to the reference node (one of "before", "after" or "inside") and a reference to the tree instance.

Default is: function(NODE, REF_NODE, TYPE, TREE_OBJ) { return true; }

plugins`Object`

This section is for defining active plugins on the instance. Each plugin is a key in this object, and corresponding to that key is the options object for the plugin. For example:

plugins : {
	"plugin-name" : { plugin-option-one : "value", plugin-option-two : { } }
	"second-plugin" : { } // This just activates the plugin without modifying its defaults.
}

Default is: { }

Datastores

In this section you will find the data format description of the two bundled datasources.

HTML

The simplest of datastores. Used when you need to converted a nested list into an interactive tree. The required structure is as follows:

<some-container-node>
	<ul>
		<li id="node-identificator" rel="node-type">
			<a href="#"><ins>&nbsp;</ins>Root node</a>
			<ul>
				<li id="node-identificator" rel="node-type">
					<a href="#"><ins>&nbsp;</ins>Child node</a>
				</li>
			</ul>
		</li>
	</ul>
</some-container-node>

You can have whatever attributes you like in any of the elements. Also keep in mind that the node ID and type can be omitted and the node type may be stored in some other attribute if you decide to configure it (check the type_attr section).

If you use language versions you will have multiple <a> (one for each language) elements inside any <li> element, they must have a language code (one of the codes defined in the langauges section of the config) for a classname. Like so:

<li id="n

댓글목록

등록된 댓글이 없습니다.

번호	제목	글쓴이	조회	날짜
열람중	jsTree documentation	서방님	95	04-15
162	탐색기	서방님	83	04-11
161	메인 인기상품 롤링	서방님	1	03-19
160	메인화면 돌출형 상품 무한 롤링 (마우스 휠, 키보드 지원)	서방님	1	03-19
159	AJAX 를 동기(Sync) 방식으로 사용하기	서방님	93	02-12
158	다음 지도 API	서방님	256	01-29
157	거래소 API 시세정보 및 알람 표시 HTML 예제 코드	서방님	1	12-19
156	div 객체에 focus 지정 (포커스)	서방님	143	11-20
155	자바스크립트 정규표현식 - 영문, 숫자만 허용하는 정규표현식	서방님	773	10-24
154	체크박스 체크된 것만 넘기기	서방님	400	10-19
153	셀렉트박스, $(this) 로 선택된 text 불러오기	서방님	142	10-19
152	jquery에서 체크된 체크박스의 순서 가져오기(index)	서방님	279	10-18
151	애드블록 차단시 메세지 출력	서방님	1	10-17
150	체크박스, 라디오버튼 컨트롤	서방님	127	10-10
149	상단 배너 소스	서방님	218	09-14

jsTree documentation > jquery

인기검색어

jquery

페이지 정보

본문

Using jsTree

Including the files

Creating an instance

Method 1:

Method 2:

Configuration

dataObject

data.asyncBoolean

data.typeString

data.optsObject

data.opts.methodString

data.opts.urlString

selectedmixed

openedArray

languagesArray

uiObject

ui.dotsBoolean

ui.animationInteger

ui.scroll_spdInteger

ui.selected_parent_closemixed

ui.selected_deletemixed

ui.theme_pathString

ui.theme_nameString

typesObject

type.clickablemixed

type.renameablemixed

type.deletablemixed

type.creatablemixed

type.draggablemixed

type.max_childrenmixed

type.max_depthmixed

type.valid_childrenmixed

type.iconObject

rulesObject

rules.multiplemixed

rules.multitreemixed

rules.type_attrString

rules.createatString

rules.drag_copymixed

rules.drag_buttonString

rules.use_max_childrenBoolean

rules.use_max_depthBoolean

type.max_childrenInteger

type.max_depthInteger

type.valid_childrenmixed

langsObject

lang.new_nodemixed

lang.loadingString

callbackObject

callback.beforechangeShould return: Boolean

callback.beforeopenShould return: Boolean

callback.beforecloseShould return: Boolean

callback.beforemoveShould return: Boolean

callback.beforecreateShould return: Boolean

callback.beforerenameShould return: Boolean

callback.beforedeleteShould return: Boolean

callback.beforedataShould return: Object

callback.ondataShould return: mixed

callback.onparseShould return: String

callback.onhover

callback.onselect

callback.ondeselect

callback.onchange

callback.onrename

callback.onmove

callback.oncopy

callback.oncreate

callback.ondelete

callback.onopen

callback.onopen_all

callback.onclose

callback.onclose_all

callback.error

callback.ondblclk

callback.onrgtclk

data`Object`

data.async`Boolean`

data.type`String`

data.opts`Object`

data.opts.method`String`

data.opts.url`String`

selected`mixed`

opened`Array`

languages`Array`

ui`Object`

ui.dots`Boolean`

ui.animation`Integer`

ui.scroll_spd`Integer`

ui.selected_parent_close`mixed`

ui.selected_delete`mixed`

ui.theme_path`String`

ui.theme_name`String`

types`Object`

type.clickable`mixed`

type.renameable`mixed`

type.deletable`mixed`

type.creatable`mixed`

type.draggable`mixed`

type.max_children`mixed`

type.max_depth`mixed`

type.valid_children`mixed`

type.icon`Object`

rules`Object`

rules.multiple`mixed`

rules.multitree`mixed`

rules.type_attr`String`

rules.createat`String`

rules.drag_copy`mixed`

rules.drag_button`String`

rules.use_max_children`Boolean`

rules.use_max_depth`Boolean`

type.max_children`Integer`

type.max_depth`Integer`

type.valid_children`mixed`

langs`Object`

lang.new_node`mixed`

lang.loading`String`

callback`Object`

callback.beforechangeShould return: `Boolean`

callback.beforeopenShould return: `Boolean`

callback.beforecloseShould return: `Boolean`

callback.beforemoveShould return: `Boolean`

callback.beforecreateShould return: `Boolean`

callback.beforerenameShould return: `Boolean`

callback.beforedeleteShould return: `Boolean`

callback.beforedataShould return: `Object`

callback.ondataShould return: `mixed`

callback.onparseShould return: `String`

callback.check_moveShould return: `Boolean`

plugins`Object`