awesome.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <!DOCTYPE html>
  2. <HTML>
  3. <HEAD>
  4. <TITLE> ZTREE DEMO - Simple Data</TITLE>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. <!-- Include font-awesome here, CDN is ok, or locally installed by bower to your project -->
  7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  8. <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
  9. <link rel="stylesheet" href="../../../css/awesomeStyle/awesome.css" type="text/css">
  10. <script type="text/javascript" src="../../../js/jquery.min.js"></script>
  11. <!-- <script type="text/javascript" src="../../../js/jquery.min.js"></script>
  12. <!-- <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>-->-->
  13. <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
  14. <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
  15. <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
  16. <SCRIPT type="text/javascript">
  17. <!--
  18. var setting = {
  19. view: {
  20. addHoverDom: addHoverDom,
  21. removeHoverDom: removeHoverDom,
  22. selectedMulti: false
  23. },
  24. check: {
  25. enable: true
  26. ,chkStyle: 'radio'
  27. ,radioType: "level"
  28. },
  29. data: {
  30. simpleData: {
  31. enable: true
  32. }
  33. },
  34. edit: {
  35. enable: true
  36. }
  37. };
  38. var zNodes =[
  39. { id:1, pId:0, name:"pNode 1", open:true},
  40. { id:11, pId:1, name:"pNode 11"},
  41. { id:111, pId:11, name:" sNode 111"},
  42. { id:112, pId:11, name:"sNode 112"},
  43. { id:113, pId:11, name:"sNode 113"},
  44. { id:114, pId:11, name:"sNode 114"},
  45. { id:12, pId:1, name:"pNode 12"},
  46. { id:121, pId:12, name:"sNode 121"},
  47. { id:122, pId:12, name:"sNode 122"},
  48. { id:123, pId:12, name:"sNode 123"},
  49. { id:124, pId:12, name:"sNode 124"},
  50. { id:13, pId:1, name:"pNode 13", isParent:true},
  51. { id:2, pId:0, name:"pNode 2"},
  52. { id:21, pId:2, name:"pNode 21", open:true},
  53. { id:211, pId:21, name:"sNode 211"},
  54. { id:212, pId:21, name:"sNode 212"},
  55. { id:213, pId:21, name:"sNode 213"},
  56. { id:214, pId:21, name:"sNode 214"},
  57. { id:22, pId:2, name:"pNode 22"},
  58. { id:221, pId:22, name:"sNode 221"},
  59. { id:222, pId:22, name:"sNode 222"},
  60. { id:223, pId:22, name:"sNode 223"},
  61. { id:224, pId:22, name:"sNode 224"},
  62. { id:23, pId:2, name:"pNode 23"},
  63. { id:231, pId:23, name:"sNode 231"},
  64. { id:232, pId:23, name:"sNode 232"},
  65. { id:233, pId:23, name:"sNode 233"},
  66. { id:234, pId:23, name:"sNode 234"},
  67. { id:3, pId:0, name:"pNode 3", isParent:true}
  68. ];
  69. function setCheck() {
  70. setting.check.chkStyle = $("#r1").attr("checked")? "checkbox":"radio";
  71. setting.check.enable = (!$("#disablechk").attr("checked"));
  72. $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  73. }
  74. $(document).ready(function(){
  75. $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  76. setCheck();
  77. $("#r1").bind("change", setCheck);
  78. $("#r2").bind("change", setCheck);
  79. $("#disablechk").bind("change", setCheck);
  80. });
  81. var newCount = 1;
  82. function addHoverDom(treeId, treeNode) {
  83. var sObj = $("#" + treeNode.tId + "_span");
  84. if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
  85. var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
  86. + "' title='add node' onfocus='this.blur();'></span>";
  87. sObj.after(addStr);
  88. var btn = $("#addBtn_"+treeNode.tId);
  89. if (btn) btn.bind("click", function(){
  90. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  91. zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
  92. return false;
  93. });
  94. };
  95. function removeHoverDom(treeId, treeNode) {
  96. $("#addBtn_"+treeNode.tId).unbind().remove();
  97. };
  98. //-->
  99. </SCRIPT>
  100. </HEAD>
  101. <BODY>
  102. <h1>Awesome Style</h1>
  103. <h6>[ File Path: super/awesome.html ]</h6>
  104. <div class="content_wrap">
  105. <div class="bg left">
  106. <ul id="treeDemo" class="ztree"></ul>
  107. </div>
  108. <div class="right">
  109. <ul class="info">
  110. <li class="title"><h2>1, Explanation of fontawesome Style</h2>
  111. <ul class="list">
  112. <li>You need to include the fontawesome stylesheet in your page (http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css)</li>
  113. <li> <i class="fa fa-car"></i> &lt;= This should show a car icon (if fontawesome is loaded properly)</li>
  114. <li class="highlight_red">Include the css stylesheet: 'css/awesomeStyle'</li>
  115. <li>Thanks to mikkelking for this Demo. For reference only.</li>
  116. <li><p>Mode: <br/>
  117. <label ><input type="radio" id="r1" class="radio first" name="r" value="checkbox" checked />
  118. Checkbox</label>
  119. <label><input type="radio" id="r2" class="radio" name="r" value="radio" /> Radio</label>
  120. <label><input type="checkbox" id="disablechk" > Disable</label>
  121. <br/>
  122. </li>
  123. </ul>
  124. </ul>
  125. </li>
  126. </ul>
  127. </div>
  128. </div>
  129. </BODY>
  130. </HTML>