В предыдущей статье: Metronic Framework, основанная на Bootstrap, реализует любимую функцию ссылки страницы, которая представляет реализацию любимой функции ссылки и сортировку любимых записей. В этом эссе в основном используются функциональные кнопки для перемещения записей коллекции. Хотя функция реализована хорошо, после того, как статья вышла, некоторые читатели отметили, что ее удобнее сортировать, используя прямое сопротивление. Таким образом, была изучена сортировка записей списков и, таким образом, представление о том, как использовать сортируемый компонент JS с открытым исходным кодом для реализации сортировки перетаскивания. Это эссе представляет применение этого компонента в подключении фаворитов сортировки.
1. Обзор сортировки и обработки любимых записей
Обработка фаворитов, представленная в предыдущем эссе, заключается в том, чтобы в основном облегчить пользователям быстро ввести модуль часто используемых функций. По мере увеличения количества отчетов избранных, нам необходимо разобраться в их разумном виде, чтобы облегчить наше использование.
Первоначальный интерфейс сортировки записи фаворитов заключается в следующем.
Этот интерфейс содержит обработку записей движения, включая вверх или вниз.
Реализированный логический код в основном корректирует сортировку предыдущей и последующей записи текущей записи, тем самым реализуя корректировку позиции. Код показан ниже.
/// <summary> /// Обновление порядок вверх или вниз /// </summary> /// <param name = "id"> записанный идентификатор </param> /// <param name = "moveup"> up или перемещение, true </param> /// <return> </returns> public bool Updown (String id, bool moveup) {// set vording for sorting boo is is is ide is in is ide is ide rescolding = = rupesting = rupestending = true. false; webfavoriteinfo info = findbyid (id); if (info! = null) {// Создание строки запроса = ""; ? (Список [0] .seq + 1m): (List [0] .seq - 1m);} else {newseq =! MoveUp? (Список [0] .seq + 1m): (list [0] .seq - 1m);} break; case 2: // средняя область, возьмите среднее значение newseq = (list [0] .seq + list [1] .seq)/2m; break; default: // больше двух случаев, если (voipup) {newseq = (список. 2m;} else {newseq = (list [0] .seq + list [1] .seq)/2m;} break;} // Unified Modiation info.seq = newseq; result = update (info. info.id);} return;}В приведенном выше коде, путем определения позиции текущей движущейся записи, а затем получая записи, отсортированные выше или ниже. Если количество записей равно 0, оно находится сверху или снизу. Если это 1 запись, то добавление или вычитание определенного значения из записи является как значение новой отсортированной позиции. Если это запись, превышающая или равна 2 записям, то возьмите две записи о последних и их средних значениях.
2. Процесс перетаскивания и сортировки фаворитов
Вышеуказанная обработка может соответствовать основным требованиям, а положение корректировки также верна. Но если мы сможем перетащить элементы списка, чтобы сортировать, это будет более удобно и дружелюбно.
Основываясь на перетаскивании сортировки, я обнаружил, что лучший компонент обработки JS (сортируемый), который занимает относительно высокое место на GitHub, и я думаю, что есть много людей, которые используют его.
Использование этого управления относительно просто, код выглядит следующим образом.
<ul id = "items"> <li> Пункт 1 </li> <li> пункт 2 </li> <li> Пункт 3 </li> </ul> var el = document.getElementbyId ('items'); var ortable = new Sortable (el);Давайте сначала посмотрим на интерфейс, который я наконец интегрировал с сортировкой.
Таким образом, мы можем отрегулировать положение, перемещая запись.
Мы по -прежнему используем страницу для отображения списков для повышения эффективности поиска.
<div> <div> <div> <pan> display </span> <select id = "nachange =" changerows () "> <опция> 10 </option> <опция выбранная> 50 </option> <опция> 100 </option> <опция> 1000 </option> </select> <pan> records </span> total records: </span> <span> </span> 0 </span> counts: </span> <span> </span> 0 </span> countscount> 0. id = 'totalPageCount'> 0 </span> страницы. </div> <hr/> <div id = "grid_body" class = 'list-group'> </div> <div> <ul id = 'grid_paging'> </ul> </div> </div> </div>
Здесь мы можем построить серию записей списков в Grid_body.
<div> <span aria-hidden = "true"> </span> <a id = "e1f462c6-c749-4258-836f-e13ee8c8acd7" href = "http: // localhost: 2251/user/index? tid = 2744dbf5-a648-47c1-9e9a-d8b405884389"> Информация о системном пользователе </a> <i> ✖ </i> </div>
После обновления записи, сортируемый компонент имеет событие OnuPdate для обработки, как показано ниже.
var grid_body = document.getElementById ('grid_body'); new Sortable (grid_body, {handle: '. .glyphicon-move', filter: ".js-remove", анимация: 150, onupdate: function (/** event*/evt) {var dist = []; // Конструировать объект коллекции $ ('. {list.push ({'text': item.text, 'value': item.href});}); var url = "/webfavorite/editfavorite"; var postdata = {list: list}; $. post (url, postdata, function (json) {var data = $ .parsejson (json); сменить "); refresh (); // Обновление данных страницы} else {showtips (data.errormessage);}});},});Таким образом, мы передаем бизнес -обработку с методом EditFaverite, который в основном обновляет записи списка единым образом. Логика обработки состоит в том, чтобы сначала удалить предыдущие записи, а затем добавить записи сбора списков и установить их записи сортировки в соответствующий заказ.
/// <Summary> //////////METIT Список записей /// </summary> /// <param name = "list"> список записей </param> /// <return> </return> [httppost] public actorsult editfavorite (list <clistitem> list) {commonresult result = new commonresult (); vare user userScraction = ucradeSraction. BllFactory <webfavorite> .instance.createTransaction (); if (trans! = Null) {try {// DELETE First и запись var condition = string.format ("creator = '{0}'", userId); bllFactory <webFavorite> .Instance.DeleteByCondition (Condition); пункт в списке) {webfavoriteinfo info = new webfavoriteinfo (); info.title = item.text; info.url = item.value; info.seq = i-; info.creator = currentUser.id.toString (); bllFactory <webfavorite> .instance.insert (info); true;} catch (Exception ex) {result.errormessage = ex.message; trans.rollback (); loghelper.error (ex);}} return tojsoncontent (result);}Выше приведено улучшение для перетаскивания и сортировки списка фаворитов. Я надеюсь, что сортируемый компонент JS может быть разумно использовать в реальных проектах для улучшения результатов физического экзамена наших пользователей. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!