《智选网开发系列》之 前端树表格组件、树组件选择(三)

原创  郑建华   2020-02-16   50人阅读  0 条评论
摘要:

    菜单管理的表已经建好了,服务也写的差不多了。由于菜单是一个树形结构的,所以该模块的主体显示应该是一个树的结构。并且由于字段内容较多,均需要展示出来,使用单纯的树结构就不太够用,应该使用树表格。而在角色管理处,关联菜单仅需要菜单名称的显示,使用简单的树结构即可。    layui的生态环境发展的比较好,涌现了各种各样的优秀人才,开发出了很多优秀的第三方扩展组件。所以,我需要的两款组件在扩展组件库中找,应该是没问

    菜单管理的表已经建好了,服务也写的差不多了。由于菜单是一个树形结构的,所以该模块的主体显示应该是一个树的结构。并且由于字段内容较多,均需要展示出来,使用单纯的树结构就不太够用,应该使用树表格。而在角色管理处,关联菜单仅需要菜单名称的显示,使用简单的树结构即可。

image.png

    layui的生态环境发展的比较好,涌现了各种各样的优秀人才,开发出了很多优秀的第三方扩展组件。所以,我需要的两款组件在扩展组件库中找,应该是没问题的。

    经过多方对比,我发现了两款组件,无论是从功能性,还是美观性来说,都是值得一用的。

一、treeTable 树形表格

1、简单介绍

树、树表展开关闭及一些常用功能。加入了状态记忆、渲染、刷新、更换图标、列渲染等配置。并设置一些监听、获取参数快捷操作。并在示例中扩展了下拉选择(单选、多选)功能。

2、文档以及下载地址

https://fly.layui.com/extend/treeTable/#doc

image.png

3、示例地址

http://www.g-tf.cn/lay/treeTable.html

image.png



二、eleTree 树组件

1、简单介绍

包括tree的下拉,checkbox,拖拽,右键菜单,手风琴,懒加载,搜索

2、文档以及下载地址

下载地址:https://fly.layui.com/extend/eleTree/#download

文档地址:https://layuiextend.hsianglee.cn/eletree/

image.png

3、示例地址

https://layuiextend.hsianglee.cn/eletree/test.html

image.png

接下来就是做菜单管理页面了

初步集成效果:

image.png

未完待续。。。

本文地址:https://www.zjh336.cn/?id=249
版权声明:本文为原创文章,版权归 郑建华 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?