Dalam artikel sebelumnya: Kerangka Metronik berdasarkan Bootstrap mengimplementasikan fungsi Favorit Tautan Halaman, yang memperkenalkan implementasi fungsi favorit tautan dan penyortiran catatan favorit. Esai ini terutama menggunakan tombol fungsi untuk memindahkan catatan koleksi. Meskipun fungsinya diimplementasikan dengan baik, setelah artikel keluar, beberapa pembaca menunjukkan bahwa lebih mudah untuk mengurutkan dengan menggunakan drag langsung. Oleh karena itu, penyortiran catatan daftar dipelajari, dan dengan demikian memperkenalkan cara menggunakan komponen JS open source yang dapat diurutkan untuk menerapkan penyortiran seret. Esai ini memperkenalkan aplikasi komponen ini dalam menghubungkan penyortiran favorit.
1. Tinjauan penyortiran dan pemrosesan catatan favorit
Pemrosesan favorit yang diperkenalkan dalam esai sebelumnya terutama untuk memfasilitasi pengguna untuk dengan cepat memasukkan modul fungsi yang umum digunakan. Ketika jumlah catatan favorit meningkat, perlu bagi kita untuk mengurutkannya secara wajar untuk memfasilitasi penggunaan kita.
Antarmuka rekaman favorit asli adalah sebagai berikut.
Antarmuka ini berisi pemrosesan catatan catatan, termasuk ke atas atau ke bawah.
Kode logis yang diimplementasikan terutama menyesuaikan penyortiran catatan sebelumnya dan selanjutnya dari catatan saat ini, sehingga mewujudkan penyesuaian posisi. Kode ditampilkan di bawah ini.
/// <summary> /// Perbarui pesanan naik atau turun /// </summary> /// <param name = "id"> ID yang direkam </param> /// <param name = "moving"> naik atau naik, true </param> // <Returns> </ Returns> Bool Updown (String ID, Bool Moving) {; false; webfavoriteInfo info = findById (id); if (info! = null) {// Bangun kondisi string kueri = ""; if (isDescending) {condition = string.format ("seq {0} {1}", moveup? ">" "<", info.seq);} {1} ", moveUp?"> "<": ">", info.seq);} var list = berbasis.find (kondisi); desimal newseq = 0m; switch (list.count) {case 0: newseq = info.seq; // sudah ada di atas atau bawah, pesanan tetap tidak diganti dengan default; case 1: // Ada catatan di atas atau di bawah, jika ada pesanan (case 1: // (Daftar [0] .seq + 1m): (Daftar [0] .seq - 1m);} else {newseq =! Movingup? (Daftar [0] .seq + 1m): (Daftar [0] .seq - 1m);} break; case 2: // Area tengah, ambil nilai rata -rata newseq = (daftar [0] .seq + daftar [1] .seq)/2m; break; default: // lebih dari dua kasus if (moving) {newseq = (list. 2m;} else {newseq = (daftar [0] .seq + daftar [1] .seq)/2m;} break;} // info pesanan modifikasi terpadu.seq = newSeq; hasil = perbarui (info, info.id);} hasil pengembalian;}Dalam kode di atas, dengan menentukan posisi catatan pemindahan saat ini, dan kemudian mendapatkan catatan diurutkan di atas atau di bawah. Jika jumlah catatan adalah 0, ada di bagian atas atau bawah. Jika itu adalah 1 catatan, maka tambahkan atau mengurangi nilai tertentu dari catatan adalah sebagai nilai dari posisi yang diurutkan baru. Jika itu adalah catatan yang lebih besar dari atau sama dengan 2 catatan, maka ambil dua catatan dari nilai -nilai terbaru dan rata -rata mereka.
2. Seret dan penyortiran favorit
Pemrosesan di atas dapat memenuhi persyaratan dasar dan posisi penyesuaian juga benar. Tetapi jika kita dapat menyeret item daftar untuk diurutkan, itu akan lebih nyaman dan ramah.
Berdasarkan penyortiran seret, saya menemukan komponen pemrosesan JS yang lebih baik (diurutkan), yang peringkatnya relatif tinggi di GitHub, dan saya kira ada banyak orang yang menggunakannya.
Penggunaan kontrol ini relatif sederhana, kodenya adalah sebagai berikut.
<ul id = "item"> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ul> var el = document.getElementById ('item'); var sortable = new sortable (el);Pertama -tama mari kita lihat antarmuka yang akhirnya saya berintegrasi dengan sortir.
Dengan cara ini kita dapat menyesuaikan posisi dengan memindahkan catatan.
Kami masih menggunakan pagination untuk menampilkan daftar untuk meningkatkan efisiensi pengambilan.
<div><div><div><span>Display</span><select id="rows" onchange="ChangeRows()"><option>10</option><option selected>50</option><option>100</option><option>1000</option></select><span> records</span><span>Total records: </span><span id='totalCount'>0</span>, total page count: <span ID = 'TotalPageCount'> 0 </span> halaman. </div> <hr/> <div id = "grid_body" class = 'list-group'> </div> <v> <ul id = 'grid_paging'> </ul> </div> </div> </div>
Di sini kita dapat membangun serangkaian catatan daftar di Grid_Body.
<div> <span aria-hidden = "true"> </span> <a id = "e1f462c6-c749-4258-836f-e13ee8c8acd7" href = "http: // localhost: 2251/pengguna/indeks? TID = 2744DBF5-A648-47C1-9E9A-D8B405884389"> Informasi Pengguna Sistem </a> <i> ✖ </i> </Div>
Setelah catatan diperbarui, komponen yang dapat diurutkan memiliki acara onupdate untuk ditangani, seperti yang ditunjukkan di bawah ini.
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 = [];//Construct the collection object $('.list-group div a').each(function (i, item) {list.push ({'text': item.text, 'value': item.href});}); var url = "/webfavorite/editFavorite"; var postdata = {list: list}; $. Posting (url, postdata, function (json) {var data = $ .parseJon (Url, postData, function (json) {var data = $ .parsejson (Url, postData, function (json) {var data = $ .parseJson (URL, postData, function (json) {var data = $ .parseJon (URL, postData, function (json) {var Data = $ .parseJson (Url, PostData, function (json) {var Data = $ .parsejson {// showTips ("Operation Succeeds"); refresh (); // Refresh Page Data} else {showTips (data.errormessage);}});},});Dengan cara ini, kami menyerahkan pemrosesan bisnis ke metode EditFavorite, yang terutama memperbarui catatan daftar dengan cara yang disatukan. Logika pemrosesan adalah untuk terlebih dahulu menghapus catatan sebelumnya, kemudian menambahkan catatan koleksi daftar, dan mengatur catatan penyortiran mereka ke urutan yang sesuai.
/// <summary> ////Edit daftar catatan /// </summary> /// <param name = "list"> daftar rekaman </param> // <returns> </eturns> [httppost] editresult public ActionResult (Daftar CommonRanRED = Daftar CommonRANSED = NEWRANSUCTE () {CommonRESURE COMMONRANSULT = NewReSult (); Daftar VARICTED = NEWRANSED; Bllfactory <sebArvavourite> .instance.createTransaction (); if (trans! = Null) {coba {// hapus pertama dan rekam kondisi var = string.format ("creator = '{0}', UserId); bllfactory <sebfavorite> .instance. (Item ClistItem dalam daftar) {webfouriteInfo info = new WebFavouriteInfo (); info.title = item.text; info.url = item.value; info.seq = i-; info.creator = CurrentUser.id.tostring (); bllfactory <sebfavourite> .instance.id.tostring (); bllfactory <En webfourite> .instance.idserTer (); info, info.instance.instance.instance.instance.instance.instancer. trans);} trans.commit (); result.success = true;} catch (exception ex) {result.errormessage = ex.message; trans.rollback (); loghelper.error (ex);}} return tobsonContent (hasil);}Di atas adalah peningkatan untuk menyeret dan mengurutkan daftar favorit. Saya berharap bahwa komponen JS yang dapat diurutkan dapat digunakan secara wajar dalam proyek aktual untuk meningkatkan hasil pemeriksaan fisik pengguna kami. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!