ถ้าต้องการจะแสดงลิสต์รายการต่าง ๆ เป็นรูปแบบ tree เพื่อแสดงความเชื่อมโยงระหว่างโหนดต่าง ๆ หรือจะทำเป็นเมนูก็ใช้ง่าย
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!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" 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
อ่านเพิ่มเติม