في المقالة السابقة: يقوم الإطار المتروني القائم على BootStrap بتنفيذ الوظيفة المفضلة لربط الصفحة ، والتي تقدم تنفيذ الوظيفة المفضلة Link وفرز السجلات المفضلة. يستخدم هذا المقال بشكل أساسي أزرار الوظائف لنقل سجلات التجميع. على الرغم من أن الوظيفة يتم تنفيذها بشكل جيد ، بعد ظهور المقالة ، أشار بعض القراء إلى أنه من المريح الفرز باستخدام السحب المباشر. لذلك ، تمت دراسة فرز سجلات القائمة ، وبالتالي تقديم كيفية استخدام مكون المصدر المفتوح JS القابل للفرز لتنفيذ فرز السحب. يقدم هذا المقال تطبيق هذا المكون في توصيل الفرز المفضلات.
1. مراجعة فرز ومعالجة السجلات المفضلة
تتمثل المعالجة المفضلة في المقال السابق في تسهيل المستخدمين إلى إدخال وحدة نمطية من الوظائف الشائعة الاستخدام بسرعة. مع زيادة عدد السجلات المفضلة ، من الضروري بالنسبة لنا فرزها بشكل معقول لتسهيل استخدامنا.
واجهة فرز التسجيل المفضلة الأصلية هي كما يلي.
تحتوي هذه الواجهة على معالجة الحركة للسجلات ، بما في ذلك الصعود أو الهبوط.
يضبط الرمز المنطقي المنفذ بشكل أساسي فرز السجلات السابقة واللاحقة للسجل الحالي ، وبالتالي تحقيق تعديل الموضع. يظهر الرمز أدناه.
/// <summary> /// update Up أو Down Order /// </summary> /// <param name = "id"> معرف مسجل </param> /// <param name = "moveup"> Up أو تحرك ، True </param> // </returns> public bool updown (string idown) false ؛ webfavoriteInfo info = findById (id) ؛ if (info! = null) {// إنشاء شرط سلسلة الاستعلام = "" ؛ if (isDescending) {string = string.format ("seq {0} {1}" ، تحرك؟ ">": ؟ "<": ">" ، info.seq) ؛} var rip (قائمة [0]. seq + 1m): (قائمة [0]. (قائمة [0] .Seq + 1M): (قائمة [0]. 2m ؛} else {newSeq = (list [0]. seq + list [1]في الكود أعلاه ، من خلال تحديد موضع السجل المتحرك الحالي ، ثم الحصول على السجلات المرتبة أعلاه أو أدناه. إذا كان عدد السجلات 0 ، فهو في الأعلى أو الأسفل. إذا كان سجلًا واحدًا ، فإن إضافة أو طرح قيمة معينة من السجل هي قيمة الموضع المصنفة الجديد. إذا كان سجلًا أكبر من أو يساوي سجلين ، فاحصل على سجلين لأحدث قيمهما ومتوسطهما.
2. سحب وفرز عملية المفضلة
يمكن أن تلبي المعالجة أعلاه المتطلبات الأساسية وموضع التعديل صحيح أيضًا. ولكن إذا استطعنا سحب عناصر القائمة لفرزها ، فسيكون ذلك أكثر ملاءمة وودية.
استنادًا إلى سحب الفرز ، وجدت مكونًا أفضل لمعالجة JS (قابل للفرز) ، والذي يحتل المرتبة العالية نسبيًا على Github ، وأعتقد أن هناك الكثير من الأشخاص الذين يستخدمونه.
استخدام عنصر التحكم هذا بسيط نسبيًا ، والرمز هو كما يلي.
<ul id = "items"> <li> البند 1 </li> <li> البند 2 </li> <li> البند 3 </li> </ul> var el = document.getElementById ('items') ؛ var volutable = new fortable (el) ؛دعونا نلقي نظرة أولاً على الواجهة التي قمت بدمجها أخيرًا مع الفرز.
بهذه الطريقة يمكننا ضبط الموضع عن طريق تحريك السجل.
ما زلنا نستخدم ترقيم الصفحات لعرض القوائم لتحسين كفاءة الاسترجاع.
<viv> <viv> <viv> <span> عرض </span> <select id = "rows" onChange = "changerows ()"> <spoint> 10 </soph> <selects select> 50 </sope> <tove> 100 </soph> <tove> 1000 </soph> </select> </select> </span> سجلات المجموع </span> <span> id = 'totalPageCount'> 0 </span> صفحات. </viv> <hr/> <div id = "grid_body" class = 'list-group'> </viv> <viv> <ul id = 'grid_paging'> </ul> </viv> </viv> </viv>
هنا يمكننا إنشاء سلسلة من سجلات القائمة في Grid_body.
<viv> <span aria-hidden = "true"> </span> <a id = "E1F462C6-C749-4258-836F-E13EE8C8ACD7" href = "http: // localhost: 2251/user/index؟ tid = 2744dbf5-a648-47c1-9e9a-d8b40584389"> معلومات مستخدم النظام </a> <i> ✖ </i> </iviv>
بعد تحديث السجل ، يحتوي المكون القابل للفرز على حدث ONUPDATE للتعامل معه ، كما هو موضح أدناه.
var grid_body = document.getElementById ('grid_body') ؛ جديد قابل للفرز (grid_body ، {handle: '.glyphicon-move' ، filter: ".js-remove" ، الرسوم المتحركة: 150 ، onupdate: function (/** event*/evt) {var list = [] {list.push ({'text': item.text ، 'value': item.href}) ؛}) ؛ var url = "/webfavorite/editfavorite" ؛ var postData = {list: lear} ؛ $. {// showtips ("التشغيل الناجح") ؛ refresh () ؛ // تحديث بيانات صفحة} آخر {showtips (data.errormessage) ؛}}) ؛} ،}) ؛وبهذه الطريقة ، نقوم بتسليم المعالجة التجارية إلى طريقة EditFavorite ، والتي تقوم بتحديث سجلات القائمة بشكل أساسي بطريقة موحدة. يتمثل منطق المعالجة أولاً في حذف السجلات السابقة ، ثم إضافة سجلات مجموعة القائمة ، وتعيين سجلات الفرز الخاصة بهم على الطلب المناسب.
/// <summary> //// edit list stist /// </summary> /// <param name = "list"> قائمة السجلات </param> /// <retters> </rovends> [httppost] public actionResult editfavorite (list <listitem> list) {commonResult result = new commonresult () bllfactory <bebfavorite> .instance.createtransactaction () ؛ if (trans! = null) {try {// delete first and record var inction = string.format ("creator = '{0}'" ، userId) ؛ bllfactory <webfavorite> .instance.deleteBytionition (intract) ؛ (عنصر clistitem في القائمة) {webfavoriteItInfo info = new WebFavoriteInfo () ؛ info.title = item.text ؛ info trans) ؛} trans.commit () ؛ result.success = true ؛} catch (استثناء ex) {result.errormessage = ex.message ؛ trans.rollback () ؛ logHelper.Error (ex) ؛}} return tojsoncontما سبق هو تحسين لسحب وفرز قائمة المفضلة. آمل أن يتم استخدام مكون JS القابل للفرز بشكل معقول في المشاريع الفعلية لتحسين نتائج الفحص البدني لمستخدمينا. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!