jsTree: สร้างโครงสร้างต้นไม้แบบโต้ตอบด้วย jQuery

API jsTree คืออะไร?

jsTree แปลงข้อมูล JSON ที่ซับซ้อนให้เป็นโครงสร้างต้นไม้แบบลำดับชั้นที่โต้ตอบได้ ให้เครื่องมือทรงพลังกับนักพัฒนาเพื่อแสดงภาพและนำทางวัตถุ JSON ที่ซ้อนกัน สร้างเป็นปลั๊กอิน jQuery ที่แปลง JSON ดิบให้เป็นโหนดที่ขยาย/ย่อได้ - เหมาะสำหรับตรวจสอบการตอบสนองของ API ไฟล์การตั้งค่า หรือชุดข้อมูลลำดับชั้นใดๆ

คุณสมบัติหลักสำหรับการแสดงภาพ JSON:

• การแปลง JSON เป็นต้นไม้: แสดงผลอาร์เรย์/ออบเจ็กต์ JSON อัตโนมัติเป็นโหนดพ่อ/ลูก
• การสำรวจแบบโต้ตอบ: ขยาย/ย่อโหนดเพื่อเจาะลึกโครงสร้าง JSON
• การโหลดแบบไดนามิก: โหลดชุดข้อมูล JSON ขนาดใหญ่แบบ lazy เพื่อประสิทธิภาพที่ดีที่สุด
• การแสดงโหนดที่ปรับแต่งได้: กำหนดสไตล์โหนดตามประเภทข้อมูล JSON (อาร์เรย์, ออบเจ็กต์, ค่า)
• การค้นหา & กรอง: ค้นหาคีย์/ค่าอย่างรวดเร็วในต้นไม้ JSON ที่ซับซ้อน

ต่างจากตัวแสดง JSON แบบแบนๆ jsTree รักษาลำดับชั้นและความสัมพันธ์ในข้อมูลของคุณ ทำให้เหมาะสำหรับการดีบัก API หรือการจัดทำเอกสารโครงสร้าง JSON ที่ซ้อนกัน

สถิติ GitHub

ชื่อ:
ภาษา:
ดาว:
ส้อม:
ใบอนุญาต:
พื้นที่เก็บข้อมูลได้รับการอัปเดตครั้งล่าสุดเมื่อ

ทำไมต้องเลือก jsTree?

• โซลูชันที่ผ่านการทดสอบ: พัฒนาอย่างต่อเนื่องมากกว่า 10 ปี
• น้ำหนักเบา: ต้องการเพียง jQuery เป็นการอ้างอิง
• การเข้าถึงได้: เป็นไปตามมาตรฐาน WCAG 2.0
• เอกสารครบถ้วน: คู่มืออ้างอิง API เต็มรูปแบบ
• สัญญาอนุญาต MIT: ใช้ฟรีสำหรับการใช้งานเชิงพาณิชย์

การติดตั้ง

สามารถติดตั้ง jsTree ผ่านตัวจัดการแพ็คเกจหรือรวมโดยตรงจาก CDN

npm install jstree

หมายเหตุ: อย่าลืมรวม jQuery ก่อน jsTree

ตัวอย่างโค้ด

สำรวจความสามารถของ jsTree ด้วยตัวอย่างเหล่านี้:

ตัวอย่าง 1: ต้นไม้พื้นฐานจาก HTML

วิธีที่ง่ายที่สุดในการสร้าง jsTree คือการแปลงรายการ HTML ที่ซ้อนกัน วิธีนี้เหมาะเมื่อโครงสร้างต้นไม้ของคุณเป็นแบบคงที่หรือกำลังสร้างต้นแบบ ปลั๊กอินจะแปลงโครงสร้าง UL/LI ที่ซ้อนกันเป็นต้นไม้แบบโต้ตอบด้วยฟังก์ชันการขยาย/ย่อ การใช้งานพื้นฐานต้องการ JavaScript น้อยที่สุดและทำงานได้ดีกับเมนูนำทางง่ายๆ หรือโครงสร้างเนื้อหา

คุณสมบัติที่แสดง:

• การแปลง HTML เป็นต้นไม้
• ฟังก์ชันการขยาย/ย่อ
• ธีมพื้นฐาน

ตัวอย่าง 2: โหลดข้อมูลผ่าน JSON

สำหรับแอปพลิเคชันแบบไดนามิก jsTree สามารถโหลดข้อมูลจาก JSON วิธีนี้มีความยืดหยุ่นมากขึ้นและช่วยให้คุณสร้างโครงสร้างต้นไม้แบบโปรแกรมได้ รูปแบบ JSON เป็นแบบตรงไปตรงมา โดยแต่ละโหนดมีคุณสมบัติเช่น "id", "text", "children" และ "state" คุณยังสามารถระบุไอคอน สถานะที่ปิดใช้งาน และแอตทริบิวต์อื่นๆ สำหรับแต่ละโหนดได้ วิธีนี้มีประโยชน์อย่างยิ่งเมื่อข้อมูลต้นไม้ของคุณมาจากฐานข้อมูลหรือ API

ตัวอย่าง 3: ช่องทำเครื่องหมายและการลากและวาง

jsTree มีปลั๊กอินที่ขยายความสามารถหลัก ปลั๊กอินช่องทำเครื่องหมายเพิ่มช่องที่สามารถเลือกได้ให้กับแต่ละโหนด ในขณะที่ปลั๊กอิน dnd ช่วยให้สามารถดำเนินการลากและวางได้ คุณสมบัติเหล่านี้จำเป็นสำหรับการสร้างอินเทอร์เฟซเช่นตัวจัดการไฟล์หรือระบบสิทธิ์ที่ผู้ใช้ต้องเลือกรายการหลายรายการหรือจัดลำดับชั้นใหม่ ปลั๊กอินรักษาประสิทธิภาพของต้นไม้แม้จะมีโหนดหลายร้อยโหนด

คุณสมบัติขั้นสูง

jsTree รองรับเวิร์กโฟลว์ระดับมืออาชีพ:

• การโหลดแบบ lazy: โหลดโหนดตามต้องการ:

  การโหลดแบบ Lazy

  
      $('#tree').jstree({
        'core': {
          'data': {
            'url': '/nodes/',
            'data': function (node) {
              return { 'id': node.id };
            }
          }
        }
      });
      
  

• การจัดการเหตุการณ์: ตอบสนองต่อการโต้ตอบกับต้นไม้:

  ตัวฟังเหตุการณ์

  
      $('#tree').on('changed.jstree', function (e, data) {
        console.log('โหนดที่เลือก:', data.selected);
      });
      
  

• ธีมที่กำหนดเอง: ปรับแต่งสไตล์ต้นไม้ของคุณ:

  ธีมที่กำหนดเอง

  
      $('#tree').jstree({
        'themes': {
          'name': 'custom',
          'dots': false,
          'icons': false
        }
      });
      
  

สรุป

jsTree ให้โซลูชันที่แข็งแกร่งสำหรับการแสดงภาพข้อมูลลำดับชั้น เหมาะสำหรับ:

• ตัวจัดการไฟล์: เรียกดูโครงสร้างไดเรกทอรี
• เมนูนำทาง: สร้างเมนูหลายระดับ
• อินเทอร์เฟซ CMS: จัดการลำดับชั้นเนื้อหา
• เครื่องมือการตั้งค่า: แก้ไขการตั้งค่าที่ซ้อนกัน

ด้วยระบบปลั๊กอินที่ครอบคลุมและการบำรุงรักษาอย่างต่อเนื่อง jsTree ยังคงเป็นโซลูชันหลักสำหรับโครงสร้างต้นไม้ในเว็บแอปพลิเคชัน

สินค้าที่คล้ายกัน