热门关键字:
jquery > jquery教程 > jquery教程 > jQuery Nestable2 使用总结,jquerynestable2

jQuery Nestable2 使用总结,jquerynestable2

489
作者:管理员
发布时间:2020/2/16 17:59:48
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=814

jQuery Nestable2 使用总结,jquerynestable2


最近,因为公司的一个新项目,用了一个基于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�%��不是一个有效的方法。

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

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

试了试,没有效果。那就拼接html,单独给li标签写一个onclick方�%ium;font-style:normal;font-weight:400;background-color:#FFFFFF;"> jQuery Nestable2 使用总结,jquerynestable2

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

总结

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





如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:java常用集合
友荐云推荐