jQuery Plugin To Create Checkbox Tree View - highchecktree

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.