Я создал список событий в select, он генерирует опцию разметки на стороне сервера в php и отображает их на стороне клиента.Опции, созданные на стороне сервера, имеют только обычные атрибуты и текст между открывающими и закрывающими тегами, ничего особенного
<option value="myvalue" data-sort="mysortcriteria" class="myclasses">mytext</option>
Использование клиентской стороны jQuery Я добавляю вариант из формы в выборку, используя тот жестрока из php для опций с различными переменными на месте для значений атрибутов и т. д. Затем происходит сортировка опций по дате, хранящейся в data-sort = "mysortcriteria", которая имеет тот же формат даты.Это функция сортировки:
var event_list_json = [{date="somedate"},{date="somedate"},{date="somedate"}]
event_list_json.sort( sort_by_date );
, где sort_by_date - моя пользовательская функция сортировки javascript:
function sort_by_date(a, b)
{
return new Date(a.date).getTime() - new Date(b.date).getTime();
}
После выполнения она сортирует выбор, но старые опции сортируются со старыми параметрамии сверху новые опции сортируются с новыми, но не сортируются вместе ... Я уверен, что я делал это раньше, но по какой-то причине это не работает ???Я использую jQuery UI Selectable, но я не делаю никаких вызовов через виджет, просто используя собственный JavaScript.
Вывод выглядит так, что отличается от дополнительного «стиля», который каким-то образом добавляется к старым параметрамони идентичны, но вы можете видеть, что они не смешиваются вместе при сортировке.
<ol id="selectable" class="ui-selectable">
<li class="ui-widget-content ui-selectee" data-sort="Mar 22, 2012">Mar 22, 2012 - Dinner in Duncan</li>
<li class="ui-widget-content ui-selectee" data-sort="May 7, 2012" style="">May 7, 2012 - Breakfast in Victoria</li>
<li class="ui-widget-content ui-selectee" data-sort="May 10, 2012" style="">May 10, 2012 - Breakfast in Victoria</li>
<li class="ui-widget-content ui-selectee" data-sort="May 12, 2012" style="">May 12, 2012 - Breakfast in Victoria</li>
<li class="ui-widget-content ui-selectee" data-sort="May 29, 2012" style="">May 29, 2012 - Breakfast in Victoria</li>
<li class="ui-widget-content ui-selectee" data-sort="May 30, 2012" style="">May 30, 2012 - Breakfast in Victoria</li>
<li class="ui-widget-content ui-selectee" data-sort="May 31, 2012" style="">May 31, 2012 - Breakfast in Victoria</li>
</ol>
Исходный список выглядит следующим образом:
<ol id="selectable" class="ui-selectable">
<li class="ui-widget-content ui-selectee" data-sort="May 12, 2012" style="">May 12, 2012 - Breakfast in Victoria</li>
<li class="ui-widget-content ui-selectee" data-sort="May 10, 2012" style="">May 10, 2012 - Breakfast in Victoria</li>
<li class="ui-widget-content ui-selectee" data-sort="May 7, 2012" style="">May 7, 2012 - Breakfast in Victoria</li>
<li class="ui-widget-content ui-selectee" data-sort="May 30, 2012" style="">May 30, 2012 - Breakfast in Victoria</li>
<li class="ui-widget-content ui-selectee" data-sort="May 29, 2012" style="">May 29, 2012 - Breakfast in Victoria</li>
<li class="ui-widget-content ui-selectee" data-sort="May 31, 2012" style="">May 31, 2012 - Breakfast in Victoria</li>
</ol>
Вот что я выполняю, чтобы добавить элементи отсортировать родителя:
// Update markup
var event_list_select = jQuery( "#selectable" );
event_list_select.append('<li class="ui-widget-content ui-selectee" data-sort="' + event_date + '">' + event_date + " - " + event_type + " in " + event_location + '</li>');
// Sort json and selector chronologically
sort_html_by_data_attr( event_list_select );