checkbox_halfCheck.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <!DOCTYPE html>
  2. <HTML>
  3. <HEAD>
  4. <TITLE> ZTREE DEMO - Checkbox halfCheck</TITLE>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
  7. <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
  8. <script type="text/javascript" src="../../../js/jquery.min.js"></script>
  9. <!-- <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>-->
  10. <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
  11. <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
  12. <!--
  13. <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
  14. -->
  15. <SCRIPT type="text/javascript">
  16. <!--
  17. var setting = {
  18. async: {
  19. enable: true,
  20. url:"../asyncData/getNodes.php",
  21. autoParam:["id", "name=n", "level=lv"],
  22. otherParam:{"chk":"chk"},
  23. dataFilter: dataFilter
  24. },
  25. check: {
  26. enable: true,
  27. autoCheckTrigger: true
  28. },
  29. data: {
  30. simpleData: {
  31. enable: true
  32. }
  33. },
  34. callback: {
  35. onCheck: onCheck,
  36. onAsyncSuccess: onAsyncSuccess
  37. }
  38. };
  39. function dataFilter(treeId, parentNode, childNodes) {
  40. if (parentNode.checkedEx === true) {
  41. for(var i=0, l=childNodes.length; i<l; i++) {
  42. childNodes[i].checked = parentNode.checked;
  43. childNodes[i].halfCheck = false;
  44. childNodes[i].checkedEx = true;
  45. }
  46. }
  47. return childNodes;
  48. }
  49. function onCheck(event, treeId, treeNode) {
  50. cancelHalf(treeNode)
  51. treeNode.checkedEx = true;
  52. }
  53. function onAsyncSuccess(event, treeId, treeNode, msg) {
  54. cancelHalf(treeNode);
  55. }
  56. function cancelHalf(treeNode) {
  57. if (treeNode.checkedEx) return;
  58. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  59. treeNode.halfCheck = false;
  60. zTree.updateNode(treeNode);
  61. }
  62. var zNodes =[
  63. { id:1, pId:0, name:"half 1", halfCheck:true, isParent:true},
  64. { id:2, pId:0, name:"half 2", halfCheck:true, checked:true, isParent:true},
  65. { id:3, pId:0, name:"no half 3", checked:true, isParent:true}
  66. ];
  67. $(document).ready(function(){
  68. $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  69. });
  70. //-->
  71. </SCRIPT>
  72. </HEAD>
  73. <BODY>
  74. <h1>Checkbox halfCheck Demo</h1>
  75. <h6>[ File Path: excheck/checkbox_halfCheck.html ]</h6>
  76. <div class="content_wrap">
  77. <div class="zTreeDemoBackground left">
  78. <ul id="treeDemo" class="ztree"></ul>
  79. </div>
  80. <div class="right">
  81. <ul class="info">
  82. <li class="title"><h2>1, Explanation of Demo</h2>
  83. <ul class="list">
  84. <li>This demo implements the check operation of the dynamic tree</li>
  85. <li class="highlight_red">1). After loaded child nodes, the parent node's 'halfCheck' attribute will be invalid immediately.</li>
  86. <li class="highlight_red">2). If you check the parent node, so will effect the child nodes's check status.</li>
  87. <li class="highlight_red">3). If you check the parent node, it's child node's 'halfCheck' attribute will be invalid.</li>
  88. </ul>
  89. </li>
  90. <li class="title"><h2>2, Explanation of setting</h2>
  91. <ul class="list">
  92. <li>Half-checked functional don't need to configure any parameter. But it is accessibility, can not used alone. So please configure the parameters which you need.</li>
  93. </ul>
  94. </li>
  95. <li class="title"><h2>3, Explanation of treeNode</h2>
  96. <ul class="list">
  97. <li class="highlight_red">1), Please set treeNode.halfCheck attribute, before zTree initialize. See the API documentation for more related contents.</li>
  98. <li>2), By the way, please see the 'Checkbox Operation' Demo.</li>
  99. </ul>
  100. </li>
  101. </ul>
  102. </div>
  103. </div>
  104. </BODY>
  105. </HTML>