我爱编程JAVA前后端问题收集

Select2插件解决手动排序的问题

2018-04-16  本文已影响0人  zolk666

    最近产品经理提了一个需求,要求我们其中一个功能的多选框要按照点击的顺序显示  比如点击的是3,2,4 显示的就要是3,2,4.但是由于我们的项目的Select2插件并没有配置项来改变这个,Select2插件只能按照option的顺序来显示只能显示2,3,4.所以我查了很多网站和资料也只有提到说重写Select2的Select方法来实现,但是按照他的写法并不能实现 所以自己琢磨了三天终于实现了  把自己当的实现方法贴出来

图1

这个代码是Select2.js的重写方法的代码 注释都有

图2

这是当时只实现了  手动排序后产生的bug  会创建出多余的option 在图1的option去重中实现了去重

图3

Select2插件之所以不能手动排序  是因为他调用current方法时 调用jQuery的find方法时给你按照option的顺序排序了  所以我是通过触发change方法前把调用的option依次置顶到selected的option的下面 来解决手动排序的问题

--------------------------------------------------------------------------------------------------------

解决Select2插件通过AJAX从后台拿到数据初始化界面时的排序不正确

问题和上文选择事件的原因是相同的,是因为Select2插件出发trigger事件时是按照  select中option的排序来触发的   所以我的解决方法是在调用触发方法时对option进行重排序

图4 图5

如图4和图5所示   显示的6,4,1但是点开的时候渲染后又变成了1,4,6

图6

所以我在触发的前改变了option的排序     最后解决了这个问题

上一篇 下一篇

猜你喜欢

热点阅读