异步树模糊搜索前后端实现

目录

1：问题背景：

2：后端代码：

3：前端代码

---

1：问题背景：

        最近开发中，遇到了一个需求，要求异步树可以支持模糊搜索，但是异步树呢，他是懒加载，点一个节点，请求一次后端，这样做是可以让树加载能快一点，但是若要支持模糊搜索，就比较棘手了，因经验不足，来来回回改了好几版，最终形成一个比较合理的解决方案，可以实现模糊搜索。接下来，我就阐述一下我解决问题的思路：

首先呢：我先讲后端逻辑：

2：后端代码：

        （1）通过后端接口查询到当前所有的树节点

        （2）进行遍历树节点，若当前节点包含搜索名称，则添加至新初始化的集合当中，若不满足，则调用查询子节点的方法，进行满足的节点数据添加。

         （3）在调用子节点的过程中，若当前节点不满足，则需要递归调用。

           (4)    当完成满足的节点构建后，若想在前端选中并打开目标节点，还需要其满足节点的所有父级标识（id），因为是异步树，所以当你想展开目标节点时，你得先展开其目标节点的父级节点

        完整代码如下：

public List<Tree> getSearchNode (String searchName) {
    //获取所有的树节点
    List<Tree> TreeNodes = treeService.getAllNodes();
    List<Tree> results = new ArrayList<>();
    //遍历树节点
    for(Tree treeNode : TreeNodes) {
        //若当前节点名称包含搜索名称，则进行节点添加
        if(treeNode.getName().contains(searchName)) {
            results.add(treeNode);
        }
        //添加当前节点所有子节点中满足条件的节点
        results.addAll(searchNodesChildren(treeNode.getChildren(),searchName));
    
    }
    //这里获取到当前包含搜索名称的所有节点，进行遍历，获取节点的所有父级节点的id，以便于前端进行        
    // 展开满足节点的父节点
    for(Tree resultType : results) {
        String nodeParentId = null;
        nodeParentId = resultType.getParentId();
        //当前节点上级父Id集合
        List<String> idList = new ArrayList<>();
        List<String> ids = new ArrayList<>();
        if(StringUtils.isNotBlank(nodeParentId)) {
            ids = getIds(nodeParentId,idList)
        }
        result.setParentId(ids);
    }
    
    return result;
}
//添加当前节点子节点满足条件的节点
private List<Tree> searchNodesChildren(List<Tree> tModel,String searchName) {
    List<Tree> results = new ArrayList<>();
    for(Tree treeNode: tModel) {
        if(tModel.getName().contains(searchName)) {
            result.add(treeNode);
        }
        if(Collections.isNotEmpty(treeNode.getChildren())) {
            result.addAll(searchNodesChildren)
        }
    }
}
//获取当前节点的所有父级id
private List<String> getIds (String id,List<String> ids) {
    Tree treeNode = treeService.getTreeById(id);
    ids.add(id);
    if(treeNode.getParentId() != null) {
        getIds(treeNode.getParentId(), ids)
    }
    return ids;
}

 3：前端代码

        

var i = 0；
var treedata = [];
this.getSearchNode = function() {

    var searchName = $(#treename).val();
    if(treedata.length == 0) {

        $.ajax({
            url: 3333333+'service/getSelectNode'
            data:{'searchName':searchName}
            method:'post'
            success: function(data) {
                treedata = data
            }
        })
    }
    if(treedata.length > 0) {
        
        var nodeId = treedata[i].id;
        var parentIds = treedata[i].parentIds;
        //在当前节点树上查找
        var nodetarget = $('#id').tree('find',nodeId);
        if(nodetarget == null) {
            //未找到，查询父节点
            this.setParentNode(node,parentIds);
        } else {
            //选中并展开节点，根据自身前端的机制进行处理，这里就不写了
        }
    } else {
        //数据未查到，进行弹窗提示
    }
    //当treedata遍历结束后，赋值为treedata为空
    if(i == treedata.length -1 ) {
        treedata = [];
    }
    var selectNode = $('#id').tree('getSelected');
    var text = select.text;
    var reg = RegExp(text);
    if(text.match(reg)) {
        i++;
    }
}
//选中父节点进行展开
this.setParentNode = function(nodeId,parentIds) {
    for(var i = 0; i < parentIds.length;i++) {
        var parentId = parentIds[i];
        var nodeTarget = $('#id').tree('find',parentId);
        if(nodeTarget == null) {
            continue;
        } else {
            //选中当前节点
            //1： 根据自己的机制进行选中节点并展开
            //2：
            parentIds.splice(i);
            this.setParentNode(nodeId,parentIds);
        }
        if(parentIds.length == 0) {
            break;
        }
    }
    var nowNode = $('#id').tree('find',nodeId);
    if(nowNode != null) {
        //选中当前节点
        
    }
}

总结：以上就是我本次异步树模糊搜索的开发记录，仅供参考，如有问题，希望能指出我及时改正！