美文网首页我爱编程JAVA前后端问题收集
Select2插件解决手动排序的问题

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

作者: zolk666 | 来源:发表于2018-04-16 18:10 被阅读0次

    最近产品经理提了一个需求,要求我们其中一个功能的多选框要按照点击的顺序显示  比如点击的是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的排序     最后解决了这个问题

相关文章

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

    最近产品经理提了一个需求,要求我们其中一个功能的多选框要按照点击的顺序显示 比如点击的是3,2,4 显示的就要是...

  • Sublime 记住代码折叠与位置

    Buffer​Scroll 插件可解决此问题,但已被 ST 下架,需要手动安装 https://github.c...

  • 解决GsonFormat升级4.1失效插件问题

    解决步骤: 1.先uninstall AndroidStudio 安装的GsonFormat插件 手动下载Gson...

  • Xcode更新之后插件失效的解决 办法

    主要原因是因为更新之后插件的UUID的问题 两种解决办法 1.手动更新获取默认的DVTPlugInCompatib...

  • 关于html中的tabindex

    发现问题: 今天在使用select2这个优化select标签插件时,发现其搜索框无法输入值。 经过初步测试,发现该...

  • Mysql中数字排序问题

    手动转换类型:用下面的方法就可以了,使server_id+0之后再排序,问题解决了。select server_i...

  • Yii extension

    ActiveForm 文件上传 select2 根据选择顺序排序 前端获取选中值 Ajax 传参 GridView...

  • Error: Failed to get absolute p

    (确保package.json plugin.xml 没问题 这个主要解决插件没问题的情况 )解决方案: 1、插件...

  • react-native-splash-screen

    插件比较老,可能自动安装会出现各种问题,这里推荐手动安装,可以比较清晰的知道是哪出了问题插件下载: yarn ad...

  • select2的用法

    1.下载select2的插件文件(js(pinyin.js,select2.js)和css(select2.css...

网友评论

    本文标题:Select2插件解决手动排序的问题

    本文链接:https://www.haomeiwen.com/subject/xuwekftx.html