我正在使用 select2 库select2()
字段,并在字段中启用了拖放排序。
运行良好,但是一旦我保存它,排序就会中断,并且它们按字母顺序排序。
我想知道是否可以在 select2() 字段中拖放后保存元素的顺序。
请指教。
根据 Select2 文档,新的有序值保存在附加的隐藏字段中。http://ivaynberg.github.io/select2/
(右键单击输入字段,然后检查元素以在div#select2-容器之后找到下面的行)
有两个选项可能适合您:
选项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 });
});
});
请注意,此代码可能不适用于数据库绑定字段,如果需要,您可能需要添加一些代码。
我有你的问题。我已经用这样的东西克服了它...
- 隐藏输入以保存您的订单。
- 选择2上的侦听器。
$("#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]
就会以正确的顺序发送到您的页面。
Select2 已升级到版本 4,该版本基于 <select/>
和 <option/>
-tags,而不是 <input/>
-tags。我在版本 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');
})
基本上,我将所选项目删除并重新添加到选择选项列表中,以便它们按选择顺序显示。
在我的情况下,隐藏字段解决方案是一个很好的解决方案,但 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部分中,有我的Multi 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);
这就是我需要的,也许可以帮助其他开发人员