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:"半勾选 1", halfCheck:true, isParent:true},
  48. { id:2, pId:0, name:"半勾选 2", halfCheck:true, checked:true, isParent:true},
  49. { id:3, pId:0, name:"随意勾选 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 演示</h1>
  59. <h6>[ 文件路径: 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、演示说明</h2>
  67. <ul class="list">
  68. <li>这个演示式实现了 异步加载模式 下简单的勾选操作</li>
  69. <li class="highlight_red">1)、加载子节点后,父节点的 halfCheck 立刻失效</li>
  70. <li class="highlight_red">2)、勾选父节点,不会影响子节点的勾选状态</li>
  71. <li class="highlight_red">3)、勾选父节点,不会让其子节点的 halfCheck 属性失效</li>
  72. </ul>
  73. </li>
  74. <li class="title"><h2>2、setting 配置信息说明</h2>
  75. <ul class="list">
  76. <li>实现半勾选功能,不需要配置任何参数。但半勾选功能属于辅助功能,无法单独使用,因此也需要根据自己的需求配置特定参数。</li>
  77. </ul>
  78. </li>
  79. <li class="title"><h2>3、treeNode 节点数据说明</h2>
  80. <ul class="list">
  81. <li class="highlight_red">1)、请在节点初始化之前,设置 treeNode.halfCheck 属性,详细请参见 API 文档中的相关内容</li>
  82. <li>2)、其他请参考 ‘Radio 勾选操作’</li>
  83. </ul>
  84. </li>
  85. </ul>
  86. </div>
  87. </div>
  88. </BODY>
  89. </HTML>