前の記事では、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のウェブサイトへのご支援ありがとうございます!