ถ้าต้องการจะแสดงลิสต์รายการต่าง ๆ เป็นรูปแบบ tree เพื่อแสดงความเชื่อมโยงระหว่างโหนดต่าง ๆ หรือจะทำเป็นเมนูก็ใช้ง่าย
<!DOCTYPE html>
<html>
<head>
<title>jQuery.jsTree: HTML data</title>
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
referrerpolicy="no-referrer" rel="stylesheet" />
<link crossorigin="anonymous"
href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.17/themes/default/style.min.css"
integrity="sha512-A5OJVuNqxRragmJeYTW19bnw9M2WyxoshScX/rGTgZYj5hRXuqwZ+1AVn2d6wYTZPzPXxDeAGlae0XwTQdXjQA=="
referrerpolicy="no-referrer" rel="stylesheet" />
</head>
<body>
<div id="treeA">
<ul>
<li>fork 1</li>
<li>fork 2</li>
<li>fork 3</li>
<li>fork 4</li>
<li data-jstree='{"opened":true, "selected":true}'>fork 5<ul>
<li>fork 5.1</li>
<li data-jstree='{"icon":"fa fa-regular fa-file"}'>fork 5.2</li>
<li>fork 5.3</li>
<li>fork 5.4</li>
<li>fork 5.5</li>
<li>fork 5.6</li>
<li>fork 5.7</li>
<li>fork 5.8</li>
</ul>
</li>
<li>fork 6</li>
<li>fork 7</li>
<li>fork 8</li>
<li>fork 9</li>
<li>fork 10</li>
</ul>
</div>
<script crossorigin="anonymous"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script crossorigin="anonymous"
integrity="sha512-Rzhxh2sskKwa+96nRopp/hvGexBzEPG6mnFI6uRy059FZfksJJFYmqDFn050KUDhivXLsT6SvoaEf5iSp2SHjg=="
referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.17/jstree.min.js"></script>
<script type="module">
$(document).ready(function () {
$('#treeA').jstree();
});
</script>
</body>
</html>
บรรทัดที่ 26, 28 จะมีการกำหนดรูปแบบให้โหนดมีการตกแต่งจากปกติ
บรรทัดที่ 55 จะเปลี่ยน UL เป็น tree
อ่านเพิ่มเติม