如何在select2()字段中保存排序顺序？

Question

我正在使用select2库的select2()字段，并启用了拖放排序功能。

它工作得很好，但是一旦保存后，顺序就会被打乱并按字母顺序排序。

我想知道是否有可能在select2()字段中以任何方式保存拖放后的元素顺序。

请给出建议。

- uday.blob

---

最好的实现方式是使用cookie。 - DJ.

展示一些代码以及你使用哪种通信技术与服务器进行通信以存储元素的位置。我认为localStorage函数是更好的解决方案。 - arclite

Answer 1

根据Select2文档，新的有序值保存在附加的隐藏字段中。 http://ivaynberg.github.io/select2/ （右键单击输入字段，然后检查元素，在div#select2-container之后找到下面的行）

我可以为您提供两种可能适用的选项：

选项1：简单易行

检查您输入控件的顺序，特别是：

$("#e15").select2({tags:["red", "green", "blue", "orange", "white", "black", "purple", "cyan", "teal"]});

控件只会按照指定的顺序呈现相同的顺序。

如果您没有将这些值保存为逗号分隔的文本，而是作为行记录保存，那么您的数据库查询可能会按字母顺序排序它们。

选项2：更进一步

此代码将帮助您将有序值保存在cookie中，因此您可以在整个会话中拥有相同的顺序。

$(function(){

  if ($.cookie('OrderedItemList') != null){
      $("#e15").select2({tags: $.cookie('OrderedItemList').split(',')});
   }

  $("#e15").on("change", function() { 
                         $("#e15_val").html($("#e15").val());
                         $.cookie('OrderedItemList', $("#e15").val(), { expires: 365 });
                           });

});

请注意，此代码可能无法用于绑定到数据库的字段，如果需要，请添加一些代码。

- DJ.

Answer 2

我曾经也遇到过你的问题。我用类似以下方法解决了它...

1. 一个隐藏的输入框来保存你的顺序。
2. 在select2上添加监听器。

$("#reports").on('change', function(){
    var data = $(this).select2('data');
    var array = [];
    $.each(data, function(index, val) {
        array[index]=val.id;
    });
    array.join(',');
    $("input[name=reports]").val( array );
});

<form class="form-horizontal form-bordered" action="#something" method="post" accept-charset="utf-8" target="_blank" >

  <input type="text" name="reports" >
  <select id="reports" class="form-control select2me" multiple >
    <? foreach ($Balance::getSeparators() as $key => $value ) { ?>
    <option value="<?=( $key )?>"><?=( $value )?></option>
    <? } ?>
  </select>
      
</form>

这样，input[name=reports] 将会向您的页面发送正确的顺序。

- João Prizal

Answer 3

Select2已经更新到版本4，它基于<select/>和<option/>标签，而不是<input/>标签。我针对版本4解决了这个问题，方法如下：

$(".select2").select2().on('select2:select', function(e){
  var $selectedElement = $(e.params.data.element);
  var $selectedElementOptgroup = $selectedElement.parent("optgroup");

  if ($selectedElementOptgroup.length > 0) {
    $selectedElement.data("select2-originaloptgroup", $selectedElementOptgroup);
  }

  $selectedElement.detach().appendTo($(e.target));
  $(e.target).trigger('change');
})

基本上，我会将所选项目从选择-选项列表中移除并重新添加，以便它们按选择顺序显示。

- murb

---

版本4；我发现格式不正确，我的回答中有一些信息丢失了，我刚刚修复了它。谢谢。 - murb

这是纯金啊，我不得不留下评论来表示感谢。 - Alexandre Elshobokshy

Answer 4

在我的情况下，隐藏字段解决方案是一个好的解决方案，但Select2插件仍然保持数字/字母顺序，而不是用户选择的顺序。

我找到了一个解决方案，解决了我所有的需求。

在我的Symfony表单声明中，将有一个名为selectOrder的隐藏字段，用于保存当前顺序：

$("#form_people").on('change', function(){
    var data = $(this).select2('data');
    var array = [];
    $.each(data, function(index, val) {
        array[index]=val.id;
    });
    array.join(',');
    $("#selectOrder").val( array );
});

在表单声明后的javascript部分，有我的多选Select2：

var sel = $("#form_people").select2({
    maximumSelectionSize: 3,
    minimumInputLength: 1,
    escapeMarkup: function(m) { return m; },
});

然后

//After reloading page you must reselect the element with the
//right previous saved order
var order = $("#selectOrder").val().split(",");
var choices = [];
for (i = 0; i < order.length; i++) {
    var option = $('#form_people option[value="' +order[i]+ '"]');
    choices[i] = {id:order[i], text:option[0].label, element: option};
}
sel.select2('data', choices);

这正是我所需要的，也许可以帮助其他开发者

- up2europe