jsTree

کامپوننت ها

jsTree افزونه جی کوئری است که درخت های تعاملی را ارائه می دهد. jsTree به راحتی توسعه پذیر، قالب بندی و پیکربندی است، از منابع داده HTML و JSON و بارگذاری AJAX پشتیبانی می کند.

می توانید جزئیات بیشتر را در اینجا مشاهده کنید.

پایه

یک کانتینر div بسازید و درخت js را روی آن تلفیق کنید. سپس از ul برای لیست درختی، همچنین ul تو در تو برای درخت تو در تو استفاده کنید.

گره ریشه 1
- گره فرزند
- در ابتدا انتخاب شده
- در ابتدا باز
  - گره غیرفعال
  - یک گره دیگر
گره ریشه 2

مثال کد

<div id="basic-tree">
  <ul>
    <li>
        گره ریشه 1
        <ul>
            <li>
              گره فرزند
            </li>
            <li data-jstree='{ "selected" : true }'>
              در ابتدا انتخاب شده
            </li>
            <li data-jstree='{ "opened" : true }'>
                در ابتدا باز
                <ul>
                    <li data-jstree='{ "disabled" : true }'>
                        گره غیرفعال
                    </li>
                    <li data-jstree='{ "type" : "file" }'>
                        یک گره دیگر
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li data-jstree='{ "type" : "file" }'>
      گره ریشه 2
    </li>
  </ul>
</div>

آیکون سفارشی

می توانید از گزینه های سفارشی در آیتم لیست با ویژگی data-jstree استفاده کنید. مانند این مقدار data-jstree='{ "icon" : "icon ni ni-calendar-fill" }' برای آن آیکون باید کلاس هایی برای نمایش یا سبک دهی به آیکون باشد.

گره ریشه 1
- گره فرزند
- در ابتدا انتخاب شده
- در ابتدا باز
  - گره غیرفعال
  - یک گره دیگر
گره ریشه 2

مثال کد

<div id="custom-icon-tree">
  <ul>
    <li>
        گره ریشه 1
        <ul>
            <li>
              گره فرزند
            </li>
            <li data-jstree='{ "selected" : true, "icon" : "icon ni ni-calendar-fill text-info" }'>
                در ابتدا انتخاب شده
            </li>
            <li data-jstree='{ "opened" : true }'>
                در ابتدا باز
                <ul>
                    <li data-jstree='{ "disabled" : true , "icon" : "icon ni ni-archive-fill" }'>
                        گره غیرفعال
                    </li>
                    <li data-jstree='{ "type" : "file" }'>
                        یک گره دیگر
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li data-jstree='{ "type" : "file",  "icon" : "icon ni ni-puzzle-fill text-success" }'>
      گره ریشه 2
    </li>
  </ul>
</div>

منوی زمینه (Context Menu)

برای منوی زمینه، فقط باید گزینه contextmenu را در افزونه ها قرار دهید. برای اطلاعات بیشتر لطفا صفحه افزونه jsTree را بررسی کنید

گره ریشه 1
- گره فرزند
- در ابتدا انتخاب شده
- در ابتدا باز
  - گره غیرفعال
  - یک گره دیگر
گره ریشه 2

مثال کد

<div id="context-menu-tree">
  <ul>
    <li>
        گره ریشه 1
        <ul>
            <li>
              گره فرزند
            </li>
            <li data-jstree='{ "selected" : true }'>
                در ابتدا انتخاب شده
            </li>
            <li data-jstree='{ "opened" : true }'>
                در ابتدا باز
                <ul>
                    <li data-jstree='{ "disabled" : true }'>
                        گره غیرفعال
                    </li>
                    <li data-jstree='{ "type" : "file" }'>
                        یک گره دیگر
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li data-jstree='{ "type" : "file" }'>
      گره ریشه 2
    </li>
  </ul>
</div>

کشیدن و رها کردن

برای فعال کردن گزینه کشیدن و رها کردن، فقط باید گزینه dnd را در افزونه ها قرار دهید. برای اطلاعات بیشتر لطفا صفحه افزونه jsTree را بررسی کنید

گره ریشه 1
- گره فرزند
- در ابتدا انتخاب شده
- در ابتدا باز
  - گره غیرفعال
  - یک گره دیگر
گره ریشه 2

مثال کد

<div id="drag-drop-tree">
  <ul>
    <li>
        گره ریشه 1
        <ul>
            <li>
              گره فرزند
            </li>
            <li data-jstree='{ "selected" : true }'>
                در ابتدا انتخاب شده
            </li>
            <li data-jstree='{ "opened" : true }'>
                در ابتدا باز
                <ul>
                    <li data-jstree='{ "disabled" : true }'>
                        گره غیرفعال
                    </li>
                    <li data-jstree='{ "type" : "file" }'>
                        یک گره دیگر
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li data-jstree='{ "type" : "file" }'>
      گره ریشه 2
    </li>
  </ul>
</div>

چک باکس

برای فعال کردن گزینه چک باکس با انتخاب ردیف کامل، فقط باید گزینه wholerow و checkbox را در افزونه ها قرار دهید. برای اطلاعات بیشتر لطفا صفحه افزونه jsTree را بررسی کنید

گره ریشه 1
- گره فرزند
- در ابتدا انتخاب شده
- در ابتدا باز
  - گره غیرفعال
  - یک گره دیگر
گره ریشه 2

مثال کد

<div id="checkbox-tree">
  <ul>
    <li>
        گره ریشه 1
        <ul>
            <li>
              گره فرزند
            </li>
            <li data-jstree='{ "selected" : true }'>
                در ابتدا انتخاب شده
            </li>
            <li data-jstree='{ "opened" : true }'>
                در ابتدا باز
                <ul>
                    <li data-jstree='{ "disabled" : true }'>
                        گره غیرفعال
                    </li>
                    <li data-jstree='{ "type" : "file" }'>
                        یک گره دیگر
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li data-jstree='{ "type" : "file" }'>
      گره ریشه 2
    </li>
  </ul>
</div>