jQuery Plugin To Create Checkbox Tree View - highchecktree
File Size: | 7.81 KB |
---|---|
Views Total: | 24079 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
highchecktree is a jQuery plugin for making a collapsible checkbox tree that allows three check states.
Features:
- Handles large amounts of data with high performance.
- Supports lazy loading of children nodes when you check or expend the parent node.
How to use it:
1. Load jQuery library and the jQuery highchecktree plugin's JS & CSS files in the html page.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/highchecktree.js"></script> <link rel="stylesheet" href="css/highCheckTree.css">
2. Prepare your data in the JavaScript as follow.
var mockData = []; mockData.push({ item:{ id: 'id1', label: 'label1', checked: false }, children: [{ item:{ id: 'id11', label: 'label11', checked: false } },{ item:{ id: 'id12', label: 'label12', checked: false } },{ item:{ id: 'id13', label: 'label13', checked: false } }] }); mockData.push({ item:{ id: 'id2', label: 'label2', checked: false }, children: [{ item:{ id: 'id21', label: 'label21', checked: false } },{ item:{ id: 'id22', label: 'label22', checked: true } },{ item:{ id: 'id23', label: 'label23', checked: false } }] }); mockData.push({ item:{ id: 'id3', label: 'label3', checked: false }, children: [{ item:{ id: 'id31', label: 'label31', checked: true } },{ item:{ id: 'id32', label: 'label32', checked: false }, children: [{ item:{ id: 'id321', label: 'label321', checked: false } },{ item:{ id: 'id322', label: 'label322', checked: false } }] }] });
3. Call the plugin on a specified container to generate a checkbox tree.
$('#tree-container').highCheckTree({ data: mockData });
4. Callback functions.
// triggered when the tree node was expanded onExpand: null, // trigered when the tree node was collapsed onCollapse: null, // triggered before the tree node was checked onPreCheck: null, // triggered when the tree node was checked onCheck: null, // triggered when the tree node was unchecked onUnCheck: null, // triggered when mouse hover over the label onLabelHoverOver: null, // triggered when mouse hover out the label onLabelHoverOut: null
This awesome jQuery plugin is developed by yanxk888. For more Advanced Usages, please check the demo page or visit the official website.