• این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید
  • نداریم

آموزش jsTree

jsTree

jsTree یکی از پلاگین های جی کوئری است که برای پیاده سازی ساختار درختی را در صفحات وب مورد استفاده قرار می گیرد. jsTree را براحتی می توانید مورد استفاده قرار دهید و تغییرات در آن به سادگی انجام پذیر است. در این مقاله ما قصد داریم تا شما را با نحوه راه اندازی و استفاده از jsTree آشنا کنیم.

خب بدون توضیحات اضافی بریم سراغ اصل مطلب!

1- ابتدا می بایست کتابخانه های jsTree را دانلود و آنها را به صفحه HTML خود لینک کنیم. جهت دانلود این کتابخانه ها بر روی لینک زیر کلیک کنید.

دانلود کتابخانه های jsTree

بعد از دانلود فایل فوق،آنرا  از حالت فشرده خارج کنید. که محتوای داخلی آن در تصویر زیر نمایش داده شده است.

jsTree02

سپس ویرایشگر کد خود را باز کرده و محتوای زیر را داخل آن کپی کنید و به عنوان یه صفحه HTML با نام jsTree.html ذخیره کنید.

<!DOCTYPE html>
<html>
   <head>
      <title>jsTree Test</title>
	  <meta charset="utf-8">      
	  <link rel="stylesheet" href="dist/themes/default/style.min.css">           
  </head>
  <body>
<!-- 3 setup a container element -->
<div id="jstree">  
   <!-- in this example the tree is populated from inline HTML -->   
  <ul>      
   <li>Root node 1  
           <ul>        
         <li id="child_node_1">Child node 1</li> 
                <li>Child node 2</li>      
       </ul>  
       </li>   
      <li>Root node 2</li>
     </ul>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="dist/jstree.min.js"></script>
<script>  
    $(function () {  
        $("#jstree").jstree({     
           "core" : {       
           // so that create works   
            "check_callback" : true   
             },              
   "plugins" : [ "contextmenu" ]     
       });     
   });   
</script>
</body>
</html>

سپس پوشه dist از مجموعه فایل هایی که در فوق دانلود کردید را کپی کرده و در کنار فایل jsTree.html همانند تصویر زیر قرار دهید.(Pase کنید.)

jsTree03

jsTree04

سپس بر روی jsTree.html دوبار کلیک کنید تا صفحه HTML اجرا شود. سپس تصویر زیر را مشاهده خواهید کرد.

شما می توانید با راست کلیک کردن بر روی هر یک از نودهای درخت آنها را حذف، ویرایش و یا منتقل کنید.

jsTree05