คำนำ: เมื่อฉันแนะนำองค์ประกอบ bootstarpable มาก่อนฉันพูดถึงฟังก์ชั่นการแก้ไขแบบอินไลน์ แต่เพื่อจุดประสงค์ในการแสดงฟังก์ชั่นฉันได้ทำสิ่งนี้และบอกว่ามันเป็นบาป! เมื่อเร็ว ๆ นี้ฉันยังคงวางแผนที่จะใช้การแก้ไขแบบอินไลน์ในโครงการดังนั้นฉันจึงศึกษาองค์ประกอบ X-Editable อีกครั้ง ฉันได้พบกับข้อผิดพลาดบางอย่างดังนั้นมาบันทึกหลุมที่นี่! เพื่อนที่ต้องการทราบเกี่ยวกับ bootstraptable สามารถย้ายไปยังชุด JS Component - Table Component Artifact: Bootstrap Table
1. บทนำสู่องค์ประกอบ X-Editable
ส่วนประกอบ X-Editable เป็นปลั๊กอินสำหรับการสร้างกล่องป๊อปอัพที่แก้ไขได้ รองรับสามสไตล์: Bootstrap, JQuery UI และ JQuery ผลกระทบทั่วไปมีดังนี้:
ตามสไตล์ปกติของบล็อกเกอร์ต้องเลือกอันแรกที่นี่ ก่อนอื่นให้ที่อยู่โอเพ่นซอร์ส
ที่อยู่โอเพ่นซอร์ส X-Editable: https://github.com/vitalets/x-editable
ที่อยู่เอกสาร X-Editable: http://vitalets.github.io/x-editable/docs.html
การสาธิตออนไลน์ X-Editable: http://vitalets.github.io/x-editable/demo-bs3.html
1. ประสบการณ์ครั้งแรกของ X-Editable
ก่อนอื่นดาวน์โหลดซอร์สโค้ดตาม bootstrap ไปยังพื้นที่ท้องถิ่น การอ้างอิงถึงไฟล์ที่เกี่ยวข้อง
<link href = "/content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <link href = "~/content/bootstrap3-editable/css/bootstrap-editable.css" rel = "Stylesheet"/> src = "/scripts/jQuery-1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js"> </script> <script src = "~/content/bootstrap3-
องค์ประกอบหน้า
คัดลอกรหัสดังนี้: <a href = "#" id = "ชื่อผู้ใช้" data-type = "text" data-title = "ชื่อผู้ใช้"> ชื่อผู้ใช้ </a>
การเริ่มต้น JS
$ (function () {$ ('#username') แก้ไขได้ ();});การแสดงผลเอฟเฟกต์
ข้างต้นคือการตั้งค่าพารามิเตอร์ X-Editable ผ่านแอตทริบิวต์ข้อมูล HTML แน่นอนฉันสามารถตั้งค่าพารามิเตอร์ในระหว่างการเริ่มต้น ตัวอย่างเช่นฉันแค่ให้แท็กเปล่า: <a href = "#" id = "ชื่อผู้ใช้"> ชื่อผู้ใช้ </a>
การเริ่มต้น JS
$ (function () {$ ('#username') แก้ไขได้ ({type: "text", // ประเภทของกล่องแก้ไขข้อความสนับสนุน | textarea | เลือก | วันที่ | รายการตรวจสอบและชื่ออื่น ๆ : "ชื่อผู้ใช้", // ชื่อของกล่องที่ว่างเปล่า: โหมดป๊อปอัพและอินไลน์ค่าเริ่มต้นคือการตรวจสอบความถูกต้องของป๊อปอัพ: ฟังก์ชั่น (ค่า) {// การตรวจสอบฟิลด์ถ้า (! $. trim (ค่า)) {return 'ไม่สามารถว่างเปล่า';ดูเอฟเฟกต์
มามีความซับซ้อนมากขึ้นเล็กน้อย
<a href = "#" id = "แผนก"> เลือกแผนก </a>
$ (function () {$ ('#แผนก'). แก้ไขได้ ({ประเภท: "เลือก", // ประเภทของกล่องแก้ไขข้อความสนับสนุน | textarea | เลือก | วันที่ | รายการตรวจสอบและแหล่งข้อมูลอื่น ๆ : [{value: 1, ข้อความ: "แผนกพัฒนา"}, {มูลค่า: 2, ข้อความ: "แผนกขาย" Title: "Select Department", // ชื่อของกล่องแก้ไขที่ปิดการใช้งาน: FALSE, // ไม่ปิดใช้งานการแก้ไข emportText: "ข้อความว่าง", // โหมดข้อความเริ่มต้นของค่าว่าง: "ป๊อปอัป", // โหมดการแก้ไขกล่อง: รองรับโหมดป๊อปอัพและอินไลน์) -ดูเอฟเฟกต์
บทความข้างต้นให้เฉพาะฟิลด์ที่ใช้กันทั่วไป แน่นอนว่าองค์ประกอบ X-Editable มีพารามิเตอร์การทำงานอื่น ๆ อีกมากมาย หากคุณสนใจคุณสามารถตรวจสอบเอกสาร เอกสารอย่างเป็นทางการมีคำอธิบายโดยละเอียดสำหรับแต่ละพารามิเตอร์
2. แผนเริ่มต้น bootstary สำหรับการแก้ไขในบรรทัด
หลังจากพูดคุยกันมานานแล้วสิ่งที่กล่าวมาข้างต้นเป็นเพียงการโหมโรง ในที่สุดเราก็หวังว่าจะใช้การแก้ไขแบบอินไลน์ใน Bootstraptable ตามกฎข้างต้นหากเราต้องการใช้ X-Editable เพื่อใช้การแก้ไขในบรรทัดจะต้องมีแท็กในเซลล์ของตารางจากนั้นแท็กจะเริ่มต้น ด้วยความคิดนี้ลองมาลองด้วยวิธีนี้ก่อน
อ้างไฟล์ที่เกี่ยวข้อง
<link href = "/content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <link href = "~/content/bootstrap3-editable/css/bootstrap-editable.css" rel = "stylesheet"/> rel = "stylesheet"/> <script src = "/scripts/jQuery-1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js" src = "~/content/bootstrap-table/bootstrap-table.js"> </script> <script src = "/content/bootstrap-table/locale/bootstrap-table-zh-cn.js"> </script>
การเริ่มต้นที่เกี่ยวข้องของ bootstraptable
<script type = "text/javascript"> var currow = {}; $ (function () {$ ("#tb_user"). bootstraptable ({toolbar: "#toolbar", idfield: "id", pagination: true, showrefresh: true, search: true, clicktoselect: true, queryparams: function (param) {ฟิลด์: "ชื่อผู้ใช้", ชื่อเรื่อง: "ชื่อผู้ใช้", formatter: ฟังก์ชัน (ค่า, แถว, ดัชนี) {return "<a href =/"#/"name =/" ชื่อผู้ใช้/"data-type =" text/"data-pk =/" + row.id + "/" data-title =/"username/" "อายุ",}, {ฟิลด์: "วันเกิด", ชื่อ: "วันเกิด", formatter: ฟังก์ชั่น (ค่า, แถว, ดัชนี) {var date = eval ('ใหม่' + eval (ค่า) .Source) วันที่กลับมา ("yyyyy mm month ddd"}}} onclickrow: ฟังก์ชั่น (แถว, $ element) {currow = row;}, onloadsuccess: ฟังก์ชั่น (aa, bb, cc) {$ ("#tb_user a"). แก้ไขได้ ({url: function (params) {var sname = $ (นี่) "การแก้ไข/แก้ไข", data: currow, datatype: 'json', ความสำเร็จ: ฟังก์ชั่น (data, textstatus, jqxhr) {การแจ้งเตือน ('บันทึกสำเร็จ!');วิธีแบ็กเอนด์
วิธีการทดสอบพื้นหลัง
public JsonResult getusers () {var lstres = รายการใหม่ <user> (); lstres.add (ผู้ใช้ใหม่ () {id = "1", ชื่อผู้ใช้ = "จางซาน", อายุ = 22, วันเกิด = convert.todatetime ("1994-12-21"), deptid = "1", deptname = "แผนก R&D"}); lstres.add (ผู้ใช้ใหม่ () {id = "2", ชื่อผู้ใช้ = "li si", อายุ = 28, วันเกิด = convert.todatetime ("1988-09-09"), deptid = "2", deptname = "แผนกขาย"}); lstres.add (ผู้ใช้ใหม่ () {id = "3", ชื่อผู้ใช้ = "Wrestle Coat Coat Ucle", อายุ = 40, วันเกิด = convert.todatetime ("1976-09-01"), deptid = "2", deptname = "แผนกขาย"}); lstres.add (ผู้ใช้ใหม่ () {id = "4", ชื่อผู้ใช้ = "Lightning Prawn", อายุ = 37, วันเกิด = convert.todatetime ("1979-03-12"), deptid = "4", deptname = "แผนกสร้างสรรค์"}); lstres.add (ผู้ใช้ใหม่ () {id = "5", ชื่อผู้ใช้ = "han meimei", อายุ = 29, วันเกิด = convert.todatetime ("1987-05-01"), deptid = "5", deptname = "แผนกธุรกิจ"}; return json (lstres, jsonrequestbehavior.allowget); } สาธารณะ jsonResult แก้ไข (ผู้ใช้ผู้ใช้) {// อัปเดตการส่งคืนหลังจาก deserialization JSON (ใหม่ {}, jsonRequestBehavior.allowget); -สิ่งนี้สามารถบรรลุเอฟเฟกต์ที่ต้องการได้และดูเหมือนว่ามันสามารถแก้ไขได้ภายในแถว แต่ถ้าไม่มีคอลัมน์ที่ต้องแก้ไขภายในแถวและมีคอลัมน์จำนวนมากแล้วจะใช้เวลาในการจัดรูปแบบแต่ละคอลัมน์ในลักษณะเดียวกันหรือไม่? และการเขียนแบบนี้มีความเข้มงวดอย่างเห็นได้ชัดซึ่งเป็นเรื่องยากสำหรับนักเขียนบล็อกที่จะยอมรับ ดังนั้นฉันจึงมองหาตัวอย่างและพบว่า JS bootstrap-table-editable.js มีอยู่ในส่วนขยายของ bootstraptable
3. แผนการแก้ไขขั้นสุดท้ายของ bootstartable
บล็อกเกอร์ยอมรับว่าข้างต้นยังคงเป็นโหมโรงเพราะบล็อกเกอร์คิดว่านี่อาจเป็นความคิดทั่วไปในการแก้ปัญหาดังนั้นความยาวของ preludes เหล่านี้อาจมากเกินไป ก่อนอื่นมาดูไฟล์ bootstrap-table-editable.js:
/** * @author Zhixin Wen <[email protected]> * ส่วนขยาย: https://github.com/vitalets/x-editable */! function ($) {'rectes'; $ .extend ($. fn.bootstraptable.defaults, {แก้ไขได้: จริง, oneDitableInit: function () {return false;}, oneDitableave: ฟังก์ชั่น (ฟิลด์, แถว, oldValue, $ el) {return false;}, oneditableshown {return false;}}); $ .extend ($. fn.bootstraptable.constructor.events, {'editable-init.bs.table': 'oneditableInit', 'editable-save.bs.table': 'oneditablesave' var bootstraptable = $ .fn.bootstraptable.constructor, _inittable = bootstraptable.prototype.inittable, _initbody = bootstraptable.prototype.initbody; bootstarpable.prototype.inittable = function () {var that = this; _inittable.apply (นี่, array.prototype.slice.apply (อาร์กิวเมนต์)); if (! this.options.editable) {return; } $ .Each (this.columns, ฟังก์ชั่น (i, คอลัมน์) {if (! column.editable) {return;} var _formatter = column.formatter; column.formatter = ฟังก์ชั่น (ค่า, แถว, ดัชนี) {var result = _formatter? _formatter (ค่า, แถว, ดัชนี): ค่า; '"', 'data-pk ="' + row [that.options.idfield] + '' ',' data-value = "' + result +' '', '>' + '</a>'] .oin ('');};}); - Bootstraptable.prototype.initbody = function () {var that = this; _initbody.apply (นี่, array.prototype.slice.apply (อาร์กิวเมนต์)); if (! this.options.editable) {return; } $ .Each (this.columns, ฟังก์ชั่น (i, คอลัมน์) {ถ้า (! คอลัมน์. แก้ไขได้) {return;} ที่. $ body.find ('[data-name = "' + column.field + '"]') แก้ไขได้ $ (นี้) .parents ('tr [data-index]'). ข้อมูล ('index'), row = data [index], oldValue = row [column.field]; '"]'). แก้ไขได้ (column.editable) .off ('แสดง'). on ('แสดง', ฟังก์ชั่น (e, แก้ไขได้) {var data = that.getData (), ดัชนี = $ (นี่). parents ('tr [data-index]'); ที่. $ body.find ('a [data-name = "' + column.field + '"]'). แก้ไขได้ (คอลัมน์. แก้ไข) .off ('ซ่อน') บน ('ซ่อน', ฟังก์ชั่น (e, เหตุผล) {var data = that.getData (), ดัชนี = $ (นี้) that.trigger ('ซ่อนตัว', คอลัมน์, row, $ (นี้), เหตุผล); this.trigger ('editable-init'); };} (jQuery);
JS นี้ทำให้การห่อหุ้มง่ายของ X-Editable เพิ่มคุณลักษณะที่แก้ไขได้ของคอลัมน์และแก้ไขและบันทึกเหตุการณ์บางอย่าง ด้วยสิ่งนี้เป็นพื้นฐานรหัสที่เราแก้ไขในอุตสาหกรรมกลายเป็นเช่นนี้
ไฟล์ที่ต้องอ้างอิงมีดังนี้:
<link href = "/content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <link href = "~/content/bootstrap3-editable/css/bootstrap-editable.css" rel = "stylesheet"/> rel = "stylesheet"/> <script src = "/scripts/jQuery-1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js" src = "~/content/bootstrap-table/bootstrap-table.js"> </script> <script src = "/content/bootstrap-table/locale/bootstrap-table-zh-cn.js" src = "~/content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"> </script>
1. กล่องข้อความ
$ (function () {$ ("#tb_user"). bootstraptable ({toolbar: "#toolbar", idfield: "id", pagination: true, showrefresh: true, search: true, clicktoselect: true, queryparams: function (param) {ฟิลด์: "ชื่อผู้ใช้", ชื่อเรื่อง: "ชื่อผู้ใช้", แก้ไขได้: {ประเภท: 'ข้อความ', ชื่อเรื่อง: 'ชื่อผู้ใช้', ตรวจสอบ: ฟังก์ชั่น (v) {ถ้า (! v) กลับ 'ชื่อผู้ใช้ไม่สามารถว่างเปล่า'; Eval ('ใหม่' + eval (ค่า) .Source) วันที่ส่งคืนฟอร์แมต ("yyyy-mm-dd");}}, {ฟิลด์: "deptname", ชื่อเรื่อง: "แผนก"}, {ฟิลด์: "งานอดิเรก", ชื่อ: "Hobby"}] "การแก้ไข/แก้ไข", ข้อมูล: แถว, ข้อมูล: 'JSON', ความสำเร็จ: ฟังก์ชั่น (ข้อมูล, สถานะ) {ถ้า (สถานะ == "ความสำเร็จ") {แจ้งเตือน ('การส่งข้อมูลสำเร็จ');วิธีการอัปเดตที่สอดคล้องกันของพื้นหลัง
Public JsonResult Edit (ผู้ใช้ผู้ใช้) {// อัปเดตเอนทิตีส่งคืน JSON (ใหม่ {}, jsonRequestBehavior.allowget); -หลังจากการทดสอบคอลัมน์ชื่อผู้ใช้สามารถแก้ไขได้อย่างอิสระ ในทำนองเดียวกันคอลัมน์อายุยังสามารถเปลี่ยนเป็นสิ่งนี้ได้
{ฟิลด์: "อายุ", ชื่อเรื่อง: "อายุ", แก้ไขได้: {ประเภท: 'ข้อความ', ชื่อเรื่อง: 'อายุ', ตรวจสอบ: ฟังก์ชั่น (v) {ถ้า (isnan (v)) กลับ 'อายุต้องเป็นตัวเลข'; var age = parseint (v); ถ้า (อายุ <= 0) อายุ return 'จะต้องเป็นจำนวนเต็มบวก'; -ไม่จำเป็นต้องมีการปรับเปลี่ยนสำหรับส่วนที่เหลือ
รหัสคำอธิบาย: พารามิเตอร์ที่แก้ไขได้ถูกกำหนดค่าในแอตทริบิวต์คอลัมน์เริ่มต้นด้านบน โปรดทราบว่าวัตถุ JSON ที่สอดคล้องกับแอตทริบิวต์ที่แก้ไขได้ของแต่ละคอลัมน์นี่คือวัตถุ JSON ที่เริ่มต้นใน X-Editable กล่าวคือคุณลักษณะใดที่สามารถกำหนดค่าได้เมื่อเราเริ่มต้น X-Editable และสามารถกำหนดค่าได้ในแอตทริบิวต์ที่แก้ไขได้ของคอลัมน์ดังนั้นมันจะสนุกกว่าที่จะใช้มากขึ้น วิธีการส่งที่แก้ไขจะถูกวางไว้อย่างสม่ำเสมอในเหตุการณ์ oneDitableave เพื่อจัดการอย่างสม่ำเสมอ
2. กล่องเลือกเวลา
ด้วยความรู้ข้างต้นเป็นพื้นฐานให้เริ่มต้นคอลัมน์วันเกิด:
{ฟิลด์: "วันเกิด", ชื่อเรื่อง: "วันเกิด", ฟอร์แมต: ฟังก์ชั่น (ค่า, แถว, ดัชนี) {var date = eval ('ใหม่' + eval (value) .Source) วันที่ส่งคืน ("yyyy-mm-dd"); }, แก้ไขได้: {ประเภท: 'วันที่', ชื่อ: 'วันเกิด'}}}ไม่จำเป็นต้องมีการแก้ไขที่อื่นเพื่อให้ได้ผล:
นี่คือรูปแบบเริ่มต้นของ X-Editable หากคุณไม่รู้สึกมีความสุขคุณสามารถกำหนดค่าด้วยตัวเอง X-Editable มีพารามิเตอร์มากมายสำหรับการกำหนดค่ากล่องวันที่ดังนี้:
แน่นอนถ้าเวลานั้นแม่นยำกับเวลานาทีและวินาทีคุณสามารถใช้กล่องแก้ไขประเภทวันที่ ต่อไปนี้เป็นเอฟเฟกต์การแก้ไขกรอบเวลาอย่างเป็นทางการซึ่งดูค่อนข้างดี
3. ดึงกล่องลง
มีแท็กสำคัญอีกอย่างหนึ่งในการแก้ไขแบบฟอร์มซึ่งเลือก ดังที่ได้กล่าวไว้ข้างต้นเรารู้ว่า X-Editable ให้โหมดการแก้ไขกล่องแบบเลื่อนลงเช่นการแก้ไขคอลัมน์นี้ในแผนกของเราสามารถเขียนได้เช่นนี้:
{ฟิลด์: "deptid", ชื่อเรื่อง: "แผนก", แก้ไขได้: {ประเภท: 'เลือก', ชื่อเรื่อง: 'แผนก', ที่มา: [{ค่า: "1", ข้อความ: "แผนก r & d"}, {ค่า: "2", ข้อความ: "แผนกขาย"}, {ค่า: "3", ข้อความ:รับเอฟเฟกต์
แน่นอนวิธีการตั้งค่าแหล่งข้อมูลในเครื่องนี้ไม่สามารถตอบสนองความต้องการของเราได้เนื่องจากในหลายกรณีตัวเลือกในกล่องดรอปดาวน์จะได้รับจากระยะไกลจากฐานข้อมูล แน่นอนว่า X-Editable ได้รับการพิจารณาสำหรับเราเช่นเราสามารถเขียนสิ่งนี้ได้:
{ฟิลด์: "deptid", ชื่อเรื่อง: "แผนก", แก้ไขได้: {ประเภท: 'เลือก', ชื่อเรื่อง: 'แผนก', แหล่งที่มา: ฟังก์ชั่น () {var result = []; $ .ajax ({url: '/แก้ไข/getDepartments', async: false, type: "get", data: {}, ความสำเร็จ: ฟังก์ชั่น (ข้อมูล, สถานะ) {$ .Each (ข้อมูล, ฟังก์ชั่น (คีย์, ค่า) {result.push ผลการกลับมา; -เรากำหนดค่าวิธีการในพื้นหลัง
สาธารณะ jsonResult getDepartments () {var lstres = รายการใหม่ <erection> (); lstres.add (แผนกใหม่ () {id = "1", name = "แผนก R&D"}); lstres.add (แผนกใหม่ () {id = "2", name = "แผนกขาย"}); lstres.add (แผนกใหม่ () {id = "3", name = "แผนกผู้ดูแลระบบ"}); lstres.add (แผนกใหม่ () {id = "4", name = "แผนกสร้างสรรค์"}); lstres.add (แผนกใหม่ () {id = "5", name = "หน่วยธุรกิจ"}); return json (lstres, jsonrequestbehavior.allowget); -นอกจากนี้ยังสามารถบรรลุผลลัพธ์ที่เราต้องการ
คำถามรหัส: นี่คือสิ่งหนึ่งที่ต้องอธิบาย ชาวสวนอย่างระมัดระวังอาจค้นพบว่าสนามของเรา: "Deptid" ที่นี่ทำไมเราควรกำหนดค่า Deptid แทน deptname? มันง่ายมากเพราะเราจำเป็นต้องสอดคล้องกับค่าค่าในแหล่งข้อมูล
4. ช่องทำเครื่องหมาย
นอกเหนือจากกล่องแก้ไขทั่วไปที่กล่าวถึงข้างต้น X-Editable ยังให้การแก้ไขกลุ่มช่องทำเครื่องหมาย ตัวอย่างเช่น:
{ฟิลด์: "งานอดิเรก", ชื่อเรื่อง: "โฮสต์", แก้ไขได้: {ประเภท: "รายการตรวจสอบ", ตัวแยก: ",", แหล่งที่มา: [{value: 'bsb', ข้อความ: 'บาสเก็ตบอล'}, {ค่า: 'ftb', ข้อความ: 'ฟุตบอล'รับเอฟเฟกต์:
แน่นอนถ้าคุณมีข้อมูลระยะไกลคุณสามารถใช้วิธีการที่คล้ายกับข้างต้นเพื่อดึงข้อมูล
5. "Ghosts Never Fade" Select2
เมื่อพูดถึงช่องทำเครื่องหมายด้านบนบล็อกเกอร์ไม่สามารถช่วยได้ แต่คิดถึงสิ่งต่าง ๆ เช่น MultiSelect ดังนั้นเขาจึงค้นหาเอกสาร X-Editable และพบว่ามันไม่รองรับ MultiSelect แต่สนับสนุน Select2 และฉันไม่รู้ว่านี่เป็นข่าวดีหรือไม่ จากประสบการณ์การใช้งานของบล็อกเกอร์และประสบการณ์การแชทในกลุ่มการสื่อสารทางเทคนิคฉันพบว่าหลายคนพบปัญหาสไตล์ต่าง ๆ เมื่อใช้ Select2 และไม่ใช่เรื่องง่ายที่จะแก้ปัญหา
เนื่องจาก X-Editable รองรับ Select2 ลองมาลองดูสิ อย่างไรก็ตามการสาธิตอย่างเป็นทางการนั้นค่อนข้างดี นี่คือตัวอย่างของการใช้การสาธิตอย่างเป็นทางการ:
ด้วยอารมณ์ประสาทบล็อกเกอร์พยายามด้วยตัวเอง
ไฟล์อ้างอิง select2
<link href = "~/content/select2-bootstrap.css" rel = "stylesheet"/> <link href = "~/content/select2-master/dist/css/select2.min.css" rel = "stylesheet"/> <script src = "/select2-master/js/js
รหัสลอง
{ฟิลด์: "งานอดิเรก", ชื่อเรื่อง: "งานอดิเรก", แก้ไขได้: {ประเภท: 'select2', ชื่อเรื่อง: 'Hobby', ชื่อ: 'Hobby', ตำแหน่ง: 'Top', ความสำเร็จ: ฟังก์ชั่น (Response, NewValue) {Debugger; }, ข้อผิดพลาด: ฟังก์ชั่น (การตอบสนอง, newValue) {ดีบักเกอร์; }, url: ฟังก์ชัน (params) {debugger; }, แหล่งที่มา: [{id: 'bsb', ข้อความ: 'บาสเก็ตบอล'}, {id: 'ftb', ข้อความ: 'ฟุตบอล'}, {id: 'wsm', ข้อความ: 'ว่ายน้ำ'}], อินพุต:รับผลลัพธ์:
ปรากฎว่าค่าที่เลือกของ Select2 ไม่สามารถส่งผ่านไปยังพื้นหลังได้ตามปกติ อย่างไรก็ตามบล็อกเกอร์ได้ลองใช้พารามิเตอร์ต่าง ๆ และตามการสาธิตอย่างเป็นทางการและพวกเขาทั้งหมดจบลงด้วยความล้มเหลว ฉันไม่รู้ว่าการสาธิตอย่างเป็นทางการประสบความสำเร็จอย่างไร คำถามนี้ถูกโยนออกไปก่อน หากมีชาวสวนที่ใช้มันโปรดแก้ไขและตอบ หากบล็อกเกอร์แก้ปัญหานี้ในอนาคตก็จะได้รับการอัปเดตที่นี่
4. สรุป
ปัญหาอีกประการหนึ่งคือหลังจากการแก้ไขและการส่งเสร็จสิ้นบล็อกเกอร์พบปัญหาในโครงการ: หากมีเนื้อหาข้อความมากเกินไปหลังจากการส่งความกว้างของ TH ในหัวของตารางและความกว้างของ TD ใน tbody นั้นไม่ถูกต้อง แต่ฉันไม่พบปัญหานี้เมื่อเขียนการสาธิต นี่คือวิธีแก้ปัญหา
แก้ปัญหาของคุณในประโยคเดียว!
บทความนี้แนะนำการใช้ bootstary รวมกับ X-Editable เพื่อใช้การแก้ไขในบรรทัด คำถามหลายข้อในบทความมีการอธิบายตามประสบการณ์ของบล็อกเกอร์ในการใช้งาน หากคุณวางแผนที่จะใช้มันคุณสามารถลองได้
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ ฉันหวังว่ามันจะช่วยให้คุณเรียนรู้ตาราง JS Table Component Bootstrap ได้ดีขึ้น