jsTree: jQuery দিয়ে ইন্টারেক্টিভ ট্রি স্ট্রাকচার তৈরি করুন

এই শক্তিশালী ট্রি প্লাগইন দিয়ে হায়ারার্কিকাল ডাটা তৈরি, ম্যানেজ এবং ভিজুয়ালাইজ করুন।

jsTree API কি?

jsTree জটিল JSON ডাটাকে ইন্টারেক্টিভ, হায়ারার্কিকাল ট্রি স্ট্রাকচারে রূপান্তর করে, ডেভেলপারদের JSON অবজেক্ট নেভিগেট এবং ভিজুয়ালাইজ করার একটি শক্তিশালী উপায় প্রদান করে। jQuery প্লাগইন হিসেবে, এটি র JSON ডাটাকে এক্সপান্ড/কলাপ্স নোড ট্রি-তে রূপান্তর করে - API রেস্পন্স, কনফিগারেশন ফাইল বা যেকোনো হায়ারার্কিকাল ডাটাসেট ইনস্পেক্ট করার জন্য পারফেক্ট।

JSON ভিজুয়ালাইজেশনের মূল ফিচারসমূহ:

JSON-টু-ট্রি কনভার্শন: JSON অ্যারে/অবজেক্টকে স্বয়ংক্রিয়ভাবে প্যারেন্ট-চাইল্ড নোড হিসেবে রেন্ডার করে
ইন্টারেক্টিভ এক্সপ্লোরেশন: গভীর JSON স্ট্রাকচার এক্সপ্লোর করতে নোড এক্সপান্ড/কলাপ্স করুন
ডায়নামিক লোডিং: বড় JSON ডাটাসেট লেইজি-লোড করে পারফরম্যান্স অপ্টিমাইজ করুন
কাস্টম নোড রেন্ডারিং: JSON ডাটা টাইপ (অ্যারে, অবজেক্ট, ভ্যালু) অনুযায়ী নোড স্টাইল করুন
সার্চ & ফিল্টার: জটিল JSON ট্রিতে দ্রুত কী/ভ্যালু খুঁজুন

ফ্ল্যাট JSON ভিউয়ারদের থেকে আলাদা, jsTree আপনার ডাটার হায়ারার্কি এবং রিলেশনশিপ সংরক্ষণ করে, এটিকে API ডিবাগিং বা নেস্টেড JSON স্কিমা ডকুমেন্টেশনের জন্য আদর্শ করে তোলে।

GitHub Stats

Name:
Language:
Stars:
Forks:
License:
Repository was last updated at

কেন jsTree বেছে নেবেন?

প্রমাণিত সমাধান: ১০+ বছর সক্রিয় ডেভেলপমেন্ট
লাইটওয়েট: শুধুমাত্র jQuery ডিপেন্ডেন্সি প্রয়োজন
অ্যাক্সেসিবল: WCAG 2.0 কম্প্লায়েন্ট
বিস্তারিত ডকুমেন্টেশন: সম্পূর্ণ API রেফারেন্স
MIT লাইসেন্স: বাণিজ্যিক ব্যবহারের জন্য বিনামূল্যে

ইন্সটলেশন

jsTree প্যাকেজ ম্যানেজার বা সরাসরি CDN থেকে ইন্সটল করা যাবে।

NPM ইন্সটলেশন


npm install jstree

নোট: jsTree-এর আগে jQuery ইনক্লুড করতে ভুলবেন না।

কোড উদাহরণ

এই উদাহরণগুলোর মাধ্যমে jsTree-এর ক্ষমতা অন্বেষণ করুন:

jsTree

উদাহরণ ১: HTML থেকে বেসিক ট্রি

jsTree তৈরি করার সবচেয়ে সহজ উপায় হলো নেস্টেড HTML লিস্ট কনভার্ট করা। আপনার ট্রি স্ট্রাকচার স্ট্যাটিক থাকলে বা প্রোটোটাইপিং করার সময় এই পদ্ধতি আদর্শ। প্লাগইনটি স্বয়ংক্রিয়ভাবে নেস্টেড UL/LI স্ট্রাকচারকে এক্সপান্ড/কলাপ্স ফাংশনালিটি সহ ইন্টারেক্টিভ ট্রি-তে কনভার্ট করে। বেসিক ইমপ্লিমেন্টেশনের জন্য মিনিমাম JavaScript প্রয়োজন এবং সিম্পল নেভিগেশন মেনু বা কন্টেন্ট স্ট্রাকচারের জন্য ভাল কাজ করে।

ডেমোনস্ট্রেটেড ফিচারসমূহ:

HTML থেকে ট্রি কনভার্শন
এক্সপান্ড/কলাপ্স ফাংশনালিটি
বেসিক থিমিং

উদাহরণ ২: JSON এর মাধ্যমে ডাটা লোডিং

ডায়নামিক অ্যাপ্লিকেশনের জন্য, jsTree JSON থেকে ডাটা লোড করতে পারে। এই পদ্ধতি আরও ফ্লেক্সিবল এবং আপনাকে প্রোগ্রাম্যাটিক্যালি ট্রি স্ট্রাকচার বিল্ড করতে দেয়। JSON ফরম্যাট স্ট্রেইটফরওয়ার্ড, প্রতিটি নোডে "id", "text", "children", এবং "state" প্রপার্টি থাকে। আপনি প্রতিটি নোডের জন্য আইকন, ডিসেবল্ড স্টেট এবং অন্যান্য অ্যাট্রিবিউটও স্পেসিফাই করতে পারেন। এই মেথড বিশেষভাবে উপযোগী যখন আপনার ট্রি ডাটা ডাটাবেস বা API থেকে আসে।

উদাহরণ ৩: চেকবক্স এবং ড্র্যাগ & ড্রপ

jsTree প্লাগইন প্রদান করে যা এর কোর ফাংশনালিটি এক্সটেন্ড করে। চেকবক্স প্লাগইন প্রতিটি নোডে সিলেক্টেবল চেকবক্স যোগ করে, যখন dnd প্লাগইন ড্র্যাগ-এন্ড-ড্রপ অপারেশন এনাবল করে। এই ফিচারগুলো ফাইল ম্যানেজার বা পারমিশন সিস্টেম বিল্ড করার জন্য অপরিহার্য যেখানে ইউজারদের মাল্টিপল আইটেম সিলেক্ট বা হায়ারার্কি রিঅর্গানাইজ করতে হয়। প্লাগইনগুলো শতাধিক নোড থাকলেও ট্রির পারফরম্যান্স মেইন্টেইন করে।

অ্যাডভান্সড ফিচারসমূহ

jsTree প্রফেশনাল ওয়ার্কফ্লো সাপোর্ট করে:

লেইজি লোডিং: প্রয়োজন অনুযায়ী নোড লোড করুন:

লেইজি লোডিং


    $('#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 ওয়েব অ্যাপ্লিকেশনে ট্রি স্ট্রাকচারের জন্য গো-টু সমাধান হিসেবে রয়ে গেছে।