欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JStree搜索过滤掉没用的数据重新构建树

程序员文章站 2022-05-12 22:22:20
...

https://*.com/questions/38776653/uncaught-typeerror-jstree-hide-all-is-not-a-function

 

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

效果如下

JStree搜索过滤掉没用的数据重新构建树

清除搜索效果如下

JStree搜索过滤掉没用的数据重新构建树