登录 
欢迎来到陈冬冬(雪地里走)的学习天地 | 经验分享整理平台 | 陈冬冬
 服务器本次启动于:7个月前 

Bootstrap实践之treeview插件

2020-04-19 02:13:49 阅读:()

最早期我发现了xloadtree菜单后,它可以实现点击菜单一级一级加载,当初我就觉得找对了,以后所有的树形菜单它都可以代劳了,然而后期发现zTree更为强大科学,继而下意识所有的Tree菜单都将使用它了,然而在使用一些bootstrap风格的主题框架后,再看zTree的样式效果真的有些不够融合,尽管能够找到一些所谓的bootstrap-zTree主题等实现,或许在bootstrap主题类的框架效果下,不是特适合早起的Tree菜单类展示效果了。

起初使用treeview类需求是基于一个包含上下级功能的一对多编辑时,发现bootstrap世界里叫treeview,与treegrid不同,前者主要表示树形结构的菜单展示,后者则是多应用树形结构表示数据的展示。即便是在包含上下级结构交互的时候,一般有多重上下级选择交互,比如:选择一个菜单级联勾选它的所有字级节点、选择一个字级的时候级联勾选所有上级节点,我个人还是觉得选择上级时不要级联勾选所有子级,而是选择某个子级的时候勾选上级即可。当然,这取决于treeview菜单的checkbox只有两种状态的实现(未选中,选中),zTree的checkbox则有三种状态(未选中、部分选中、选中)。

本例中的treeview菜单的效果就是基于选择子节点级联勾选祖先及节点的实现,并且增加有“全部展开”、“全部折叠”、“全部选中”、“全部不选”,并且又是比较费劲的将其中的非免费的Glyphicons图标库给换成了font-awesome,还一个比较不科学的是treeview使用的数据格式,需要多层级节点嵌套的结构,而非所有菜单均为一级的数据格式,后面我将专门分享关于使用Java和JavaScript将一个一层结构的数据转换为符合treeview结构的多层节点嵌套的效果实现,顺便分享一篇treeview的API文档,参数说明较为详细:https://blog.csdn.net/hailangtuteng/article/details/80842730,具体参考如下。


特别注意

treeview组件在获取数据的时候,默认构造有nodeId属性,如果后台返回数据中使用nodeId为主键ID值,那么这样会出现问题,因为treeview默认会自己构造nodeId为索引序号值,其值为0,1,2,3,4,5递增,一旦出现如示例中的json数据(含nodeId属性),最终在获取已选中数据的时候会出现获取到的nodeId不是实际数据的问题,故需要将nodeId修改为id属性。

image.png

你可能感兴趣的:
      关键字:treeview(10)nodeid(6)bootstrap(5)ztree(4)上下级(3)
      互动()
      评论()
      比起点赞,站长更喜欢登录后的评论
      • 0
      • 0
      • 0
      • 0
      • 0