radio_halfCheck.html 3.0 KB

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