jQuery Nestable2 使用总结

最近，因为公司的一个新项目，用了一个基于bootstrap二次改造的国外友人的框架。感觉很一般吧，要求更换框架，客户拒绝。只能搞这个，发现里面一个jQuery插件-【Nestable】但是源作者长时间不更新，后来发现了一个新版本，应该是另外一个人基于Nestable改造的，称之为“Nestable2”，所以也就花了一些时间研究了一下，使用百度找的资料都很浅薄，所以这里做一个汇总，也希望更多的人少走弯路吧。虽然说这个插件用的人不多。

项目地址

GitHub

疑难点汇总

1.Nestable 初始化折叠

在Nestable 2中，初始化折叠跟Nestable 原始版本中一致，但是百度搜索的结果很少，我觉得应该是这个插件很少人用吧，因为比这个好看的插件多了去。

// 展开指定内存块中的元素
$(selector).nestable('expandAll');
// 收合指定内存块中的元素
$(selector).nestable('collapseAll');

2.Nestable 禁止拖动

禁止拖动在Nestable原始版本中是没有这一功能的，因为这个插件就是可拖拽的，拖拽完成后，把数据再传递给后台进行修改。这个我找了很久都没有一个好点的解决方案，在CSDN上博主说，直接删除插件底层代码就可以实现，但是怕有问题，所以找到新的插件，也就是版本2。来看代码。

$('selector').nestable({
        'onDragStart': function (l, e) {
            return false;
        }
});

这个地方，如果把 return false删除，就可以写用户拖动元素时，触发作为选项提供的回调函数。l是主容器，e是已移动的。需要这个功能的，可以查看GitHub上的介绍。

3.Nestable 点击事件

这个是我在平安夜当晚研究到11多，都没解决的问题，今天偶然性发现了问题，原因是JS的事件冒泡造成的，同时，非常感谢Google的帮助哈。

Nestable 2比原版更加扩展，直接使用JSON数据渲染到页面上，但是没有额外的点击事件，这就需要自己操作了，所以就用类作为点击。

$('.dd-item').click(function () {
      var id = $(this).data('id');
      alert(id);
});

但是这个地方出问题了。点击第一级数据正常，第二级数据后，获取到了两个id，一个是父级id，一个是点击的id，再继续测试，三级的话，会弹出三个数据。经过百度的一段探索后，发现可以使用jQuery 事件one()方法,但是只能点击一次，第二次点击就无法使用了，这不是一个有效的方法。

然后再者就是使用防止冒泡的方法：前端博客

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

试了试，没有效果。那就拼接html，单独给li标签写一个onclick方法依旧是原本的小bug。

分析了一下渲染的界面。发现生成的里面嵌套了一个div，如果给这个div加一个点击事件，会不会能够实现单击的效果呢？

$('.dd-handle').click(function () {
     var p = $(this).parent();
     var id = p.data('id')
     alert(id);
});

果然，这个验证了我的猜想，给渲染的子级元素点击事件，找到父级ID就不会出现冒泡问题了。哈哈完美解决。

总结

Nestable2基于Nestable一个升级版，添加了很多功能，虽然去年不再更新，但是这个插件依旧很强大。希望这个文档能够给一些带来一点帮助吧。

本文首发于：https://qsh5.cn/post-70.html