1. 程式人生 > >JStree搜尋過濾掉沒用的資料重新構建樹

JStree搜尋過濾掉沒用的資料重新構建樹

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());
            });
        };

效果如下

清除搜尋效果如下