前の記事では、Bootstrapに基づくMetronic Frameworkは、Page Linkのお気に入りの関数を実装しています。これは、リンクのお気に入りの関数の実装とお気に入りのレコードの並べ替えを導入します。このエッセイは、主に関数ボタンを使用してコレクションレコードを移動します。この機能は適切に実装されていますが、記事が発表された後、一部の読者は、直接ドラッグを使用してソートする方が便利であると指摘しました。したがって、リストレコードの並べ替えが調査されたため、ソート可能なオープンソースJSコンポーネントを使用してドラッグソートを実装する方法を紹介しました。このエッセイでは、お気に入りのソートを接続する際にこのコンポーネントの適用を紹介します。
1。お気に入りのレコードの並べ替えと処理のレビュー
前のエッセイで導入されたお気に入りの処理は、主にユーザーが一般的に使用される関数のモジュールをすばやく入力できるようにすることです。お気に入りのレコードの数が増えるにつれて、使用を促進するために合理的に並べ替える必要があります。
元のお気に入りのレコードソートインターフェイスは次のとおりです。
このインターフェイスには、上向きまたは下向きを含むレコードの移動処理が含まれています。
実装された論理コードは、主に現在のレコードの以前のレコードとその後のレコードの並べ替えを調整し、それにより位置調整が実現します。コードを以下に示します。
/// <summary> ///アップデートアップまたはダウンオーダー/// </summary> /// <param name = "id">録画id </param> /// <param name = "moveup"> up up> up、true </param> /// false; webfavoriteInfo info = findbyid（id）; if（info！= null）{// query string condition = ""; if（isdescending）{条件= string.format（ "seq {0} {1}"、moveup？ ">"： "、<"、seq）; "<"： ">"、info.seq）;} var list = basedal.find（条件）;小数newseq = 0m; switch（list.count）{case 0：newseq = info.seq; //既に上部または下部にある場合、順序はデフォルトで変更されていません。 （list [0] .seq + 1m）：（リスト[0] .seq -1m）;} else {newseq =！moveup？ （list [0] .seq + 1m）：（リスト[0] .seq -1m）;} break; case 2：//中央領域、newseq =（list [0] .seq + list [1] .seq）/2m; default：// 2つ以上のケースif（moveup）{newseq =（list.count -2] [list.count -count -2]を取得します。 2m;} else {newseq =（list [0] .seq + list [1] .seq）/2m;} break;} // Unified Modification Order info.seq = newseq; result = update（info、info.id）;} return result;}上記のコードでは、現在の移動レコードの位置を決定し、上または下にソートしたレコードを取得します。レコードの数が0の場合、上部または下部にあります。 1つのレコードの場合、レコードから特定の値を追加または減算することは、新しいソートされた位置の値としてです。 2つのレコード以上のレコードの場合は、最新の2つのレコードと平均値の2つのレコードを取得します。
2。お気に入りのドラッグおよびソートプロセス
上記の処理は基本的な要件を満たすことができ、調整位置も正しいです。しかし、リスト項目を並べ替えることができれば、より便利でフレンドリーになります。
ソートのドラッグに基づいて、GitHubで比較的高いランク付けされているより優れたJS処理コンポーネント（ソート可能）が見つかりました。
このコントロールの使用は比較的簡単で、コードは次のとおりです。
<ul id = "items"> <li>項目1 </li> <li>アイテム2 </li> <li>アイテム3 </li> </ul> var el = document.getElementbyId（ 'items'）; var sortable = new sortable（el）;
まず、最終的にsortableと統合したインターフェイスを見てみましょう。
これにより、レコードを移動することで位置を調整できます。
まだページネーションを使用してリストを表示して、検索効率を向上させます。
<div> <div> <div> <span>ディスプレイ</span> <id = "rows" onchange = "changerows（）"> <option> 10 </option> <option selected> 50 </option> <option> 100 </option> <option> 1000 </option> </select> <span> span> <span> </span> <span> <span> <span> <span> <span> <span> <span> </span> 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-9a9a-d8b405884389">システムユーザー情報</a> <i> <i>✖</i> </div>
レコードが更新された後、ソート可能なコンポーネントには、以下に示すように、処理するためのOnUpDateイベントがあります。
var grid_body = document.getElementbyId（ 'grid_body'）; new Sortable（grid_body、{handle： '.glyphicon-move'、filter： ".js-remove"、animation：150、onupdate：function（/** event*/evt）{var list = []; {list.push（{'text'： 'text'：ited.text、 'value'：item.href}）;}）; var url = "/webfavorite/editfavorite"; var postdata = {list：list}; $。post（url、postdata、function（json）{var data = $ .persjson（json）; {// showtips（ "operation scuceds"）; refresh（）; // refresh page data} else {showtips（data.errormessage）;}}）;}、}）;このようにして、ビジネス処理をEditFavoriteメソッドに引き渡します。これは、主に統一された方法でリストレコードを更新します。処理ロジックは、最初に以前のレコードを削除してから、リストコレクションレコードを追加し、ソートレコードを適切な順序に設定することです。
/// <summary> ///編集録音リスト/// </summary> /// <param name = "list">レコードリスト</param> /// <returns> </returns> [httppost] [httppost] public result editfavorite（list <clistiTem> list）{commonResult result = new commoneRust（new commone.id; dbtranser.id bllfactory <webfavorite> .instance.createTransaction（）; if（trans！= null）{try {// delete first and record var condition = string.format（ "creator = '{0}'"、userid）;リストの項目）{webfavoriteInfo info = new webfavoriteinfo（）; info.title = itex.text; info.url = item.value; info.seq = i - ; info.creator = currentUser.id.tostring（）; true;} catch（exception ex）{result.errormessage = ex.message; trans.rollback（）; loghelper.error（ex）;}} return tojsoncontent（result）;}上記は、お気に入りのリストをドラッグアンドソートするための改善です。ソート可能なJSコンポーネントを、実際のプロジェクトで合理的に使用して、ユーザーの身体検査結果を改善できることを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！