jstree樹控制項

一、樹控制項基本介紹

jstree樹控制項是一款基於jQuery庫的樹形結構控制項，它提供了豐富的功能和擴展性，可以滿足大多數樹形結構的需求。使用jstree可以快速構建出一個功能完善的樹形控制項。

使用jstree可以實現以下功能：

支持多種節點類型，如普通節點、文件夾節點等
支持拖拽、複製、剪切等交互操作
支持非同步載入，大大提高了渲染效率
支持自定義節點和樣式等擴展

二、繪製樹形結構

jstree提供了多種繪製樹形結構的方法，下面我們介紹其中兩種常用的方法。

1. 從HTML列表繪製樹形結構

使用HTML列表可以很方便地定義樹形的結構，如下代碼：

<ul>
  <li>根節點
    <ul>
      <li>節點1</li>
      <li>節點2</li>
      <li>節點3
        <ul>
          <li>子節點1</li>
          <li>子節點2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

通過載入HTML列表，我們可以很方便地生成一個樹形結構，如下代碼：

$('#tree').jstree({
  'core' : {
    'data' : $('#tree-list').html()
  }
});

其中，tree是一個div容器，tree-list是一個id為tree-list的列表容器。

2. 從JSON數據繪製樹形結構

使用JSON數據可以更加靈活的定義樹形結構，如下代碼：

[
  {
    "id" : "1",
    "text" : "根節點",
    "children" : [
      {
        "id" : "2",
        "text" : "節點1"
      },
      {
        "id" : "3",
        "text" : "節點2"
      },
      {
        "id" : "4",
        "text" : "節點3",
        "children" : [
          {
            "id" : "5",
            "text" : "子節點1"
          },
          {
            "id" : "6",
            "text" : "子節點2"
          }
        ]
      }
    ]
  }
]

通過載入JSON數據，我們可以很方便地生成一個樹形結構，如下代碼：

$('#tree').jstree({
  'core' : {
    'data' : [
      {
        "id" : "1",
        "text" : "根節點",
        "children" : [
          {
            "id" : "2",
            "text" : "節點1"
          },
          {
            "id" : "3",
            "text" : "節點2"
          },
          {
            "id" : "4",
            "text" : "節點3",
            "children" : [
              {
                "id" : "5",
                "text" : "子節點1"
              },
              {
                "id" : "6",
                "text" : "子節點2"
              }
            ]
          }
        ]
      }
    ]
  }
});

三、三維可視化

jstree提供的是一個樹形控制項，本身並沒有可視化的功能，但我們可以通過一些第三方庫來實現可視化。下面我們介紹兩個可視化庫。

1. three.js

three.js是一款基於WebGL的3D圖形庫，它可以幫助我們很方便地實現各種3D效果。

下面是使用three.js實現jstree的代碼示例：

// 載入three.js和jstree
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jstree/3.3.11/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jstree/3.3.11/themes/default/style.min.css" />

// 載入jstree的數據
var data = [
  {
    "id" : "1",
    "text" : "根節點",
    "children" : [
      {
        "id" : "2",
        "text" : "節點1"
      },
      {
        "id" : "3",
        "text" : "節點2"
      },
      {
        "id" : "4",
        "text" : "節點3",
        "children" : [
          {
            "id" : "5",
            "text" : "子節點1"
          },
          {
            "id" : "6",
            "text" : "子節點2"
          }
        ]
      }
    ]
  }
];

// 創建場景和相機
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 500);

// 創建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 創建jstree
$('#tree').jstree({
  'core' : {
    'data' : data
  },
  'plugins' : ['dnd']
});

// 繪製3D圖形
var material = new THREE.MeshBasicMaterial({color: 0xff0000});
var geometry = new THREE.BoxGeometry(100, 100, 100);
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 循環渲染場景
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

2. d3.js

d3.js是一款基於數據驅動的JavaScript可視化庫，它可以很方便地繪製各種圖表和圖形。

下面是使用d3.js實現jstree的代碼示例：

// 載入d3.js和jstree
<script src="https://cdn.bootcdn.net/ajax/libs/d3/5.15.0/d3.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jstree/3.3.11/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jstree/3.3.11/themes/default/style.min.css" />

// 載入jstree的數據
var data = [
  {
    "id" : "1",
    "text" : "根節點",
    "children" : [
      {
        "id" : "2",
        "text" : "節點1"
      },
      {
        "id" : "3",
        "text" : "節點2"
      },
      {
        "id" : "4",
        "text" : "節點3",
        "children" : [
          {
            "id" : "5",
            "text" : "子節點1"
          },
          {
            "id" : "6",
            "text" : "子節點2"
          }
        ]
      }
    ]
  }
];

// 創建jstree
$('#tree').jstree({
  'core' : {
    'data' : data
  }
});

// 繪製3D圖形
var width = window.innerWidth;
var height = window.innerHeight;
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
var force = d3.layout.force().size([width, height]).linkDistance(200).charge(-600);
var nodes = [], links = [];
data2tree(data[0], null);
force.nodes(nodes).links(links).start();
var link = svg.selectAll(".link").data(links).enter().append("line").attr("class", "link");
var node = svg.selectAll(".node").data(nodes).enter().append("circle").attr("class", "node").attr("r", 10).style("fill", "red").call(force.drag);
force.on("tick", function(){
  link.attr("x1", function(d){ return d.source.x; }).attr("y1", function(d){ return d.source.y; }).attr("x2", function(d){ return d.target.x; }).attr("y2", function(d){ return d.target.y; });
  node.attr("cx", function(d){ return d.x; }).attr("cy", function(d){ return d.y; });
});
function data2tree(data, parentNode) {
    if (!data) return;
    var node = {id: data.id, name: data.text};
    nodes.push(node);
    if(parentNode) links.push({source: parentNode, target: node});
    if (data.children) {
        for (var i = 0; i < data.children.length; i++)
        {
            data2tree(data.children[i], node);
        }
    }
}

四、自定義節點

jstree提供了自定義節點顯示的功能，我們可以通過配置節點渲染函數來自定義節點的樣式和內容。

下面是一個自定義節點的示例：

$('#tree').jstree({
  'core' : {
    'data' : [
      {
        "id" : "1",
        "text" : "根節點",
        "icon" : "glyphicon glyphicon-folder-close",
        "state" : {"opened": true},
        "children" : [
          {
            "id" : "2",
            "text" : "節點1",
            "icon" : "glyphicon glyphicon-file",
            "state" : {"selected": true}
          },
          {
            "id" : "3",
            "text" : "節點2",
            "icon" : "glyphicon glyphicon-file",
            "state" : {"disabled": true}
          },
          {
            "id" : "4",
            "text" : "節點3",
            "icon" : "glyphicon glyphicon-folder-close",
            "state" : {"opened": true},
            "children" : [
              {
                "id" : "5",
                "text" : "子節點1",
                "icon" : "glyphicon glyphicon-file"
              },
              {
                "id" : "6",
                "text" : "子節點2",
                "icon" : "glyphicon glyphicon-file"
              }
            ]
          }
        ]
      }
    ]
  },
  'plugins' : ['wholerow'],
  'checkbox' : {
    'tie_selection' : false
  },
  'types' : {
    'default' : {
      'icon' : 'glyphicon glyphicon-record'
    }
  },
  'state' : {
    'key' : 'demo3'
  },
  'dnd' : {
    'large_drop_target' : true
  },
  'contextmenu' : {
    'items' : customMenu
  }
});

function customMenu(node) {
  var items = {
    'delete' : {
      'label' : '刪除',
      'action' : function() {}
    },
    'rename' : {
      'label' : '重命名',
      'action' : function() {}
    }
  };
  return items;
}

$('#tree').on('create_node.jstree', function(e, data) {
  data.instance.set_icon(data.node, 'glyphicon glyphicon-leaf');
});

$('#tree').on('rename_node.jstree', function(e, data) {
  data.instance.set_text(data.node, data.text);
});

$('#tree').on('delete_node.jstree', function(e, data) {
  console.log('delete_node', data.node);
});

$('#tree').on('move_node.jstree', function(e, data) {
  console.log('move_node', data.node);
});

在以上示例中，我們使用了自定義渲染函數set_icon和set_text來修改節點的樣式和內容，使用contextmenu插件實現右鍵菜單，並使用事件監聽器來處理節點的創建、重命名、刪除和移動事件。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/279716.html