Dynamic Tree View Plugin For jQuery Mobile - jqm-tree

jqm-tree is a jQuery tree view widget for jQuery mobile framework that helps you create a dynamic tree structure from JSON data.

How to use it:

1. Make sure you have jQuery and jQuery Mobile loaded in the document.

<link rel="stylesheet" href="path/to/jquery.mobile.min.css">  
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="path/to/jquery.mobile.min.js" ></script>

2. Load the jqm-tree.js script after jQuery library.

<script src="js/jqm-tree.js"></script>

3. Create a DIV element that will be served as the container for your tree structure.

<div id="tree"></div>

4. Initialize the plugin and add your data into the tree structure using JavaScript objects.

$("#tree").jqmtree({
 data: [
  { "id": 1, "title": "item1" },
  { "id": 2, "title": "item1_1", "pid":1 },
  { "id": 3, "title": "item1_2", "pid": 1 },
  { "id": 4, "title": "item2", "pid": 0 },
  { "id": 5, "title": "item3", "pid": 0 },
  { "id": 6, "title": "item1_2_1", "pid": 3 }
  ]
});

5. Available options.

$("#tree").jqmtree({
  title:'',
  collapsed: true,
  textTag:'h4'
});

---

This awesome jQuery plugin is developed by julianzhu1117. For more Advanced Usages, please check the demo page or visit the official website.