目录
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) {
//选中当前节点
}
}
总结:以上就是我本次异步树模糊搜索的开发记录,仅供参考,如有问题,希望能指出我及时改正!