Checkable Hierarchical Tree Plugin - jQuery sim-tree
File Size: | 26.5 KB |
---|---|
Views Total: | 13844 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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:
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.