JStree搜尋過濾掉沒用的資料重新構建樹
阿新 • • 發佈:2018-12-10
html裡面
<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12 pull-left padding-right padding-left margin-bottom-5"> <div class="input-icon right"> <i class="icon-magnifier"></i> <input id="searchMeetinRoomGroup" type="text" class="form-control" placeholder="{{data.search}}"> </div> </div> <div class="col-md-12 col-lg-12 col-xs-12 col-sm-12 pull-left padding-right padding-left"> <div id="meetingRoomGroupTree" class="tree-demo overflow_xx overflow_xy meetingRoomGroupTreeHeight"></div> </div>
js裡面
//會議室 =》新增會議室 =》獲取會議室分組資料 構建樹 $scope.getMeetingRoomGroupData = function(){ MeetingRoomGroup.query(function(data){ var isMulitSelect = false, isOpenAll = false, rootNodePidId = 0,state= {"opened":true, "selected": true }; //列表顯示組織機構 myTree.getTree('#meetingRoomGroupTree', data.data,state, ["types", "unique", "sate", "changed","search"], isMulitSelect, isOpenAll, rootNodePidId); $scope.watchMeetingRoomGroupJstree(); }); }; //會議室 =》新增會議室 =》監聽列表樹 $scope.watchMeetingRoomGroupJstree = function () { $("#meetingRoomGroupTree") .on("changed.jstree", function (e, data) { if($("#meetingRoomGroupTree").jstree("get_selected").length ==0 )return; $scope.hadSelectedMeetGroupId = $("#meetingRoomGroupTree").jstree().get_selected(true)[0]; $scope.getMeetingRoomData(); }).on('search.jstree', function(nodes, str, res) { if (str.nodes.length === 0) { $('#meetingRoomGroupTree').hide(); }}); $('#searchMeetinRoomGroup').keyup(function() { $('#meetingRoomGroupTree').show(); $('#meetingRoomGroupTree').jstree('search', $(this).val()); }); };
效果如下
清除搜尋效果如下