jsTree搜索排序向上向下
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后台生成
数据结构：双链表
