jquery.jstree는 node_jquery의 두 번 클릭 이벤트 코드를 추가합니다.

jsTree는 드래그 앤 드롭, 복사, 삭제, 단축키, 다중 선택, 사용자 정의 노드 아이콘, 사용자 정의 오른쪽 클릭 메뉴, 페이지 간 저장 상태 등을 지원하는 jquery 기반 트리 플러그인입니다. 기본적으로 제가 생각할 수 있는 모든 것을 갖추고 있습니다. 그리고 가장 칭찬할 만한 점은 전혀 느린 느낌이 없다는 것입니다.

jsTree에는 노드 선택 이벤트가 있습니다. 즉,

코드 복사 코드는 다음과 같습니다.

.bind("select_node.jstree", function(e, data) {
//alert(data.rslt.obj.attr("id") ":" data.rslt.obj .attr("rel" ));
})

사실 노드가 클릭될 때마다 트리거되기 때문에 노드의 클릭 이벤트에 더 가깝다고 생각합니다. 노드가 선택되었는지 여부에 관계없이 클릭됩니다.

최근 파일 관리를 할 때 노드를 더블클릭하면 해당 노드의 편집 페이지가 열리는 등 노드의 더블클릭 이벤트를 사용해야 하는 경우가 있습니다.

jstree에는 더블 클릭 이벤트가 있지만 노드를 대상으로 하는 것이 아니라, 그림의 어느 곳에서나 볼 수 있듯이 트리가 있는 영역을 더블 클릭하면 이벤트가 발생합니다. 위의 그림.

노드 더블클릭 이벤트에 가장 가까운 것은 노드 선택 이벤트여야 하니 또 다른 '바가지 그림'이다.

분석
833행에서 this.get_container() 다음에 노드의 클릭 이벤트가 옵니다

코드 복사 코드는 다음과 같습니다.

.delegate("a", "click.jstree", $.proxy(function (event) {
event.preventDefault();
this.select_node(event.currentTarget, true, event);
}, this))

마찬가지로 여기에 노드 더블클릭 이벤트를 삽입합니다

코드 복사 코드는 다음과 같습니다.

.delegate("a", "dblclick.jstree" , $.proxy(function(event) {
event.preventDefault();
this.dblclick_node(event.currentTarget, true, event);
}, this))

그럼 dblclick_node를 구현해보겠습니다. 방법은 괜찮네요.

더 복잡한 928행에서 select_node 코드를 찾으세요. 하지만 그 중 90%는 단일 선택, 다중 선택 처리, 선택 결과를 쿠키에 저장 등 더블클릭에는 쓸모가 없습니다. 따라서 dblclick_node 메소드의 구현은 select_node보다 훨씬 간단합니다.

코드 복사 코드는 다음과 같습니다.

dblclick_node: function(obj, check, e ) {
obj = this._get_node(obj);
if (obj == -1 || !obj || !obj.length) { return false }
this.__callback({ "obj; ": obj });
},

그렇습니다.

사용예
select_node와 사용법은 동일

코드복사코드는 다음과 같습니다 :

.bind("dblclick_node.jstree", function(e, data) {
//alert(data.rslt.obj.attr("id") ":" data. rslt.obj.attr(" rel"))
})

개편된 코드 다운로드 /201007/yuanma/jquery.jstree.rar
그런데
jstree와 다른 플러그인인 jquery verify는 호환되지 않습니다. 둘이 공존하는 경우 jstree도 트리를 구성할 수 있지만 좀비처럼 확장할 수는 없습니다. 여기에 표시하고 나중에 수정할 수 있는지 확인해보세요.

저자: Bruce(프로그래밍 예술의 세계)