实现小程序tree,加tree模糊搜索优化

83 阅读2分钟

一:树状结构一共三层,第一层公司,第二层车队,第三层车辆,实现手写小程序tree并模糊搜索,思路讲解

image.png

1、分析:因为本公司的数据量太大,并且是一次性传入前端,全部加载的话页面会崩掉,所以要优化,优化步骤如下:

1.模糊搜索时因数据量太大不易直接全部三级模糊搜索,我改成了分成三次模糊搜索:

  • 点击公司模糊搜索公司

image.png

  • 点击车队模糊搜索的车队

image.png

  • 点击车辆模糊搜索的车辆(注意:车辆因数据量太大所以要用懒加载,否则页面直接崩掉)

image.png

2.切换公司、车队、车辆的代码如下

image.png

image.png

3、公司模糊搜索思路:

  • 获取搜索框input的数据,后面备用检索
  • 获取整个tree,并且对数据进行处理,做一个循环,把tree的一级数据返回,并把tree二级以及后面的数据从tree中删除并开辟一个新空间路径保存起来,保存的时候借用一个二级的唯一id(corpid)方便后面使用
  • 检索input,返回检索出来的,tree的一级数据
  • 把检索出来的一级数据赋值上对应corpid的二级数据
  • 公司模糊tree就完成了
  • 代码如下: image.png

4.接下来车队模糊搜索思路:

  • 获取搜索框input的数据,后面备用检索
  • 获取整个二级tree,并且对数据进行处理,做一个循环,把tree的二级数据返回,并把tree三级以及后面的数据从tree中删除并开辟一个新空间路径保存起来,保存的时候借用一个三级的唯一id(sgid)方便后面使用
  • 检索input,返回检索出来的,tree的二级数据
  • 把检索出来的一级数据赋值上对应sgid的三级数据
  • 车队模糊tree就完成了
  • 代码如下: image.png

5.最后车辆模糊搜索思路:

  • 获取前30条车辆信息,展示到页面上 image.png
  • 调用下拉加载数据函数,每次返回30条 image.png
  • 模糊搜索功能,获取搜索框input的数据,后面备用检索
  • 获取整个三级数据车辆信息
  • 获取检索之后的前30条数据 image.png