radio_halfCheck.html 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <!DOCTYPE html>
  2. <HTML>
  3. <HEAD>
  4. <TITLE> ZTREE DEMO - Radio 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. },
  24. check: {
  25. enable: true,
  26. autoCheckTrigger: true,
  27. chkStyle: "radio",
  28. radioType: "level"
  29. },
  30. data: {
  31. simpleData: {
  32. enable: true
  33. }
  34. },
  35. callback: {
  36. onAsyncSuccess: onAsyncSuccess
  37. }
  38. };
  39. function onAsyncSuccess(event, treeId, treeNode, msg) {
  40. cancelHalf(treeNode);
  41. }
  42. function cancelHalf(treeNode) {
  43. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  44. treeNode.halfCheck = false;
  45. zTree.updateNode(treeNode);
  46. }
  47. var zNodes =[
  48. { id:1, pId:0, name:"half 1", halfCheck:true, isParent:true},
  49. { id:2, pId:0, name:"half 2", halfCheck:true, checked:true, isParent:true},
  50. { id:3, pId:0, name:"no half 3", isParent:true}
  51. ];
  52. $(document).ready(function(){
  53. $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  54. });
  55. //-->
  56. </SCRIPT>
  57. </HEAD>
  58. <BODY>
  59. <h1>Radio halfCheck Demo</h1>
  60. <h6>[ File Path: excheck/radio_halfCheck.html ]</h6>
  61. <div class="content_wrap">
  62. <div class="zTreeDemoBackground left">
  63. <ul id="treeDemo" class="ztree"></ul>
  64. </div>
  65. <div class="right">
  66. <ul class="info">
  67. <li class="title"><h2>1, Explanation of Demo</h2>
  68. <ul class="list">
  69. <li>This demo implements the check operation of the dynamic tree</li>
  70. <li class="highlight_red">1). After loaded child nodes, the parent node's 'halfCheck' attribute will be invalid immediately.</li>
  71. <li class="highlight_red">2). If you check the parent node, will not effect the child nodes's check status.</li>
  72. <li class="highlight_red">3). If you check the parent node, it's child node's 'halfCheck' attribute will still be valid.</li>
  73. </ul>
  74. </li>
  75. <li class="title"><h2>2, Explanation of setting</h2>
  76. <ul class="list">
  77. <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>
  78. </ul>
  79. </li>
  80. <li class="title"><h2>3, Explanation of treeNode</h2>
  81. <ul class="list">
  82. <li class="highlight_red">1), Please set treeNode.halfCheck attribute, before zTree initialize. See the API documentation for more related contents.</li>
  83. <li>2), By the way, please see the 'Radio Operation' Demo.</li>
  84. </ul>
  85. </li>
  86. </ul>
  87. </div>
  88. </div>
  89. </BODY>
  90. </HTML>