表单/表格

highchecktree - 带复选框的树形结构jQuery插件

创客主机


highchecktree是一款使用指定源数据生成带复选框的树形结构的jQuery插件。该树形结构插件对于在大数据的处理上性能十分出色。它使用懒加载的形式来提供性能,子节点会在点击时才去加载数据。该树形结构插件每个节点都带有一个复选框,复选框允许三种选择状态。

使用方法

在页面中引入jQuery和highchecktree.js以及highchecktree.css文件。

  1. <script src="jquery.min.js"></script>
  2. <script src="js/highchecktree.js"></script>
  3. <link rel="stylesheet" href="css/highCheckTree.css">

初始化插件

首先要准备好你需要的树形结构数据。

  1. var mockData = [];
  2. mockData.push({
  3.   item:{
  4.     id: 'id1',
  5.     label: 'label1',
  6.     checked: false
  7.   },
  8.   children: [{
  9.      item:{
  10.       id: 'id11',
  11.       label: 'label11',
  12.       checked: false
  13.     } 
  14.   },{
  15.      item:{
  16.       id: 'id12',
  17.       label: 'label12',
  18.       checked: false
  19.     } 
  20.   },{
  21.      item:{
  22.       id: 'id13',
  23.       label: 'label13',
  24.       checked: false
  25.     } 
  26.   }]
  27. });
  28.  
  29. mockData.push({
  30.   item:{
  31.     id: 'id2',
  32.     label: 'label2',
  33.     checked: false
  34.   },
  35.   children: [{
  36.      item:{
  37.       id: 'id21',
  38.       label: 'label21',
  39.       checked: false
  40.     } 
  41.   },{
  42.      item:{
  43.       id: 'id22',
  44.       label: 'label22',
  45.       checked: true
  46.     } 
  47.   },{
  48.      item:{
  49.       id: 'id23',
  50.       label: 'label23',
  51.       checked: false
  52.     } 
  53.   }]
  54. });
  55.  
  56. mockData.push({
  57.   item:{
  58.     id: 'id3',
  59.     label: 'label3',
  60.     checked: false
  61.   },
  62.   children: [{
  63.      item:{
  64.       id: 'id31',
  65.       label: 'label31',
  66.       checked: true
  67.     } 
  68.   },{
  69.      item:{
  70.       id: 'id32',
  71.       label: 'label32',
  72.       checked: false
  73.     },
  74.     children: [{
  75.       item:{
  76.         id: 'id321',
  77.         label: 'label321',
  78.         checked: false
  79.       }
  80.     },{
  81.       item:{
  82.         id: 'id322',
  83.         label: 'label322',
  84.         checked: false
  85.       }
  86.     }]
  87.   }]
  88. });

然后使用下面的方法来在指定的容器中调用该树形结构插件。

  1. $('#tree-container').highCheckTree({
  2.   data: mockData
  3. });

回调函数

  1. // 当树节点被展开时触发
  2. onExpand: null,  
  3.  
  4. // 当树节点被收缩时触发
  5. onCollapse: null,
  6.  
  7. // 在树节点处于checked状态之前触发
  8. onPreCheck: null,
  9.  
  10. // 在树节点处于checked状态时触发
  11. onCheck: null,   
  12.  
  13. // 在树节点处于unchecked状态时触发
  14. onUnCheck: null, 
  15.  
  16. // 在鼠标滑过节点标签时触发
  17. onLabelHoverOver: null,
  18.  
  19. // 在鼠标滑出节点标签时触发
  20. onLabelHoverOut: null
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!