浅谈ztree节点的增加和获取

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。使用zTree会涉及到一些操作的逻辑,例如增加节点、删除节点等,下面我简要描述一下实际使用中的一点心得。

zTree的节点json设计(也就是你后台的数据库设计)可以采用以下设计格式,每一个节点由id、pId、level、name等字段构成,另外可添加一个relation字段来表示各节点直接的联系,例如一级节点(id为1)可作0.,二级节点可作0.1.(以‘.’号结尾)。其它的node格式可参考zTree官网demo www.treejs.cn/v3/main.php#_zTreeInfo

var zNodes =[{id:1, pId:0, level:1, name:"test", open:true}];

有了上述的格式后便可开始实际的操作了,比如异步获取数据(async,此setting在zTree的官方api上有对应内容),当然我们现在要讲的内容是对节点的操作,对其它内容不做拓展,请读者自行查阅zTree官方文档。

假设有API(以Restful API设计格式):

1. POST /api/node

2. GET /api/nodes

...

对于新增节点来说,存在着新增根节点新增子节点两种情况:

对于新增根节点,父节点为0,层级为1,将节点对应的data={pId:0,level:1,name:'xxx}通过ajax或其它手段使用POST api路径(POST /api/node)向后台请求即可(id应该不重复,mysql可设置自增,mongodb本身则生成一条id不重复的文档);

对于新增子节点,父节点为上一级节点id,层级为父节点层级加1,下一步新增操作如上新增根节点一致。

新增节点的逻辑大致如下:


对于获取树节点,这里有一个点容易弄混,就是树的作用。对于树来说,它应该只作为一个数据的索引,而不是说通过请求后台api就要将所有的data(你想展示的内容,或者说你的业务逻辑需要用到的数据)都在树上展示出来(如果需要将data展示出来为什么不能直接用循环来将data放置在多个div块呢?)。树展示的节点应该尽量简洁,例如zTree官网展示的demo只显示了节点的名称。

那么此时读者可能会问:那么对应节点的数据应该怎么展示呢?

这个问题可以用两种方式来解答,第一,如果在向后台请求时(GET /api/nodes),返回的json存在data,那么则在点击zTree上节点时(点击时提供一个回调函数,函数的参数其中之一即为当前节点的信息),可通过各种形式模态框、iframe内嵌的页面或你想使用的dom形式来展示对应节点的信息。

第二,可以通过对应节点的id来发起请求例如(/api/node/1),以此来获得对应节点的信息。

对于以上两种形式,个人比较推崇后者。生成树时只需要一些很简单的字段(id,pid,name等),考虑这种情况,我们想要生产的树的节点映射的是一个个文档,那么假设文档(doc)除了上述简单字段外还有content、status,doc_html等其它内容。

站在生成树的角度来说,使用第一种方式,如果在获取节点时,直接将节点的所有字段全数返回,那么很明显对于生成树是很冗余的,并且当doc的content或doc_html内容较长,大小过大时必然会影响树的生成性能,本来10ms的事弄成需要100ms就得不偿失了。

另一方面,使用第二种方式,对于获取节点信息或操作信息本身和生成树就是处在不同的业务范围内,不应该放在同一个维度上来处理;并且在获取信息时,不同的操作需要用到的信息也会不同,例如当查看doc信息时,只需要看到doc_html、当修改doc信息时,需要使用到content、status等信息;基于原子操作,当使用第一种方式时,如果文档doc_a是公用的,有两个人在一段很短的时间内操作该文档(假设A用户、B用户均已打开页面并在操作期间没有进行页面刷新),A用户在查看doc_a而B用户在修改doc_a,当B用户在修改doc_a完成后,A用户点击doc_a对应节点,显然A用户并没有获取到更新后的doc_html,而使用第二种方式则能通过发起请求获取到修改后的数据信息。

以上就是我向讨论一点点内容,才疏学浅,请各位指教,另外如果希望看一下对应的内容可以看我的github的PDoc(前端使用的树不是用的zTree,用的是element-ui的树但是大同小异,后台用的node,欢迎各位star,各位提issue,各位拍砖~),下附地址:

前端地址 github.com/JiaXingBinggan/PDoc-vue.git

后台地址 github.com/JiaXingBinggan/PDoc-node.git

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,455评论 25 707
  • 你泪眼婆娑 这城市正跟你告别 机场起起落落 这座城市在迎接在告别 你有什么不舍 手里的机票在帮你决绝 离开吧 这里...
    一只喜欢听故事的桔子阅读 201评论 0 0
  • 稳定排序能让下一次排序保证上一次排序的成果 稳定排序的意思是指, 待排序相同元素之间的相对前后关系,在各次排序中不...
    冰吉凌阅读 189评论 0 1
  • 有没有问过自己:我是活在当下,还是活在头脑里? 听到这个问题,是不是会感觉很诧异,当下是什么?我们不是都活在当下么...
    漫步和蜗牛阅读 292评论 2 0