如何在Select2 4.0中一起使用本地json数组和无限滚动? [英] How to use local json array and infinite scroll together in Select2 4.0?

问题描述

由于在DOM上创建/删除许多<option>标记很昂贵，因此我正在寻找一种在Select2 4.0中使用大型本地JSON和无限滚动的方法.我还希望能够正确获取/设置/更新值.这里有一个这个stackoverflow问题(我提供了一个泥泞的解决方案)，但是我的解决方案有两个问题:

Since it's expensive to create/remove a lot of <option> tags on the DOM, I'm looking for a way to use large local JSON along with infinite scroll in Select2 4.0. I also want to be able to properly get/set/update values. There is this stackoverflow question (of which I provided a muddy solution) but my solution has 2 problems:

1. 我可以清除单个源选择中未选择的选项，并且Select2控件不会中断.这样可以避免在源选择中建立不必要的选项(因为我使用本地JSON数组存储数据).但是，如果我尝试对多个选择执行相同操作，则会破坏Select2中的功能.请参阅jsFiddle示例中的本节:

1. I can clear out unselected options in the single source select and the Select2 control will not break. This keeps unneeded options from building up in the source select (since I'm using a local JSON array for data). However, if I try to do the same for multiple selects this will break functionality in Select2. See this section in the jsFiddle example:

if(!this.$element.prop('multiple')){
    findValue = [findValue];
    this.$element.html();     // <-- if I do this for multiple then it breaks
}

这个整体解决方案令人费解.是否有更好的方法来完成Select2中的大型本地JSON和无限滚动(具有获取/设置/更新值的能力，如下面的小提琴所示)?

This overall solution is convoluted. Is there a better way to accomplish having large local JSON and infinite scroll in Select2 (with ability to get/set/update values as shown in the fiddle below)?

这是我完整的 jsFiddle在这里.

推荐答案

好，深入研究

Ok, diving deeper into the source I concluded that what I'm trying to do is to reverse the role that Select2 takes in it's default selectAdapter methods. I want my json array to be the authority, not the source select:

1. 还有2种我可以修饰的重要方法:select和unselect.
2. 由于我要处理的数组超出了初始化范围，因此我需要使用其他方法来设置/更新数据.如果我直接在源选择上设置数据，这将是没有意义的，因为源选择不知道或没有所有选项(数组将其保留，并返回选项的分页结果集).
3. 我可以在源上使用 jQuery的数据存储选择设置值，然后触发更改然后让Select2的修饰方法获取该值并检查其是否存在.如果存在，则将其添加到源元素.我们还可以清除源选择中的任何其他选项，因为我们需要的只是所选选项(因此我们可以在源选择上执行.val()，表单也可以提交值).这将创建一个更简洁，更具凝聚力的代码！

1. There are 2 other important methods I can decorate: select and unselect.
2. Since I am manipulating an array beyond initialization, then I need to set/update data using other means. If I were to set the data directly on the source select, this wouldn't make sense because the source select doesn't know or have all the options (the array holds them, and returns paginated result set of options).
3. I can use jQuery's data storage on the source select to set the value, then trigger a change and let Select2's decorated methods grab that value and check to see if it exists. If it exists, then we'll add it to the source element. We can also clear any other options on the source select since all we need is the selected option (so we can do .val() on the source select and also forms can submit the value too). This should create a cleaner and much more cohesive code!

新的 jsFiddle在这里有效.

这篇关于如何在Select2 4.0中一起使用本地json数组和无限滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！