Checkable Hierarchical Tree Plugin - jQuery sim-tree

The jQuery sim-tree plugin lets you create a checkable, hierarchical tree with support for asynchronous data loading and indeterminate (tri-state) checkboxes.

See also:

• 10 Best Tree View Plugins For jQuery

How to use it:

1. Import the jQuery sim-tree plugin's JavaScript and CSS files into your html page which has jQuery library loaded.

<link rel="stylesheet" href="/dist/simTree.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="/dist/simTree.js"></script>

2. Create a container element in which you want to render the tree.

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

3. Generate a tree from local data defined in an array of JS objects.

var myData = [{
    "id": '1',
    "pid": '',
    "name": "JavaScript",
},
{
    "id": '11',
    "pid": '1', // parent ID
    "name": "Angular"
},
{
    "id": '12',
    "pid": '1',
    "name": "React"
},{
    "id": '13',
    "pid": '1',
    "name": "Vuejs"
},{
    "id": '14',
    "pid": '1',
    "name": "JavaScript"
},
{
    "id": '2',
    "pid": '',
    "name": "HTML5"
},
{
    "id": '3',
    "pid": '',
    "name": "CSS3",
    "disabled": true // is disabled?
}];

simTree({
  el: '#tree',
  data: myData,
  onClick: function (item) {
    // callback
  }
});

// or
simTree({
  el: '#tree',
  data: function (obj, callback) {
    callback(myData);
  },
  onClick: function (item) {
    // callback
  }
});

4. Load external data via AJAX requests.

simTree({
  el: '#tree',
  data: function (obj, callback) {
    request({
      url: 'getTreeList', // data URL
    }).then(function (res) {
      callback(res.data);
    })
  }
  onClick: function (item) {
  },
  done: function () {
  }
});

5. Load child nodes asynchronously.

// data.json
{
  "code": "0",
  "msg": "",
  "data": [
    {
      "name": "Parent Node 1",
      "id": "0001",
      "pid": "",
      "children": true
    },
    {
      "name": "Parent Node 2",
      "id": "0002",
      "pid": "",
      "children": false
    }
  ]
}

// render
simTree({
  el: '#tree',
  childNodeAsy: true,
  data: function (obj, callback) {
    var id = obj.id; 
    if (!id) {
      request({
        url: 'tree.json'
      }).then(function (res) {
        callback(res.data);
      })
    } else {
      request({
        url: 'treeChild.json',
        data: {
            id: id
        }
      }).then(function (res) {
        callback(res.data);
      })
    }
  },
  onClick: function (item) {
      console.log(item)
  },
  done: function () {
  }
});

6. All default plugin options and callback functions.

// enable parent/child nodes
linkParent: false,

// custom key
response: {
  name: 'name',
  id: 'id',
  pid: 'pid',
  checked: 'checked',
  expand: 'expand',
  disabled: 'disabled'
},

// is checkable?
check: false,

// enable asynchronous data loading for child nodes
childNodeAsy: false,

// callbacks
onClick: function() {},
onChange: function() {},
done: function() {},

Changelog:

2019-03-25

• bugfix

2019-01-17

• ignore casesensitive when searching

2019-01-02

• Fixed for search.

2018-11-28

• JS Update

2018-10-15

• Improvement

---

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