可折叠/可检查 层次结构树插件 jQuery CheckTree

  • 源码大小:11.36KB
  • 所需积分:1积分
  • 源码编号:19JP-3356
  • 浏览次数:617次
  • 最后更新:2023年06月04日
  • 所属栏目:其他
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

CheckTree是一个jQuery插件,它采用嵌套列表并将其转换为可折叠、可扩展和可检查的层次树。

它允许您在列表中的每个列表项旁边添加复选框,以展开/折叠其子项。非常适合快速创建显示子项之间关系的子项列表。

jQuery插件目前可用于MIT和GPL许可证下的所有个人或商业项目。这意味着您可以选择最适合您的项目的许可证,并相应地使用它。

如何使用它:

1.将复选框添加到嵌套HTML列表中的每个节点,如下所示:

  1. <ul class="tree">
  2. <li>
  3. <input type="checkbox">
  4. <label>United States</label>
  5. <ul>
  6. <li>
  7. <input type="checkbox" value="pennsylvania">
  8. <label>Pennsylvania</label>
  9. </li>
  10. </ul>
  11. </li>
  12. <li>
  13. <input type="checkbox">
  14. <label>Canada</label>
  15. <ul>
  16. <li>
  17. <input type="checkbox" value="british_columbia">
  18. <label>British Columbia</label>
  19. </li>
  20. </ul>
  21. </li>
  22. <li>
  23. <input type="checkbox" value="afghanistan">
  24. <label>Afghanistan</label>
  25. </li>
  26. <li>
  27. <input type="checkbox">
  28. <label>Sealand</label>
  29. <ul class='expanded'>
  30. <li>
  31. <input type="checkbox" value="tree_city">
  32. <label>Tree City</label>
  33. </li>
  34. <li>
  35. <input type="checkbox" value="oil_province">
  36. <label>Oil Province</label>
  37. <ul>
  38. <li>
  39. <input type="checkbox" value="oil_city">
  40. <label>Oil City</label>
  41. </li>
  42. </ul>
  43. </li>
  44. <li>
  45. <input type="checkbox" value="fun_province">
  46. <label>Fun Province</label>
  47. <ul>
  48. <li>
  49. <input type="checkbox" value="fun_city">
  50. <label>Fun City</label>
  51. </li>
  52. <li>
  53. <input type="checkbox" value="not_fun_city">
  54. <label>Not Fun City</label>
  55. </li>
  56. </ul>
  57. </li>
  58. </ul>
  59. </li>
  60. </ul>

2.下载并加载jquery.checktree.js查询jQuery之后的脚本。

  1. <script src="/path/to/cdn/jquery.slim.min.js"></script>
  2. <script src="/path/to/jquery.checktree.js"></script>

3.初始化HTML列表上的插件。

  1. $(function(){
  2. $('ul.tree').checkTree({
  3. // ...
  4. });
  5. });

4.将CSS样式应用于层次结构树。

  1. ul.tree, ul.tree * {
  2. list-style-type: none;
  3. margin: 0;
  4. padding: 0 0 5px 0;
  5. }
  6.  
  7. ul.tree img.arrow {
  8. padding: 2px 0 0 0;
  9. border: 0;
  10. width: 20px;
  11. }
  12.  
  13. ul.tree li {
  14. padding: 4px 0 0 0;
  15. }
  16.  
  17. ul.tree li ul {
  18. padding: 0 0 0 20px;
  19. margin: 0;
  20. }
  21.  
  22. ul.tree label {
  23. cursor: pointer;
  24. font-weight: bold;
  25. padding: 2px 0;
  26. }
  27.  
  28. ul.tree label.hover {
  29. color: red;
  30. }
  31.  
  32. ul.tree li .arrow {
  33. width: 20px;
  34. height: 18px;
  35. padding: 0;
  36. margin: 0;
  37. cursor: pointer;
  38. float: left;
  39. background: transparent no-repeat 0 0px;
  40. }
  41.  
  42. ul.tree li .collapsed {
  43. background-image: url(images/right.svg);
  44. }
  45.  
  46. ul.tree li .expanded {
  47. background-image: url(images/down.svg);
  48. }
  49.  
  50. ul.tree li .checkbox {
  51. width: 20px;
  52. height: 18px;
  53. padding: 0;
  54. margin: 0;
  55. cursor: pointer;
  56. float: left;
  57. background: url(images/square.svg) no-repeat 0 0px;
  58. }
  59.  
  60. ul.tree li .checked {
  61. background-image: url(images/check.svg);
  62. }
  63.  
  64. ul.tree li .half_checked {
  65. background-image: url(images/square-minus.svg);
  66. }

5.确定如何与标签进行交互。默认值:“展开”。

  1. $(function(){
  2. $('ul.tree').checkTree({
  3. labelAction: "check",
  4. });
  5. });

6.可用的回调功能。这些回调应该是接受一个参数的函数。复选框树将返回选中/展开的项目的jQuery包装的LI元素。

  1. $(function(){
  2. $('ul.tree').checkTree({
  3. onExpand: null,
  4. onCollapse: null,
  5. onCheck: null,
  6. onUnCheck: null,
  7. onHalfCheck: null,
  8. onLabelHoverOver: null,
  9. onLabelHoverOut: null,
  10. });
  11. });

更新日志:

2022-10-13

  • BUGFIX:允许将插件多次应用于同一元素

预览截图