Добавление элементов в порядке возрастания от значения массива - PullRequest
Новая
       2

Добавление элементов в порядке возрастания от значения массива

0 голосов
/ 17 июня 2019

Я использую selectize.js , в котором данные добавляются массивом. Я хочу получить раскрывающийся список порядка как DISPLAYORDER, определенный в объекте.

Ниже кода, который генерирует списки. 

option: function(item, escape) {
    var popular = escape(item.ISPOPULAR) == 1 ? ' '+'isPopular' : '';
    return '<div class="option'+popular+'" data-scope="'+escape(item.TRAVELSCOPE)+'">' + item.COUNTRY + '</div>';
}

enter image description here

var countries_list = [ 
    {COUNTRY: "Canada", TRAVELSCOPE: 0, ISPOPULAR: 1, DISPLAYORDER: 2},
    {COUNTRY: "Thailand", TRAVELSCOPE: 3, ISPOPULAR: 1, DISPLAYORDER: 3},
    {COUNTRY: "Australia", TRAVELSCOPE: 1, ISPOPULAR: 1, DISPLAYORDER: 5},
    {COUNTRY: "Switzerland", TRAVELSCOPE: 2, ISPOPULAR: 1, DISPLAYORDER: 4},
    {COUNTRY: "United Kingdom (UK)", TRAVELSCOPE: 1, ISPOPULAR: 1, DISPLAYORDER: 6},
    {COUNTRY: "Singapore", TRAVELSCOPE: 3, ISPOPULAR: 1, DISPLAYORDER: 7},
    {COUNTRY: "Indonesia", TRAVELSCOPE: 3, ISPOPULAR: 1, DISPLAYORDER: 8},
    {COUNTRY: "Malaysia", TRAVELSCOPE: 3, ISPOPULAR: 1, DISPLAYORDER: 9},
    {COUNTRY: "Germany", TRAVELSCOPE: 2, ISPOPULAR: 1, DISPLAYORDER: 11},
    {COUNTRY: "South korea", TRAVELSCOPE: 3, ISPOPULAR: 0, DISPLAYORDER: 0},
    {COUNTRY: "USA", TRAVELSCOPE: 0, ISPOPULAR: 1, DISPLAYORDER: 1},
    {COUNTRY: "Iraq", TRAVELSCOPE: 3, ISPOPULAR: 0, DISPLAYORDER: 0},
    {COUNTRY: "Afghanistan", TRAVELSCOPE: 3, ISPOPULAR: 0, DISPLAYORDER: 0},
    {COUNTRY: "Albania", TRAVELSCOPE: 1, ISPOPULAR: 0, DISPLAYORDER: 0},
    {COUNTRY: "Italy", TRAVELSCOPE: 2, ISPOPULAR: 1, DISPLAYORDER: 10},
    {COUNTRY: "Algeria", TRAVELSCOPE: 1, ISPOPULAR: 0, DISPLAYORDER: 0}
];

$('#select-coutries').selectize({
    hideSelected:false,
    preload:true,
    selectOnTab:true,
    plugins: ['remove_button'],
    valueField: 'COUNTRY',
    labelField: 'COUNTRY',
    searchField: 'COUNTRY',
    options:countries_list,
    openOnFocus: true,
    render: {
        item: function(item, escape) {
            return '<div class="item" data-scope="'+escape(item.TRAVELSCOPE)+'" data-value="'+escape(item.COUNTRY)+'">' + item.COUNTRY + '</div>';
        },
        option: function(item, escape) {
            var popular = escape(item.ISPOPULAR) == 1 ? ' '+'isPopular' : '';
            return '<div class="option'+popular+'" data-scope="'+escape(item.TRAVELSCOPE)+'">' + item.COUNTRY + '</div>';
        }
    },
});
<link href="https://selectize.github.io/selectize.js/css/selectize.default.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://selectize.github.io/selectize.js/js/selectize.js"></script>

<select id="select-coutries" name="countires[]" multiple class="demo-default" placeholder="Type countries...">
  <option value="">type in here...</option>
</select>

1 Ответ

1 голос
/ 17 июня 2019

Вам нужно отсортировать countries_list перед тем, как перейти к selectize, например: 

countries_list.sort((a,b) => a.DISPLAYORDER && b.DISPLAYORDER
   ? a.DISPLAYORDER - b.DISPLAYORDER 
   : a.DISPLAYORDER ? -1 : 0)

Итак, ваш код будет выглядеть так: 

$('#select-coutries').selectize({
    options: countries_list.sort((a,b) => a.DISPLAYORDER && b.DISPLAYORDER
      ? a.DISPLAYORDER - b.DISPLAYORDER 
      : a.DISPLAYORDER ? -1 : 0),
    // ... rest of the configuration for selectize
});

Рабочая версия может быть здесь.

...