【实战】HTML5 菜单树插件Nestable的使用

  • A+
所属分类:Web开发

做公司的项目已经做了有几年了,已经习惯了树结构来进行菜单的展示了,更何况wordpress也是使用了同样的方法,这种方法是很好的,最起码我是很喜欢的。

之前用手写过,也用jui(dwz)进行过开发,但是HTML5下面觉得还是找不到一个自己想要的。

in+主题里面自带了一个插件,那就是Nestable。虽然我不能很确定的给Nestable定位是做什么的,但是用来做菜单树我觉得还是不错的。

github项目地址:https://github.com/dbushell/Nestable

以下实例是我的真实代码,是我在使用YII2进行项目开发所用到的,菜单我只用了2级,没有多分级。

其实关于页面的展现说起来很简单,对于我这样逻辑性不是很好的人来说,后台的逻辑、循环是很麻烦的,这也是为什么我只写到了2级菜单。

既然本文我们主要说的是Nestable插件,那么我们此处只针对于前台的代码进行一下说明。

关于如何在YII2中view页面引入JS文件和JS脚本,我这就不在一一赘述了,如果感兴趣,可以参考本站的《YII2 根据需求在不同页面加载不同JS脚本、CSS样式

如果要以最简化的方式使用这个插件,那么就是创建一个DIV,然后给DIV一个ID或者其他你可以获取到这个DIV元素的方式,如下图:
【实战】HTML5 菜单树插件Nestable的使用

然后我们添加如下js脚本内容

初始化的代码很简单,我基本上什么都没做,group让元素可以来回拖动,maxDepth让元素的拖动只支持两级。

像下面这样,数据我都是通过数据库加载过来的,只是加载了一个HTML代码而已。

【实战】HTML5 菜单树插件Nestable的使用

然后我们看一下保存的方法,这个很简单,我们只要把JSON传到后台,然后后台进行解析、重组即可。这里我们使用的ajax提交的方式提交到后台,便于我们看效果,如果对YII2 ajax提交form感兴趣的话,可以看下本站的《【实战】YII2 ActiveForm Ajax 自定义提交

我们看下效果
【实战】HTML5 菜单树插件Nestable的使用

OK,现在我们可以左右移动,可以上下移动,可以前后移动,可以父、子移动。保存后,重新刷新也可以。

如果你操作有问题,可以在评论区留言,我会捡我会的回答。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: