1.0.0

README.md

@@ -1,6 +1,24 @@
 # xntree 仙女座树插件
 树组件、原生js、jquery、tree、大数据量、虚拟树、vue
 
+# 简介
+最近开发一个复杂的核算项目，原项目用的是elementui，所以就继续使用elementui框架
+这个功能块并不是复杂，但是很麻烦，各种表单的关联查询，最难受的是一个页面里面有很多树形组件，有的组件有很大的数据量，可能会超过几千个节点，但是elementui又没有提供渲染大型数据的方式，我又打开了ztree的网站，其实从来都没有用过ztree，因为ztree提供了很多功能，但是实际上我是用不到这些功能的，更重要的是，ztree的样式还是有一点点古老，实在是懒得去调整样式了，最后还是决定还是自己开发个插件吧。
++ xntree是直接利用虚拟列表的概念开发的，所以每次在页面渲染的节点数是很少的，可能仅有二三十条数据
++ 所有节点是同层级的，父节点和子节点并不是嵌套的层级关系，所以节点的缩进样式只是为每个节点增加了左侧的空白节点
+### 插件工作过程
+1.对原始的嵌套结构数据进行展开操作，例如：
+
+    let data=[{id:1,name:'节点1',children:[{id:11,name:'子节点'}]}]//原始数据
+    let flatJson=getFlatData(data)//展开数据
+    //获取以下结构的数据
+    flatJson={1:{id:1,name:'节点1',children:[{id:11,name:'子节点'}]},11:{id:11,name:'子节点'}}
+
+2.获取到flatJson之后，后续对节点的增删改查等操作很多就可以利用这个数据了
+3.每次对数据进行更新之后，都可以调用绘制方法，对页面进行重绘，所以任何操作其实都不用直接操作dom
+4.关于页面的渲染，可以参考这篇文章 [地址](https://juejin.cn/post/6844903982742110216) 
++ 虚拟树和列表的不同在于，树是可以收起和展开的，所以目前每次渲染页面，我都会从第一条数据开始遍历，判断当前节点是否收起，如果收起就不在计算范围内，我会根据节点的显示情况判断这个节点是否要进行绘制，当然在这个过程中，我们还要计算当前树的总高度，所以相对来说，还是有一些性能消耗的，在数据量很大并快速的拖拽滚动条的时候，有时候会有空白的现象，但总体不影响效果，此处的算法后续还会进行优化。
+
 # 2021/07/07 V1.0.0(已发布)
 
 # 概要