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());
});
};
效果如下
清除搜索效果如下