ในบทความก่อนหน้า: Metronic Framework ที่ใช้ Bootstrap ใช้ฟังก์ชั่นที่ชื่นชอบลิงค์หน้าซึ่งแนะนำการใช้งานฟังก์ชั่นที่ชื่นชอบของลิงก์และการเรียงลำดับของบันทึกที่ชื่นชอบ เรียงความนี้ส่วนใหญ่ใช้ปุ่มฟังก์ชันเพื่อย้ายบันทึกการรวบรวม แม้ว่าฟังก์ชั่นจะถูกนำไปใช้อย่างดีหลังจากบทความออกมาผู้อ่านบางคนชี้ให้เห็นว่ามันสะดวกกว่าในการเรียงลำดับโดยใช้การลากโดยตรง ดังนั้นจึงมีการศึกษาการเรียงลำดับของบันทึกรายการและแนะนำวิธีการใช้องค์ประกอบโอเพนซอร์ส JS แบบเรียงลำดับเพื่อใช้การเรียงลำดับการลาก บทความนี้แนะนำแอปพลิเคชันของส่วนประกอบนี้ในการเชื่อมต่อรายการโปรดเรียงลำดับ
1. การทบทวนการเรียงลำดับและการประมวลผลบันทึกที่ชื่นชอบ
การประมวลผลรายการโปรดที่แนะนำในเรียงความก่อนหน้านี้ส่วนใหญ่จะช่วยให้ผู้ใช้สามารถป้อนโมดูลของฟังก์ชั่นที่ใช้กันทั่วไปได้อย่างรวดเร็ว เมื่อจำนวนรายการโปรดเพิ่มขึ้นจึงจำเป็นสำหรับเราที่จะจัดเรียงพวกเขาอย่างสมเหตุสมผลเพื่ออำนวยความสะดวกในการใช้งานของเรา
รายการโปรดการบันทึกการเรียงลำดับดั้งเดิมมีดังนี้
อินเทอร์เฟซนี้มีการประมวลผลการเคลื่อนไหวของบันทึกรวมถึงการขึ้นหรือลง
รหัสตรรกะที่ใช้งานส่วนใหญ่จะปรับการเรียงลำดับของระเบียนก่อนหน้าและที่ตามมาของบันทึกปัจจุบันซึ่งจะตระหนักถึงการปรับตำแหน่ง รหัสจะแสดงด้านล่าง
/// <summary> /// อัปเดตคำสั่งซื้อขึ้นหรือลง /// </summary> /// <param name = "id"> id ที่บันทึกไว้ </param> /// <param name = "MoveUp"> UP หรือเลื่อนขึ้นไปจริง </param> /// false; webFavorIteInfo info = findById (id); if (info! = null) {// สร้างเงื่อนไขสตริงการสืบค้น = "" ถ้า (isdescending) {เงื่อนไข = string.format ("seq {0} {1}" ? "<": ">", info.seq);} var list = based.find (เงื่อนไข); ทศนิยม newseq = 0m; switch (list.count) {กรณี 0: newseq = info.seq; // อยู่ที่ด้านบนหรือด้านล่าง (รายการ [0] .seq + 1m): (รายการ [0] .seq - 1m);} else {newseq =! moveup? (รายการ [0] .seq + 1m): (รายการ [0] .seq - 1m);} break; กรณีที่ 2: // พื้นที่กลางใช้ค่าเฉลี่ย newseq = (รายการ [0] .seq + รายการ [1] .seq)/2m; break; เริ่มต้น: // มากกว่าสองกรณี 2m;} else {newseq = (รายการ [0] .seq + list [1] .seq)/2m;} break;} // unifiation modification order order.seq = newseq; result = update (info, info.id);} ผลตอบแทน;}}ในรหัสข้างต้นโดยการกำหนดตำแหน่งของบันทึกการเคลื่อนไหวปัจจุบันจากนั้นรับระเบียนที่เรียงลำดับด้านบนหรือด้านล่าง หากจำนวนระเบียนเป็น 0 มันจะอยู่ที่ด้านบนหรือด้านล่าง หากเป็น 1 ระเบียนการเพิ่มหรือลบค่าที่แน่นอนจากบันทึกเป็นค่าของตำแหน่งที่เรียงลำดับใหม่ หากเป็นบันทึกที่มากกว่าหรือเท่ากับ 2 ระเบียนให้ใช้สองบันทึกของค่าล่าสุดและค่าเฉลี่ยของพวกเขา
2. การลากและการเรียงลำดับกระบวนการโปรด
การประมวลผลข้างต้นสามารถตอบสนองความต้องการขั้นพื้นฐานและตำแหน่งการปรับได้ก็ถูกต้องเช่นกัน แต่ถ้าเราสามารถลากรายการเพื่อจัดเรียงมันจะสะดวกและเป็นมิตรมากขึ้น
จากการเรียงลำดับการลากฉันพบองค์ประกอบการประมวลผล JS ที่ดีกว่า (จัดเรียงได้) ซึ่งอยู่ในอันดับที่ค่อนข้างสูงบน GitHub และฉันคิดว่ามีคนจำนวนมากใช้มัน
การใช้การควบคุมนี้ค่อนข้างง่ายรหัสมีดังนี้
<ul id = "items"> <li> รายการ 1 </li> <li> รายการ 2 </li> <li> รายการ 3 </li> </ul> var el = document.getElementById ('รายการ'); var cortable = new cortable (el);ก่อนอื่นให้ดูที่อินเทอร์เฟซที่ฉันรวมเข้ากับการเรียงลำดับได้ในที่สุด
วิธีนี้เราสามารถปรับตำแหน่งโดยการย้ายบันทึก
เรายังคงใช้การปนเปื้อนเพื่อแสดงรายการเพื่อปรับปรุงประสิทธิภาพการดึง
<div> <div> <par> <span> แสดง </span> <select id = "rows" onchange = "changerows ()"> <pontion> 10 </ตัวเลือกที่เลือก <ตัวเลือกที่เลือก> 50 </petion> <petion> 100 </ตัวเลือก> <port> 1000 </optup> 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/ผู้ใช้/ดัชนี? TID = 2744DBF5-A648-47C1-9E9A-D8B405884389"> ข้อมูลผู้ใช้ระบบ </a> <i>
หลังจากอัพเดทบันทึกแล้วองค์ประกอบที่สามารถเรียงลำดับได้จะมีเหตุการณ์ onupdate ที่จะจัดการดังที่แสดงด้านล่าง
var grid_body = document.getElementById ('grid_body'); ใหม่ที่สามารถจัดเรียงได้ (grid_body, {handle: '.glyphicon-move', ตัวกรอง: ".js-remove", ภาพเคลื่อนไหว: 150, onupdate: ฟังก์ชั่น (/** event ** {list.push ({'text': item.text, 'value': item.href});}); var url = "/webfavorite/editFavorite"; var postdata = {list:}; $. post (url, postdata, ฟังก์ชัน (json) ประสบความสำเร็จ "); Refresh (); // Refresh Page Data} else {showtips (data.erRorMessage);}});},});ด้วยวิธีนี้เรามอบการประมวลผลทางธุรกิจไปยังวิธีการ EditFavorite ซึ่งส่วนใหญ่จะอัปเดตบันทึกรายการในลักษณะที่เป็นเอกภาพ ตรรกะการประมวลผลคือการลบเร็กคอร์ดก่อนหน้าก่อนจากนั้นเพิ่มบันทึกรายการรวบรวมรายการและตั้งค่าบันทึกการเรียงลำดับตามลำดับที่เหมาะสม
/// <summary> //// EDIT บันทึกรายการ /// </summary> /// <param name = "list"> รายการบันทึก </param> /// <return> </returns> [httppost] แอ็คชั่นสาธารณะ editFavorite (รายการ <clistItem> bllfactory <BebFavorite> .instance.createTransaction (); if (trans! = null) {ลอง {// ลบก่อนและบันทึก var condition = string.format ("creator = '{0}'", userid); bllfactory <webFavorite>. (รายการ clistItem ในรายการ) {webFavorIteInfo info = ใหม่ webFavorIteInfo (); info.title = item.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 (ผลลัพธ์);}ข้างต้นเป็นการปรับปรุงเพื่อลากและเรียงลำดับรายการโปรด ฉันหวังว่าองค์ประกอบ JS ที่สามารถจัดเรียงได้สามารถใช้งานได้อย่างสมเหตุสมผลในโครงการจริงเพื่อปรับปรุงผลการตรวจร่างกายของผู้ใช้ของเรา หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!