jsTree搜索排序向上向下

Posted 2020-07-27 金色元年

  1 var _node = null, _all_match = 0, _current_match = 0;
  2 $(document).ready(function() {
  3     $(‘#area_setting_ou_tree‘).jstree({
  4         ‘core‘ : {
  5             ‘data‘ : {
  6                 "url" : "url",
  7                 "method" : "POST",
  8                 "dataType" : "json"
  9             },
 10             "multiple" : false,
 11             "check_callback" : true,
 12             "animation" : 0
 13         },
 14         ‘plugins‘: [
 15             "sort",
 16             "search",
 17             "types"
 18         ],
 19         ‘sort‘ : function(a, b) {
 20             return this.get_type(a) === this.get_type(b) ? (this.get_text(a) > this.get_text(b) ? 1 : -1) : (this.get_type(a) >= this.get_type(b) ? 1 : -1);
 21         },
 22         ‘search‘ : {
 23             ‘search_leaves_only‘ : true,
 24             ‘search_callback‘ : function(string,node){
 25                 if(string !== ‘‘ && node.type === ‘staff‘ && node.text.toLocaleLowerCase().match(string.toLocaleLowerCase())) {
 26                     _instance.open_all();
 27                     $(‘#‘ + node.id).addClass(‘jstree-search‘);
 28                 }else {
 29                     $(‘#‘ + node.id).removeClass(‘jstree-search‘);
 30                 }
 31             }
 32         },
 33         ‘types‘ : {
 34             "staff" : {
 35                 "icon" : "url"
 36             },
 37             "ou_end" : {
 38                 "icon" : "url"
 39             },
 40             "ou_not_end" : {
 41                 "icon" : "url"
 42             }
 43         }
 44     }).on(‘search.jstree‘, function() {
 45         var _selected_node = $(‘#area_setting_ou_tree ul li .jstree-search‘);
 46         if(_selected_node.length === 0) return;
 47 
 48         var _instance =  $(‘#area_setting_ou_tree‘).jstree(true);
 49 
 50         _all_match = _selected_node.length;
 51         $(‘#all_selected‘).text(_all_match);
 52         _current_match = 1;
 53         $(‘#current_selected‘).text(_current_match);
 54 
 55         var node_id = ‘‘;
 56         _selected_node.each(function(index, dom) {
 57             node_id = $(this).attr(‘id‘);
 58             if(index === 0) {
 59                 _instance.select_node(node_id);
 60                 $(‘#‘ + node_id).addClass(‘jstree-search‘);
 61                 location.hash = ‘#‘ + node_id;
 62             }
 63             _node.add(node_id);
 64         });
 65     });
 66 
 67     var _instance =  $(‘#area_setting_ou_tree‘).jstree(true);
 68     /*
 69      * search event for Tree
 70      */
 71     var area_setting_ou_tree_to = false;
 72     $(‘#area_setting_ou_tree_search‘).keyup(function () {
 73         setTimeout(function() {
 74             _all_match = 0;
 75             _current_match = 0;
 76             $(‘#current_selected‘).text(0);
 77             $(‘#all_selected‘).text(0);
 78             $(‘#area_set_main‘).html(‘‘);
 79             _node = null;
 80             _node = new DoubleLinkedList();
 81             var _instance =  $(‘#area_setting_ou_tree‘).jstree(true);
 82             _instance.deselect_all();
 83             $(‘#selected_message‘).css(‘visibility‘,‘visible‘);
 84             $(‘#pre_selected‘).prop(‘disabled‘,false);
 85             $(‘#next_selected‘).prop(‘disabled‘,false);
 86 
 87             if(area_setting_ou_tree_to) { clearTimeout(area_setting_ou_tree_to); }
 88             area_setting_ou_tree_to = setTimeout(function () {
 89                 var company_department_tree_search_val = $(‘#area_setting_ou_tree_search‘).val();
 90                 $(‘#area_setting_ou_tree‘).jstree(true).search(company_department_tree_search_val);
 91             }, 250);
 92 
 93             if($(‘#area_setting_ou_tree_search‘).val() === ‘‘) {
 94                 $(‘#selected_message‘).css(‘visibility‘,‘hidden‘);
 95                 $(‘#pre_selected‘).prop(‘disabled‘,true);
 96                 $(‘#next_selected‘).prop(‘disabled‘,true);
 97                 $(‘.jstree-search‘).removeClass(‘jstree-search‘);
 98                 $(‘#area_set_main‘).html(‘‘);
 99             }
100         }, 200);
101     });
102 
103     /*
104      *   next step  for Tree
105      */
106     $(‘#next_selected‘).on(‘click‘, function(){
107         if(_node.size() === 0) return;
108         var _instance = $(‘#area_setting_ou_tree‘).jstree(true);
109 
110         // selected node is not search results
111         var _current_selected = null;
112         if(_node.find(_instance.get_selected()[0])) {
113             _current_selected = _node.find(_instance.get_selected()[0]);
114         } else {
115             _current_selected = _node.getHead();
116             _current_match = 0;
117         }
118 
119         if(_current_selected.next) {
120             var _temp = _current_selected.next.element;
121             _instance.deselect_all();
122             _instance.select_node(_temp);
123             location.hash = ‘#‘ + _temp;
124             showInstitutionByClickTree(_instance.get_type(_temp), _temp);
125             _current_match += 1;
126             $(‘#current_selected‘).text(_current_match);
127         } else {
128             //跳转到第一个
129             _current_match = 1;
130             var _temp = _node.getHead().next.element;
131             _instance.deselect_all();
132             _instance.select_node(_temp);
133             location.hash = ‘#‘ + _temp;
134             //showInstitutionByClickTree(_instance.get_type(_temp), _temp);
135             $(‘#current_selected‘).text(_current_match);
136         }
137 
138     });
139     /*
140      *   previous step for Tree
141      */
142     $(‘#pre_selected‘).on(‘click‘, function(){
143         if(_node.size() === 0) return;
144         var _instance = $(‘#area_setting_ou_tree‘).jstree(true);
145 
146         // selected node is not search results
147         var _current_selected = null;
148         if(!_node.find(_instance.get_selected()[0])) {
149             _current_selected = _node.findLast();
150             _current_match = _node.size();
151             var _temp = _current_selected.element;
152             _instance.deselect_all();
153             _instance.select_node(_temp);
154             location.hash = ‘#‘ + _temp;
155             showInstitutionByClickTree(_instance.get_type(_temp), _temp);
156             $(‘#current_selected‘).text(_current_match);
157             return;
158         }
159 
160         _current_selected = _node.find(_instance.get_selected()[0]);
161         if(_current_selected.previous !=  _node.getHead()) {
162             var _temp = _current_selected.previous.element;
163             _instance.deselect_all();
164             _instance.select_node(_temp);
165             _current_match -= 1;
166             $(‘#current_selected‘).text(_current_match);
167         } else {
168             //跳转到最后一个
169             _current_selected = _node.findLast();
170             _current_match = _node.size();
171             var _temp = _current_selected.element;
172             _instance.deselect_all();
173             _instance.select_node(_temp);
174             $(‘#current_selected‘).text(_current_match);
175         }
176     });
177 });    

双链表

 1 function Node(element){
 2     this.element = element;
 3     this.next = null;
 4     this.previous = null;
 5 }
 6 
 7 function DoubleLinkedList(){
 8     this._head = new Node("This is Head Node.");
 9     this._size = 0;
10 }
11 
12 DoubleLinkedList.prototype.getHead = function(){
13     return this._head;
14 };
15 
16 DoubleLinkedList.prototype.isEmpty = function(){
17     return this._size === 0;
18 };
19 
20 DoubleLinkedList.prototype.size = function(){
21     return this._size;
22 };
23 
24 DoubleLinkedList.prototype.findLast = function(){
25     var currNode = this.getHead();
26     while(currNode.next){
27         currNode = currNode.next;
28     }
29     return currNode;
30 };
31 
32 DoubleLinkedList.prototype.add = function(item){
33     if(item == null)
34         return null;
35     this.insert(item);
36 };
37 
38 DoubleLinkedList.prototype.remove = function(item){
39     if(item) {
40         var node = this.find(item);
41         if(node == null)
42             return ;
43         if (node.next === null) {
44             node.previous.next = null;
45             node.previous = null;
46         } else{
47             node.previous.next = node.next;
48             node.next.previous = node.previous;
49             node.next = null;
50             node.previous = null;
51         }
52         this._size--;
53     }
54 };
55 
56 DoubleLinkedList.prototype.find = function(item){
57     if(item == null)
58         return null;
59     var currNode = this.getHead();
60     while(currNode && currNode.element !== item){
61         currNode = currNode.next;
62     }
63     return currNode;
64 };
65 
66 DoubleLinkedList.prototype.insert = function(newElement, item){
67     var newNode = new Node(newElement);
68     var finder = item ? this.find(item) : null;
69     if(!finder){
70         var last = this.findLast();
71         newNode.previous = last;
72         last.next = newNode;
73     }
74     else{
75         newNode.next = finder.next;
76         newNode.previous = finder;
77         finder.next.previous = newNode;
78         finder.next = newNode;
79     }
80     this._size++;
81 };
82 
83 DoubleLinkedList.prototype.dispReverse = function(){
84     var currNode = this.findLast();
85     while(currNode != this.getHead()){
86         console.log(currNode.element);
87         currNode = currNode.previous;
88     }
89 };
90 
91 DoubleLinkedList.prototype.display = function(){
92     var currNode = this.getHead().next;
93     while(currNode){
94         console.log(currNode.element);
95         currNode = currNode.next;
96     }
97 };

 

 

 

 

jstree：版本号-3.0.9 

API地址：https://www.jstree.com/api/

数据：ajax后台生成

数据结构：双链表