Выберите 2.0 с использованием templateResult с ajax - PullRequest
Новая
       8

Выберите 2.0 с использованием templateResult с ajax

0 голосов
/ 26 февраля 2019

Мне нужно отформатировать результат на select2 с помощью ajax, используя templateResult. 

<select id="example" style="width:400px">
<optgroup data-anag="Month" data-col1="Col1" data-col2="Col2">
    <option data-anag="January" data-col1="jan1" data-col2="jan2" value="JAN">January</option>
    <option data-anag="February" data-col1="feb1" data-col2="feb2" value="FEB">February</option>
    <option data-anag="March" data-col1="mar1" data-col2="mar2" value="MAR">March</option>
    <option data-anag="April" data-col1="apr1" data-col2="apr2" value="APR">April</option>
</optgroup>
</select>

<select id="example2" style="width:400px">
</select>




function formatRes(data) {

  var month = $(data.element).data('anag');
  var c1 = $(data.element).data('col1');
  var c2 = $(data.element).data('col2');

  var $result = $(
    '<div class="row">' +
    '<div class="col-md-4 col-xs-4">' + month + '</div>' +
    '<div class="col-md-2 col-xs-2">' + c1 + '</div>' +
    '<div class="col-md-2 col-xs-2">' + c2 + '</div>' +
    '</div>'
  );
  return $result;
}



// NON AJAX VERSION: WORK GREAT
$('#example').select2({
    templateResult: formatRes
});


//AJAX VERSION: DOESN'T WORK

var jsonresp = '[ {"id":"1", "name": "January", "col1":"jan1", "col2":"jan2"},  {"id":"2", "name": "February", "col1":"feb1", "col2":"feb2"}, {"id":"3", "name": "March", "col1":"mar1", "col2":"mar2"}, {"id":"4", "name": "April", "col1":"apr1", "col2":"apr2"}]';

$("#example2").select2({
templateResult: formatRes,
      ajax: {
        url: "/echo/json/",
        delay: 500,
        dataType: 'json',
    params: {contentType: "application/json"},
                data: function(term, page){             
                //Code for dummy ajax response
                    return {
                        json: jsonresp,
                        delay: 0
            };
                },
        processResults: function (data) {
            return {
                results: $.map(data, function (item) {

                    return {
                        text: item.name,
                        id: item.id,
                        col1: item.col1,
                        col2: item.col2
                    }
                })
            };
        }
      }
    });

Мне нужно построить тот же результат из примера (1) в пример (2) в моей скрипке:

https://jsfiddle.net/sdejLqkx/2/

Но, используя версию с ajax, я не знаю, как отредактировать ее, чтобы получить ту же структуру результата, что и в примере (1):

  1. с вложением optgroup
  2. с использованием templateResult в версии ajax

РЕДАКТИРОВАТЬ: У меня есть некоторые улучшения.Теперь я получаю столбцы в ответ с ajax, но я не знаю, как добавить корпус optgroup.https://jsfiddle.net/sdejLqkx/3/

1 Ответ

0 голосов
/ 26 февраля 2019

Из документации select2 : Возвращает корневой объект в processResults с children элементами.

https://jsfiddle.net/071p5af8/1/

    processResults: function(data) {
      return {
        results: [{
          name: "Month",
          col1: "Col1",
          col2: "Col2",
          children: $.map(data, function(item) {
            item.text = item.name;
            return item;
          })
        }]
      };
    }
...