checkbox.html 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <!DOCTYPE html>
  2. <HTML>
  3. <HEAD>
  4. <TITLE> ZTREE DEMO - checkbox</TITLE>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  7. <link rel="stylesheet" href="../css/demo.css" type="text/css">
  8. <link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css" type="text/css">
  9. <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
  10. <script type="text/javascript" src="../js/jquery.ztree.core-3.5.js"></script>
  11. <script type="text/javascript" src="../js/jquery.ztree.excheck-3.5.js"></script>
  12. <SCRIPT type="text/javascript">
  13. <!--
  14. var setting = {
  15. check: {
  16. enable: true
  17. },
  18. data: {
  19. simpleData: {
  20. enable: true
  21. }
  22. }
  23. };
  24. var zNodes =[
  25. {id:4, pId:0, name:"河北省", open:true, nocheck:true},
  26. {id:41, pId:4, name:"石家庄"},
  27. {id:42, pId:4, name:"保定"},
  28. {id:43, pId:4, name:"邯郸"},
  29. {id:44, pId:4, name:"承德"},
  30. {id:5, pId:0, name:"广东省", open:true, nocheck:true},
  31. {id:51, pId:5, name:"广州"},
  32. {id:52, pId:5, name:"深圳"},
  33. {id:53, pId:5, name:"东莞"},
  34. {id:54, pId:5, name:"佛山"},
  35. {id:6, pId:0, name:"福建省", open:true, nocheck:true},
  36. {id:61, pId:6, name:"福州"},
  37. {id:62, pId:6, name:"厦门"},
  38. {id:63, pId:6, name:"泉州"},
  39. {id:64, pId:6, name:"三明"}
  40. ];
  41. var code;
  42. function setCheck() {
  43. var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
  44. py = $("#py").attr("checked")? "p":"",
  45. sy = $("#sy").attr("checked")? "s":"",
  46. pn = $("#pn").attr("checked")? "p":"",
  47. sn = $("#sn").attr("checked")? "s":"",
  48. type = { "Y":py + sy, "N":pn + sn};
  49. zTree.setting.check.chkboxType = type;
  50. showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
  51. }
  52. function showCode(str) {
  53. if (!code) code = $("#code");
  54. code.empty();
  55. code.append("<li>"+str+"</li>");
  56. }
  57. $(document).ready(function(){
  58. $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  59. setCheck();
  60. $("#py").bind("change", setCheck);
  61. $("#sy").bind("change", setCheck);
  62. $("#pn").bind("change", setCheck);
  63. $("#sn").bind("change", setCheck);
  64. });
  65. //-->
  66. </SCRIPT>
  67. </HEAD>
  68. <BODY style="padding-left: 10%">
  69. <ul id="treeDemo" class="ztree" style="zoom:1.5" ></ul>
  70. </BODY>
  71. </HTML>