一:树状结构一共三层,第一层公司,第二层车队,第三层车辆,实现手写小程序tree并模糊搜索,思路讲解
1、分析:因为本公司的数据量太大,并且是一次性传入前端,全部加载的话页面会崩掉,所以要优化,优化步骤如下:
1.模糊搜索时因数据量太大不易直接全部三级模糊搜索,我改成了分成三次模糊搜索:
- 点击公司模糊搜索公司
- 点击车队模糊搜索的车队
- 点击车辆模糊搜索的车辆(注意:车辆因数据量太大所以要用懒加载,否则页面直接崩掉)
2.切换公司、车队、车辆的代码如下
3、公司模糊搜索思路:
- 获取搜索框input的数据,后面备用检索
- 获取整个tree,并且对数据进行处理,做一个循环,把tree的一级数据返回,并把tree二级以及后面的数据从tree中删除并开辟一个新空间路径保存起来,保存的时候借用一个二级的唯一id(corpid)方便后面使用
- 检索input,返回检索出来的,tree的一级数据
- 把检索出来的一级数据赋值上对应corpid的二级数据
- 公司模糊tree就完成了
- 代码如下:
4.接下来车队模糊搜索思路:
- 获取搜索框input的数据,后面备用检索
- 获取整个二级tree,并且对数据进行处理,做一个循环,把tree的二级数据返回,并把tree三级以及后面的数据从tree中删除并开辟一个新空间路径保存起来,保存的时候借用一个三级的唯一id(sgid)方便后面使用
- 检索input,返回检索出来的,tree的二级数据
- 把检索出来的一级数据赋值上对应sgid的三级数据
- 车队模糊tree就完成了
- 代码如下:
5.最后车辆模糊搜索思路:
- 获取前30条车辆信息,展示到页面上
- 调用下拉加载数据函数,每次返回30条
- 模糊搜索功能,获取搜索框input的数据,后面备用检索
- 获取整个三级数据车辆信息
- 获取检索之后的前30条数据