สร้างตัวแก้ไขตารางแบบไดนามิกใน Rails โดยใช้ Trix และ Turbo Frames

นอกจากนี้ยังให้ความสะดวกในการเข้าถึงข้อมูลเมตาของไฟล์แนบ เช่น ขนาดและชื่อไฟล์ ตลอดจนประเภทเนื้อหา

สุดท้ายนี้ จะจัดเตรียมตำแหน่งเริ่มต้นสำหรับบางส่วนที่ใช้เพื่อแสดงไฟล์แนบในโปรแกรมแก้ไขและมุมมอง Rich Text

การเพิ่มโมเดลตาราง

เราจะใช้ประโยชน์จาก Attachment API ของ ActionText เพื่อนำโซลูชันตารางของเราไปใช้ สำหรับสิ่งนี้ เราต้องสร้างโมเดลที่กำหนดเองเพื่อบันทึกข้อมูลตารางของเราและรวม 126 . เราจะใช้คอลัมน์ JSON(B) แบบธรรมดาเพื่อเก็บอาร์เรย์สองมิติสำหรับข้อมูลตาราง

เพื่อเริ่มต้นการสำรวจ เรามาสร้างแอป Rails ใหม่โดยเปิดใช้งาน ActionText:

เนื่องจากวันนี้ฉันรู้สึกไม่สร้างสรรค์ เรามาสร้าง 131 กันดีกว่า โมเดลที่มีชื่อเรื่องและเนื้อหาข้อความที่หลากหลาย:

ระวัง นี่คือ gotcha ที่น่าแปลกใจ! คำสั่งการติดตั้งข้างต้นสร้าง 144 การโยกย้าย ดังนั้นเราจึงต้องเปลี่ยนชื่อเป็น 158 . นอกจากนี้ เราจะกำหนดให้เป็นตาราง 2x2 โดยใช้ 162 .

เพิ่มตารางให้กับโมเดล Rails ActionText

ก่อนที่เราจะดำเนินการเพิ่มตารางให้กับ Rich Text เราจำเป็นต้องแพตช์แถบเครื่องมือของ Trix ก่อน:

ที่นี่ เราจะเพิ่มปุ่มต่อท้าย 175 ของ Trix ด้วยตนเอง . การเดินสายนี้จนถึง 184 ตัวควบคุมการกระตุ้น (ที่เรายังไม่ได้สร้าง) จะแทรกตารางลงในเอกสาร มาทำให้ปุ่มนี้มี SVG สวยๆ เป็นเนื้อหาใน CSS และตั้งค่าสไตล์ตารางบางส่วนในขณะที่เราทำสิ่งนี้:

อย่างที่คุณเห็น เราได้เพิ่มมันลงในกลุ่ม "เครื่องมือไฟล์" เรียบร้อยแล้ว:

ตอนนี้เรากลับมาที่การเพิ่มและจัดการตารางด้วยความช่วยเหลือของ Turbo สำหรับสิ่งนี้ เราจำเป็นต้องมีคอนโทรลเลอร์ที่มี 192 ก่อน การกระทำ:

การดำเนินการนี้สามารถยืมมาจากโพสต์บล็อก 'On Rails' ที่เราอ้างถึงในบทนำไม่มากก็น้อย สร้าง JSON ที่จำเป็นในการแทรกไฟล์แนบในฝั่งไคลเอ็นต์:รวมถึง SGID และ 208 แสดงผลจาก 210 บางส่วนดังที่เราจะได้เห็นในภายหลัง

เราเพิ่มเส้นทางตารางที่เป็นประโยชน์ที่เกี่ยวข้อง ไปยังการกำหนดค่าของเรา:

ตอนนี้ถึงเวลาที่จะต้องดำดิ่งลงไปสู่จุดลึกสุด:เราจำเป็นต้องสร้างโมเดลตารางของเรา ก่อนอื่น เรามารวม 220 กันก่อน และกำหนดเส้นทางบางส่วนที่เกี่ยวข้อง:

โปรดทราบว่าเรายังไม่ได้กำหนดวิธีการจัดเก็บเนื้อหาของตาราง เนื่องจากเราประกาศว่าเป็นคอลัมน์ JSON(B) ในฐานข้อมูลของเรา เราจึงมีอิสระในการเลือกรูปแบบใดก็ได้ เบี่ยงเบนไปจากโพสต์บล็อกที่อ้างถึงเล็กน้อย มาดูอาร์เรย์สองมิติกัน ดังนั้นเราจึงสามารถทำการวนซ้ำซ้อนบน 230 ได้ เช่นนี้:

บางส่วนด้านบนจะแสดงผลทุกครั้งที่มีการร้องขอโดย 241 ตัวอย่างเช่น ต่อไป เรายังต้องสร้าง 258 บางส่วนที่จะใช้แบบอินไลน์ใน Trix:

ข้อแตกต่างเดียวที่คุณคงสังเกตเห็นก็คือ ตอนนี้เราได้รวมมันไว้ใน Turbo Frame โดยใช้ SGID เป็นรหัส DOM นอกจากนี้ เรายังจัดเตรียมดัชนีแถวและคอลัมน์ให้กับบล็อกตัวคั่น และเตรียมพร้อมสำหรับการแก้ไขแบบอินไลน์โดยสร้าง DIV ภายใน 267 — เราจะพูดถึงเรื่องนั้นในภายหลัง

ตอนนี้เราจะเชื่อมต่อปุ่มตารางของแถบเครื่องมือกับการดำเนินการควบคุมฝั่งเซิร์ฟเวอร์ที่เราเพิ่งเขียน ในการดำเนินการนี้ ก่อนอื่นเราต้องนำไลบรารี่ request.js ของ Rails เข้ามาในโปรเจ็กต์ก่อน ไลบรารีนี้จะช่วยเราจัดการ 278 คำขอจากไคลเอนต์ รวมถึงโทเค็น CSRF ที่เหมาะสม ฯลฯ:

สร้างตัวควบคุม Trix Table Stimulus ใหม่

ตอนนี้ทุกอย่างได้รับการตั้งค่าแล้ว เรามาสร้าง trix-table ใหม่กัน ตัวควบคุมการกระตุ้น ในนั้นเราจะใช้ 284 การดำเนินการที่อ้างอิงโดยปุ่มแถบเครื่องมือของเรา:

มันจะ POST ไปที่ 296 ของตาราง เส้นทาง โดยแทรกการตอบสนอง JSON เป็นไฟล์แนบ Trix . สิ่งนี้ยืมมาจากโพสต์บล็อกของ OnRails อีกครั้งโดยแลกเปลี่ยน rails-ujs ที่เลิกใช้แล้ว เรียกใช้ request.js ที่ใหม่กว่า ห้องสมุด

ตอนนี้เราต้องใช้คอนโทรลเลอร์นี้ในแอปของเราโดยเพิ่มมันลงในมาร์กอัปของแบบฟอร์ม:

ข้อดีของ Stimulus.js คือการเพิ่มแอตทริบิวต์ข้อมูลเพียง 2 รายการลงใน 306 องค์ประกอบบรรลุผลตามที่ต้องการ ขณะนี้เราสามารถเพิ่มตารางลงในเนื้อหาบทความของเราได้ด้วยการคลิกเพียงปุ่มเดียว:

การจัดการตารางผ่าน Turbo Frames

ตอนนี้เราสามารถสร้างไฟล์แนบตารางได้แล้ว เรามาเปลี่ยนโฟกัสไปที่การจัดการเนื้อหากันดีกว่า ปรากฎว่า Turbo Frames เกือบ พอดีอย่างเป็นธรรมชาติที่นี่

เพิ่มและลบแถวและคอลัมน์ของตาราง

ในการเพิ่มและลบแถวและคอลัมน์ของตาราง เราสร้างแถบเครื่องมือขนาดเล็กที่ประกอบด้วยปุ่มสี่ปุ่ม หนึ่งปุ่มสำหรับแต่ละการดำเนินการ ใช้ประโยชน์จาก 319 ตัวช่วยและตั้งค่า URL เป็น 320 เส้นทางสำหรับตารางที่เกี่ยวข้อง มาเพิ่มการดำเนินการตามลำดับที่เราต้องการทริกเกอร์เป็นพารามิเตอร์เพิ่มเติม:

ในทางกลับกัน เรายังจำเป็นต้องเพิ่มการดำเนินการของคอนโทรลเลอร์ที่เกี่ยวข้องให้กับ 331 ของเรา . สังเกตว่า 349 การดำเนินการมอบหมายการกระทำเหล่านั้นให้กับโมเดล

หลังจากบันทึกการเปลี่ยนแปลงโครงสร้างของตารางแล้ว เราจะเปลี่ยนเส้นทางไปยังมุมมองแก้ไขของตาราง มันแสดงผล 354 เหมือนกัน บางส่วนซึ่งมีผลข้างเคียงจากการอ้างถึง Turbo Frame เดียวกัน ดังนั้น Turbo จึงสามารถตรวจจับเฟรมที่ตรงกันและแทนที่เฟรมหนึ่งด้วยเฟรมอื่นได้

ตอนนี้เราต้องใช้คำสั่งที่หายไปใน 367 รุ่น.

ที่น่าสังเกตคือ 375 เนื่องจากโครงสร้างข้อมูลที่เรียบง่ายของเราในอาร์เรย์สองมิติ วิธีการเป็นเพียงพร็อกซีในการแก้ไขจำนวนคอลัมน์และแถว เมื่อพร้อมแล้ว เราสามารถเปลี่ยนโครงสร้างของตารางได้ด้วยการคลิกปุ่ม:

แก้ไขเนื้อหาของเซลล์ตาราง

นอกจากการเปลี่ยนจำนวนคอลัมน์และแถวแล้ว เรายังต้องการแก้ไขเนื้อหาของเซลล์ด้วย เพื่อให้บรรลุเป้าหมายนี้ เราจะพึ่งพาโพสต์บล็อกที่อ้างถึงอีกครั้งและสร้างตัวควบคุมตัวแก้ไขตาราง Stimulus

382 เมธอดจะออกคำขอ PATCH ทุกครั้งที่แก้ไขเซลล์ โดยส่งดัชนีแถวและคอลัมน์เป็นพารามิเตอร์ ตอนนี้ สิ่งที่เราต้องทำคือเชื่อมต่อกับ DOM ของเรา: