js实现layui搜索树数据构造

项目前端使用layui来渲染页面,其中树形数据展示用layui.tree.render()实现,生成类似以下图:


image.png

其中搜索框的实现需求:
1、搜索关键字为模糊搜索
2、展示关键字命中的目标节点及所有子节点和所有父节点

layui.tree数据类似如下:

var data = [
    {
        "title":"客户标签",
        "id":"1",
        "spread":true,
        "children":[
            {
                "title":"基础信息",
                "id":"3",
                "spread":false,
                "children":[
                    {
                        "title":"人口属性",
                        "id":"10",
                        "spread":false,
                        "children":[
                         // 省略剩余子节点
                        ]
                    }
                ]
            }
        ]
    }
]

实现思路:还是通过递归遍历所有子节点来判断是否包含字符串,末节点若不包含则删除自身,这样上一级父节点就变成了末节点,再进行一样的判断即可,主要工作量在于对js数组和对象的删除需要有一定的理解,实现代码如下:

var labCondition = '搜索关键字';

//过滤搜索条件
function reFilter(array) {
    for (var i=0; i<array.length; i++) {
        var data = array[i];
        if (data.title.indexOf(labCondition) > -1) {
            continue;
        }
        if (data.children && data.children.length > 0) {
            reFilter(data.children);
        }
        if (!((data.children && data.children.length > 0)) && data.title.indexOf(labCondition)==-1) {
            array.splice(i, 1);
            i--;
        }
    }
}

//将源树形数据data放进去执行后就可以直接使用layui.tree渲染了
reFilter(data);
tree.render({
    elem: '#xxx',
    data: data,
    id: 'xxx',
    showLine: false,      //是否开启连线
    accordion: true,      //是否开启手风琴模式
    showCheckbox: false,  //是否显示复选框
    click:function(item){}
});

写完搜了下layui,发现今天正好是layui官网下架的日子,
—— "9月26日消息,前端UI框架Layui在其官网发布公告称,layui官网将于2021年10月13日进行下线。届时,包括新版下载、文档和示例在内的所有框架日常维护工作,将全部迁移到Github和Gitee。layui作者贤心向开发者致歉,并称这是一个无力、无奈,甚至无助的决定,“这不是终结,只是重归到开源的纯粹中来”。"

前端框架用过不少,layui似乎一直是佼佼者,看了下百度搜索热度基本跟 bootstrap 持平,国内开源不好做,可惜。。

2021-10-19更新:layui原官网已无法访问,可以访问镜像地址:www.laizhefa.com

推荐阅读更多精彩内容