UJson.htm 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. html, body { width: 100%; height: 100%; margin: 0;padding: 0; }
  7. #left { width: 25%; border: 1px solid gray; float: left;}
  8. #right { width: 70%; border: 1px solid gray;float: left;}
  9. .jddiv{ margin: 5px; margin-left: 20px; width: 500px;}
  10. </style>
  11. <!--直接引用1473的js文件-->
  12. <script src="http://d.1473.cn/UJ.js" type="text/javascript"></script>
  13. <!--json类-->
  14. <script src="http://d.1473.cn/js/U.Json.js" type="text/javascript"></script>
  15. <script src="http://d.1473.cn/js/U.JsonData.js" type="text/javascript"></script>
  16. <script src="http://www.1473.cn/js/UC/U.MC.js" type="text/javascript"></script>
  17. <script type="text/javascript">
  18. var jd = _jdata; //json数据
  19. function init() { dgjson(jd, document.getElementById("left")); }
  20. //遍历输出json所有数据
  21. function dgjson(jd, p) {
  22. if (jd.TNode.length > 0) {
  23. var i; for (i = 0; i < jd.TNode.length; i++) {
  24. if (jd.TNode[i].Type != "file") {
  25. var t = $$("div", { "className": "jddiv", "innerHTML": "+" + jd.TNode[i].Name }, p); dgjson(jd.TNode[i], t);
  26. }
  27. else { var t = $$("div", { "className": "jddiv", "innerHTML": "" + jd.TNode[i].Name }, p); }
  28. }
  29. }
  30. }
  31. var aa = new U.Json(jd);
  32. function findone() { disresult(aa.FindOne); }
  33. function FindParent() { disresult(aa.Parent); }
  34. function disresult(CB) {
  35. var s = document.getElementById("jsoninput").value;
  36. var _r = CB.apply(aa, [{ "Name": s}]); //解决this指针的指向问题。没有很好的解决,,初略方案
  37. document.getElementById("result_N").innerHTML = aa.ToString(_r);
  38. document.getElementById("result").style.display = "block";
  39. }
  40. function addChild() {
  41. var s = document.getElementById("jsoninput").value;
  42. var v = document.getElementById("addinput").value;
  43. var _r = CB.apply(aa, [{ "Name": s}]); //解决this指针的指向问题。没有很好的解决,,初略方案
  44. document.getElementById("result_N").innerHTML = aa.ToString(_r);
  45. document.getElementById("result").style.display = "block";
  46. }
  47. function DelMore() {
  48. //var _r = aa.DelMore({ "IsDelete": false }); //解决this指针的指向问题。没有很好的解决,,初略方案
  49. var _r = aa.DelMore({ "Deep": 3 }); //解决this指针的指向问题。没有很好的解决,,初略方案
  50. if (!_r) {alert(_r);}
  51. document.getElementById("result_N").innerHTML = aa.ToString(_r);
  52. document.getElementById("result").style.display = "block";
  53. }
  54. window.onload = init;
  55. </script>
  56. </head>
  57. <body>
  58. <div id="left">
  59. </div>
  60. <div id="right">
  61. <div>各种json操作</div>
  62. <div>输入内容:<input id="jsoninput" style="width: 400px;" value="" type="text" /></div>
  63. <!-------------------查找一个的功能-------------------------->
  64. <div> 1、查找某一个节点,返回该节点的所有数据 调用方式 UJson.findone(D,V),D为json树,V为待查找的json<input onclick="findone()" type="button" value="确定" /> </div>
  65. <div> 2、返回一个节点的所有孩子节点(注:同1),这个函数无需做,同第一个</div>
  66. <!---------------------修改功能------------------------------>
  67. <div> 3、修改某一个节点,这个函数无需做,前台直接修改即可</div>
  68. <div> 4、修改某一个json的多项值,比如用户信息,修改5个以上。则直接修改。</div>
  69. <!--查找父亲的功能-->
  70. <div> 5、找到某个节点的父亲节点。如未根目录,父亲节点为空 <input onclick="FindParent()" type="button" value="确定" /> </div>
  71. <div> 6、找到指定节点所在的数组,同上,找到父亲节点即可找到所在节点的数组,无需做。此功能经常需要</div>
  72. <div> 7、找到父亲节点所在的数组、同上,需要查找父亲节点的父亲节点。需要递归2次,此功能经常需要。</div>
  73. <!-- 添加功能 -->
  74. <div>前面一个div找到节点,这个input输入新插入的节点:<input id="addinput" style="width: 400px;" value="" type="text" /></div>
  75. <div> 8、在指定节点下面添加孩子结点,无需做,前台已经提供了这个功能 <input onclick="addChild()" type="button" value="确定" /> </div>
  76. <div> 9、给指定节点添加兄弟节点,无需做,先找到父亲节点,然后找父亲节点的孩子节点</div>
  77. <div> 10、树的合并,2颗树合并为一颗,此功能无需做,树已经有这个功能。</div>
  78. <!--删除功能-->
  79. <div>11、删除某一个节点,无需做,前台直接删除某一个节点,调用数组的remove函数,此函数已经修改了原型。。 </div>
  80. <div>12、删除拥有某一样属性的所有节点、例如在编程树中,有些元素标记了删除,则不选取这些节点出来。此函数比较复杂<input onclick="DelMore()" type="button" value="确定" /></div>
  81. <div>
  82. 11、清空数组。可以搜索一下清空数组的三个方案</div>
  83. </div>
  84. <div id="result" style="position: absolute; top: 100px; left: 300px; display: none;
  85. width: 400px; min-height: 600px; border: 10px solid gray; background-color: White;">
  86. <div style="width: 390px; height: 30px;">
  87. <div style="float: right; font-size: 20px; cursor: pointer;" onclick="this.parentNode.parentNode.style.display='none'">
  88. X</div>
  89. </div>
  90. <div id="result_N" style="width: 400px; min-height: 570px;">
  91. </div>
  92. </div>
  93. </body>
  94. </html>