본문 바로가기
Library & Framework/jsTree

[jsTree] plugin wholerow 사용하여 tree node 편하게 클릭 하기

by 썸머워즈 2021. 1. 3.
반응형

jstree 에서 제공하는 plugin중에 하나인 wholerow plugin 에 대해 알아보자.

이번에 알아볼 wholerow는 사실 가볍게 사용할 수 있는거라 그렇게 어렵지않다.

 

$('#tree').jstree({ 
	'core' : {
	'data' : [
			{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
			{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
			{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
			{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
		]
	},	
	'plugins' : ["wholerow"],
});

 

이렇게 그냥 plugins 부분에 wholerow만 선언해주고 사용하면 된다.

무슨 기능이냐 하면 공식홈에서 안내해주는것처럼

 

Makes each node appear block level which makes selection easier. May cause slow down for large trees in old browsers.

 

tree node 클릭을 편하게 해주기 위함이라고 생각하면 된다.

(단점은 데이터가 많아지면 속도가 느려질 수 있다는 점이며)

 

비교를 해보자면 일반적으로 아래와 같이 node에 마우스를 올려놔야 클릭이 가능하지만



wholerow를 사용하게 되면 아래와 같이 node row에 마우스를 올려놓기만해도 클릭이 가능하다.



개인적으로 단점이라 생각되는 점은 node 옆 트리 표시가 나타나지 않는다는 점일까나?

반응형


댓글

TOP