jquery下jstree简单应用 – v1.0

下面是jQuery下jstree简单应用的完整攻略:

一、jstree是什么？

jstree是一个非常优秀、强大的jQuery插件，可以用来创建树形图结构。它支持多种数据源（包括 JSON 和 XML），提供了丰富的配置和事件处理机制，可以灵活、方便的展现数据结构。

二、如何使用jstree？

1. 引入js和css资源文件

<link rel="stylesheet" href="js/jstree/themes/default/style.min.css" />
<script src="js/jstree/jstree.min.js"></script>

引入js和css资源文件，注意路径应该根据实际项目情况进行调整。

2. 编写页面结构

<div id="jstree">
  <!--树形控件会被渲染到这个div中-->
</div>

3. 初始化jstree

$(function(){
    $('#jstree').jstree({ 
      'core' : {
        'data' : [
           //数据源
        ]
      }
    });
});

初始化jstree，可以通过传入不同的参数来满足不同的需求。其中，'core'表示核心配置项，包括数据、状态等。'data'即数据源，是一个数组，可以通过 ajax 请求等方式获取。

4. 渲染节点图标

$(function(){
    $('#jstree').jstree({ 
      'core' : {
        'data' : [
            {
              "text" : "Parent Node",
              "icon" : "fa fa-folder",
              "children" : [
                  { "text" : "Child Node", "icon" : "fa fa-file-text-o" }
              ]
           }
        ]
      }
    });
});

通过'icons'参数可以设置节点图标，可以自定义或者使用fontawesome提供的图标。

5. 注册事件

$(function(){
    $('#jstree').jstree({
        'core' : {
            'data' : [
                {
                  "text" : "Parent Node",
                  "icon" : "fa fa-folder",
                  "children" : [
                      { "text" : "Child Node", "icon" : "fa fa-file-text-o" }
                  ]
               }
            ]
        }
    }).on("select_node.jstree", function (e, data) {
        alert(data.node.text);
    });
});

通过'on'来注册事件处理函数，例如这里的'select_node.jstree'触发了一个“选中节点”事件，并绑定了一个弹出选中节点的提示窗口。

三、实际应用示例

下面分别通过懒加载和ajax请求两个示例来说明jstree的应用。

1. 示例1：懒加载

$(function() {
  $('#jstree').jstree({
    'core': {
      'data': {
        'url': 'get_children.php',
        'data': function(node) {
          return { 'id': node.id };
        }
      }
    }
  });
});

通过配置'data'参数为一个url，来异步获取节点数据（此处的'return'语句的'node.id'是相对复杂的，这个具体需要根据服务端数据源来调整实现），实现了懒加载。

2. 示例2：ajax请求

$(function() {
  $.ajax({
    async: false, //同步请求数据
    type: 'GET',
    url: 'get_nodes.php',
    dataType: 'json',
    success: function(data) {
      $('#jstree').jstree({
        'core': {
          'data' : data
        }
      });
    }
  });
});

通过ajax异步请求数据，并通过jstree的'data'参数来设置数据源。

四、总结

通过以上两个示例，我们了解了jstree的基本用法和两种具体实现方式，实际使用中还需要从多个方面来进行进一步的配置和优化，但是这个攻略已经够用了。