ในบทความก่อนหน้านี้สรุปประสบการณ์ของเฟรมเวิร์กการพัฒนา Metronic Bootstrap สรุป [i] ภาพรวมกรอบและการประมวลผลโมดูลเมนูสรุปพื้นฐานบางอย่างของเฟรมเวิร์กการพัฒนา bootstrap รวมถึงเอฟเฟกต์อินเทอร์เฟซโดยรวม
ในการแสดงผลข้อมูลอินเทอร์เฟซการแสดงผลและการเพจของข้อมูลตารางเป็นการดำเนินการประมวลผลที่พบบ่อยมาก การใช้เค้าโครงสไตล์ของ Bootstrap และการประมวลผลข้อมูล AJAX ของ JQuery การแสดงผลแบบไดนามิกและการเพจข้อมูลสามารถทำได้ดี
1. รายการแสดงรายการและการประมวลผลเพจ 1) รายการแสดงข้อมูล
ในหลาย ๆ หน้าเราจำเป็นต้องแสดงรายการและจัดทำบันทึกฐานข้อมูล
ส่วนต่อไปนี้ของรายการต้นไม้ทางด้านซ้ายคือพื้นที่แสดงข้อมูลการสืบค้นข้อมูลทั่วไปทางด้านขวาซึ่งแบ่งออกเป็นสองส่วน: เนื้อหาแบบสอบถามและรายการข้อมูล เนื้อหาแบบสอบถามมักจะอยู่ในรูปแบบสำหรับการประมวลผล เมื่อผู้ใช้ทริกเกอร์แบบสอบถามเราจะประมวลผลเหตุการณ์และขอข้อมูลที่สอดคล้องกันจากคอนโทรลเลอร์ในพื้นหลัง MVC เพื่อส่งคืนไปยังส่วนหน้าของหน้าและแสดงและแยกแยะข้อมูล
ดังที่แสดงในรหัสสอบถามของหน้าเมนูจะแสดงต่อไปนี้
<form id = "ffsearch"> <div> <div> <dable> ชื่อจอแสดงผล </label> <div> <อินพุตชื่อ = "whc_name" type = "text"> </div> </div> </div> <div> <divel> <label> ที่อยู่การเชื่อมต่อเว็บ </label> <div> <input name = "whc_url" type = "text"> </div> </div> </div> <div> <divel
ในรหัส JS ของหน้าเราจะประมวลผลการประมวลผลของข้อมูลหลังจากเริ่มต้นหน้าดังแสดงในสคริปต์ต่อไปนี้
// การเริ่มต้นหน้า $ (function () {initJstree (); // การเริ่มต้นแผนผัง treeive (); // การค้นหาการประมวลผลเหตุการณ์ที่มีผลผูกพัน (CurrentPage); // การเริ่มต้นของข้อมูลหน้าแรก InitDictItem (); // ข้อมูลพจนานุกรมเริ่มต้น});รหัส HTML สำหรับการแสดงข้อมูลจะแสดงด้านล่าง เนื้อหาหลักของส่วนหัวของตารางจะปรากฏขึ้นและเนื้อหาหลักของตาราง grid_body ถูกสร้างขึ้นและแสดงแบบไดนามิกโดยสคริปต์
<table id = "grid" cellpadding = "0" cellpacing = "0"> <thead id = "grid_head"> <tr> <th> <อินพุต type = "ช่องทำเครื่องหมาย" onclick = "selectall (this)"> </th> <th> th> th> th> th> th> th> th> th> ไอคอน </th> <th> หมายเลขระบบ </th> <th> การดำเนินการ </th> </tr> </thaid> <tbody id = "grid_body"> </tbody> </table>
การแสดงข้อมูลจะถูกประมวลผลผ่านฟังก์ชั่นสคริปต์การค้นหาหลังจากหน้าพร้อมแล้ว เมื่อการประมวลผลให้ผ่านเงื่อนไขของแบบฟอร์มหมายเลขซีเรียลและข้อมูลเงื่อนไขการเพจเข้าไปในคอนโทรลเลอร์ MVC เพื่อรับข้อมูลรายการที่เกี่ยวข้องและเชื่อมโยงกับอินเตอร์เฟสแบบไดนามิกเพื่อให้กระบวนการประมวลผลทั้งหมดเสร็จสมบูรณ์ ภาพหน้าจอรหัสเฉพาะแสดงอยู่ด้านล่าง
และรหัสภายใน
tr += getActionHtml (item.id);
จากนั้นปุ่มการทำงานบางส่วนจะถูกสร้างขึ้นผ่านสคริปต์อินเตอร์เฟสมีดังนี้
2) การประมวลผลการเพจข้อมูล
ข้อมูลที่แสดงในหน้าของเราโดยทั่วไปไม่ใช่บันทึกที่แน่นอนดังนั้นการแบ่งหน้าจึงเป็นการประมวลผลที่จำเป็นซึ่งสามารถปรับปรุงประสิทธิภาพและปรับปรุงประสบการณ์ที่เป็นมิตรกับผู้ใช้ การปู่ข้อมูลข้อมูลจะถูกประมวลผลโดยใช้ปลั๊กอิน bootstrap paginator ของ Bootstrap การควบคุมนี้ใช้มากและเป็นปลั๊กอินเพจที่ทรงพลังมาก
Bootstrap paginator ที่อยู่รหัส GitHub คือ: https://github.com/lyonlai/bootstrap-paginator
ตัวอย่างการใช้งานสามารถแนะนำได้โปรดดูที่: http://lyonlai.github.io/bootstrap-paginator/
เมื่อใช้การควบคุมนี้หลังจากแนะนำรูปแบบ jQuery และ bootstrap และไลบรารีคลาสแล้วคุณสามารถเพิ่มและใช้งานผ่านบรรทัดรหัสต่อไปนี้
<script src = "/js/bootstrap-paginator.min.js"> </script>
การเพจควบคุมนี้สามารถนำไปใช้ได้โดยการจัดการเหตุการณ์ที่คลิกหน้าและเหตุการณ์ที่เปลี่ยนหน้า
ในการแสดงเนื้อหาบนหน้าเราเพิ่ม DIV ลงในรหัส HTML และประกาศองค์ประกอบ UL ด้วย ID GRID_PAGIN รหัสมีดังนี้
<div><ul id = 'grid_paging'> </ul> </div>
จากนั้นรหัสการประมวลผล JS ที่เฉพาะเจาะจงมีดังนี้
ในพื้นหลังของ MVC เราจำเป็นต้องได้รับเงื่อนไขการเพจและเงื่อนไขข้อมูลแบบฟอร์มที่ส่งผ่านโดยผู้ใช้ในหน้าส่วนหน้าเพื่อให้เราสามารถรับข้อมูลที่เกี่ยวข้องตามพารามิเตอร์เหล่านี้และส่งกลับไปยังไคลเอนต์
เนื่องจากการประมวลผลเหล่านี้เป็นเรื่องธรรมดามากเราจึงสามารถวางไว้ในคอนโทรลเลอร์คลาสพื้นฐานสำหรับการประมวลผล หากจำเป็นต้องมีการประมวลผลพิเศษให้เขียนฟังก์ชั่นการแบ่งหน้า FindWithPager ในคอนโทรลเลอร์ย่อย
/// <summary> /// Query ฐานข้อมูลตามเงื่อนไขและส่งคืนการรวบรวมวัตถุ (สำหรับการแสดงข้อมูล pagination) /// </summary> /// <กลับ> ระบุคอลเลกชันของวัตถุ </returns> แอ็คชั่นเสมือนจริง สตริงที่ = getPagerCondition (); pagerinfo pagerinfo = getPagerInfo (); รายการ <t> list = basebll.findwithpager (โดยที่, pagerinfo); // ข้อกำหนดรูปแบบ JSON {ทั้งหมด: 22, แถว: {}} // สร้างรูปแบบของ JSON เพื่อส่งผล var result = new {total = pagerinfo.RecordCount, rows = list}; กลับ tojsonContentDate (ผลลัพธ์); -ในหมู่พวกเขา getPagerInfo คือการได้รับพารามิเตอร์การปนเปื้อนที่ผ่านโดยผู้ใช้ คุณยังจำพารามิเตอร์ URL ที่ประมวลผลโดยหน้าส่วนหน้าด้านบนดังที่แสดงด้านล่าง
url = "/เมนู/findwithpager? page =" + page + "& rows =" + rows;
รหัสการใช้งานของฟังก์ชัน MVC Controller เฉพาะ getPagerInfo มีดังนี้
/// <summary> /// รับข้อมูลวัตถุ pagination ตามพารามิเตอร์การร้องขอ /// </summary> /// <returs> </returns> ได้รับการป้องกันเสมือนจริง pagerinfo getpagerinfo () {int pageindex = คำขอ ["หน้า"] == null? 1: int.parse (คำขอ ["หน้า"]); int pagesize = คำขอ ["rows"] == null? 10: int.parse (คำขอ ["แถว"]); pagerinfo pagerinfo = ใหม่ pagerinfo (); PagerInfo.CurrenetPageIndex = PageIndex; pagerinfo.pagesize = pagesize; กลับ Pagerinfo; -จากนั้นหลังจากได้รับเงื่อนไขแบบฟอร์มและเงื่อนไขการเพจแล้วคลาสตรรกะทางธุรกิจที่ส่งผ่านไปยังเฟรมเวิร์กก็เพียงพอแล้ว นี่คือหมวดหมู่การสนับสนุนที่ด้านล่างของเฟรมเวิร์กและจะไม่ขยายต่อไป
รายการ <t> list = basebll.findwithpager (โดยที่, pagerinfo);
เอฟเฟกต์อินเทอร์เฟซสุดท้ายมีดังนี้
2. ปลั๊กอิน jstree
ส่วนก่อนหน้านี้ยังปรับปรุงการแสดงรายการต้นไม้ โดยทั่วไปหากข้อมูลเป็นลำดับชั้นการแสดงรายการต้นไม้สามารถแสดงโครงสร้างของพวกเขาได้อย่างสังหรณ์ใจ ดังนั้นในหลายกรณีรายการต้นไม้สามารถช่วยเราในการจัดหมวดหมู่ข้อมูล
ตัวอย่างเช่นสำหรับข้อมูลผู้ใช้เราสามารถจำแนกโครงสร้างหรือบทบาทขององค์กรของผู้ใช้และสามารถแสดงภาพผ่านรายการต้นไม้เพื่อให้เมื่อเราค้นหารายการผู้ใช้ประเภทต่าง ๆ มันเป็นเรื่องง่ายที่จะค้นหา
หรือสำหรับข้อมูลพจนานุกรมหรือข้อมูลจังหวัดและเมืองก็สามารถแสดงผ่านรายการต้นไม้
ที่อยู่อย่างเป็นทางการของการควบคุม JStree คือ https://www.jstree.com/
เว็บไซต์ได้ทำให้ชัดเจนเกี่ยวกับคำแนะนำและคำอธิบายกรณีของการควบคุม JStree โดยทั่วไปแล้วเราสามารถใช้พวกเขาได้โดยอ้างถึงตัวอย่างโดยตรง
รหัสการใช้งาน JStree อย่างง่ายมีดังนี้
$ (function () {$ ('#jstree_demo_div'). jstree ();});สำหรับเหตุการณ์ของ JStree โดยทั่วไปเราสามารถผูกเหตุการณ์ผ่านรหัสต่อไปนี้
$ ('#JSTREE_DEMO_DIV'). ON ("CHANGE.JSTREE", ฟังก์ชั่น (e, data) {console.log (data.selected);});สำหรับ JStree เรามักจะใช้ข้อมูล JSON เพื่อผูกแบบไดนามิก คำจำกัดความรูปแบบข้อมูลของ JSON นี้มีดังนี้
{id: "string" // parent ที่จำเป็น: "string" // ข้อความที่ต้องการ: "string" // ไอคอนข้อความโหนด: "สตริง" // สตริงสำหรับสถานะที่กำหนดเอง: {เปิด: บูลีน // คือโหนดเปิดปิดใช้งาน: บูลีน // คือโหนดที่เลือก: บูลีน // แอตทริบิวต์สำหรับโหนดที่สร้างขึ้น}โดยทั่วไปเราใช้สคริปต์ต่อไปนี้เพื่อล้างและผูกข้อมูล
$ ('#jstree_demo_div'). ข้อมูล ('jstree', false); // ล้างข้อมูลคุณต้อง // ผูกข้อมูล json แบบอะซิงโครนัส $ .getJson (url, ฟังก์ชั่น (data) {$ ('#jstree_demo_div') }). bind ('loaded.jstree', loadedFunction);});หากเราต้องการให้ช่องทำเครื่องหมายและตั้งค่าสถานะที่เลือกของ JStree เอฟเฟกต์อินเตอร์เฟสมีดังนี้
จากนั้นฟังก์ชันการเริ่มต้นทั่วไปจะต้องมีการเปลี่ยนแปลงดังที่แสดงในรหัสต่อไปนี้
// รหัสการเริ่มต้นของ JStree พร้อมช่องทำเครื่องหมาย $ .getJson (url, ฟังก์ชั่น (data) {control.jstree ({'ปลั๊กอิน': ["ช่องทำเครื่องหมาย"], // กล่องเลือกกล่องเลือก ': {cascade: "", three_state: false} }). bind ('loaded.jstree', loadedFunction);การรวมทั้งสองเราสามารถปรับแต่งการเริ่มต้นการเริ่มต้นของการควบคุม JStree ในฟังก์ชั่นสาธารณะ JS BindJstree
// เริ่มต้นการควบคุม JStree ด้วยข้อมูล JSON ที่ระบุ // treename คือชื่อ Div Tree, URL เป็นที่อยู่แหล่งข้อมูลช่องทำเครื่องหมายหรือไม่นั้นจะแสดงช่องทำเครื่องหมาย, โหลด function เป็นฟังก์ชันการโทรกลับที่โหลด = อาร์กิวเมนต์ [2] || เท็จ; // ตั้งค่าค่าเริ่มต้นของช่องทำเครื่องหมายเป็นเท็จถ้า (ischeck) {// เริ่มต้นแผนผังกล่องกาเครื่องหมาย $ .getJson (url, ฟังก์ชั่น (data) {control.jstree ({'ปลั๊กอิน': ["ช่องทำเครื่องหมาย"], // กล่องเลือก '' data ': "cascaded" "ตอบสนอง": false}}}). bind ('loaded.jstree', loadedFunction); } else {// การเริ่มต้นของรายการต้นไม้สามัญ $ .getJson (url, ฟังก์ชัน (data) {control.jstree ({'core': {'data': data, "Themes": {"ตอบสนอง": false}}}). -ดังนั้นเมื่อหน้าเชื่อมโยง JStree รหัสสามารถทำให้ง่ายขึ้น
// เริ่มต้นฟังก์ชั่นรายการองค์กร initDeptTreEview () {var treeUrl = '/user/getMyDeptJStreejson? userId =@เซสชัน ["userId"]'; bindjstree ("jstree_div", treeurl); // เปลี่ยนการประมวลผลเหตุการณ์ของการควบคุมต้นไม้ $ ('#jstree_div') on ("change.jstree", ฟังก์ชั่น (e, data) {var icon = data.node.icon; loaddatabyou (data.selected);}); -สำหรับรายการช่องทำเครื่องหมายรหัสการเริ่มต้นมีดังนี้
// เริ่มต้นชุดฟังก์ชั่นทั้งหมดของผู้ใช้ทั้งหมด var treeurl = '/function/getrolefunctionjstreeByUser? userId =@เซสชัน ["userId"]'; bindjstree ("tree_function", treeurl, true); // การอนุญาตข้อมูลบทบาทเริ่มต้นแผนกทั้งหมด FIRST TREEURL = '/ผู้ใช้/getMyDeptJStreeJson? userId =@เซสชัน ["userId"]'; bindjstree ("tree_roledata", treeurl, true);สำหรับกล่องกาเครื่องหมายเรามักจะเริ่มต้นข้อมูลจากนั้นตั้งค่าสถานะที่เลือกของรายการต้นไม้ตามต้องการ สิ่งนี้ไม่จำเป็นต้องมีการเริ่มต้นต้นไม้บ่อยครั้งซึ่งสามารถปรับปรุงประสิทธิภาพและประสบการณ์การตอบสนองได้อย่างมีประสิทธิภาพ
หลังจากเริ่มต้นรายการต้นไม้เราต้องล้างรายการที่เลือกแล้วตั้งค่ารายการที่เราต้องการ รหัสเฉพาะมีดังนี้ให้ความสนใจกับการประมวลผลเหตุการณ์ uncheck_all และ check_node
// เริ่มต้นชุดการอนุญาตข้อมูลบทบาท (องค์กร) ฟังก์ชั่น initroledata (id) {ถ้า (id! = "") {var treemenu = "tree_roledata"; $ ('#' + treemenu) .jstree ("uncheck_all"); // ยกเลิกการเลือกการเลือกทั้งหมด // ติ๊กเนื้อหาที่ระบุ $ .getjson ("/roledata/getRoledatalist? r =" + math.random () + "& roleid =" + id, ฟังก์ชั่น treemenu) .jstree ('check_node', รายการ); // เลือกโหนด});}); -เมื่อบันทึกข้อมูลเราจะได้รับรายการการเลือกโหนด JStree จากนั้นบันทึกข้อมูล รหัสเฉพาะมีดังนี้
// บันทึกฟังก์ชั่นการอนุญาตข้อมูลบทบาท saveroledata (roleid) {var oulist = $ ('#tree_roledata'). jstree ('get_selected'); var url = '/roledata/updatedata? r =' + math.random (); var postdata = {roleid: roleid, oulist: oulist.join (',')}; $ .post (url, postdata, function (json) {initroledata (roleid);}). ข้อผิดพลาด (ฟังก์ชั่น () {showtips ("คุณไม่ได้รับอนุญาตให้ใช้ฟังก์ชั่นนี้โปรดติดต่อผู้ดูแลระบบเพื่อจัดการกับมัน");}); -โอเคหลังจากทั้งหมดฉันได้แนะนำการแสดงข้อมูลปกติและการเพจข้อมูล การเชื่อมโยง JStree การประมวลผลเหตุการณ์การจัดเก็บข้อมูลและการดำเนินการอื่น ๆ ฉันหวังว่าจะได้รับการสนับสนุนอย่างต่อเนื่องของคุณ ฉันจะยังคงแนะนำประเด็นสำคัญที่เกี่ยวข้องกับการพัฒนา bootstrap และการใช้ปลั๊กอินต่างๆเพื่อให้การเรียนรู้เป็นรูปธรรมและการปฏิบัติมากขึ้นและสามารถให้การอ้างอิงที่เป็นประโยชน์แก่เราในโครงการพัฒนาราคาจริง
เนื้อหาข้างต้นเป็นบทสรุปของประสบการณ์ของกรอบการพัฒนา Bootstrap Metronic ตาม bootstrap [2] รายการการประมวลผลการปนเปื้อนและการใช้ปลั๊กอิน JStree ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคน ฉันขอขอบคุณสำหรับการสนับสนุนเว็บไซต์ Wulin.com ฉันเชื่อว่าเราจะทำได้ดีกว่านี้!