jQuery Nestable2 使用总结
最近,因为公司的一个新项目,用了一个基于bootstrap二次改造的国外友人的框架。感觉很一般吧,要求更换框架,客户拒绝。只能搞这个,发现里面一个jquery插件-【nestable】但是源作者长时间不更新,后来发现了一个新版本,应该是另外一个人基于nestable改造的,称之为“nestable2”,所以也就花了一些时间研究了一下,使用百度找的资料都很浅薄,所以这里做一个汇总,也希望更多的人少走弯路吧。虽然说这个插件用的人不多。
项目地址
疑难点汇总
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一个升级版,添加了很多功能,虽然去年不再更新,但是这个插件依旧很强大。希望这个文档能够给一些带来一点帮助吧。
本文首发于: