twotree.htm 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  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. <script src="../../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
  6. <link href="../../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
  7. <link href="../../../lib/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" />
  8. <script src="../../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
  9. <script src="../../../lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
  10. <script src="../../../lib/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
  11. <script src="../../../lib/ligerUI/js/plugins/ligerMenu.js" type="text/javascript"></script>
  12. <script src="draggable.js" type="text/javascript"></script>
  13. <script type="text/javascript">
  14. function getData()
  15. {
  16. return [
  17. { text: '节点1', children: [
  18. { text: '节点1.1' },
  19. { text: '节点1.2' },
  20. { text: '节点1.3', children: [
  21. { text: '节点1.3.1' },
  22. { text: '节点1.3.2' }
  23. ]
  24. },
  25. { text: '节点1.4' }
  26. ]
  27. },
  28. { text: '节点2' },
  29. { text: '节点3' },
  30. { text: '节点4' }
  31. ];
  32. }
  33. var actionNode;
  34. function deleteItem()
  35. {
  36. if (actionNode)
  37. t2.remove(actionNode);
  38. }
  39. $(function ()
  40. {
  41. window['t1'] =
  42. $("#tree1").ligerTree({
  43. nodeDraggable: false,
  44. data: getData()
  45. });
  46. var menu = $.ligerMenu({ width: 120, items:
  47. [
  48. { text: '删除', click: deleteItem, icon: 'delete' }
  49. ]
  50. });
  51. window['t2'] =
  52. $("#tree2").ligerTree({
  53. nodeDraggable: tree1,
  54. data: getData(),
  55. onContextmenu: function (node, e)
  56. {
  57. actionNode = node.data;
  58. menu.show({ top: e.pageY, left: e.pageX });
  59. return false;
  60. }
  61. });
  62. treeDraggable(t1, t2);
  63. });
  64. </script>
  65. </head>
  66. <body style="padding: 10px">
  67. <div id="message">
  68. </div>
  69. <div class="all" style="width: 800px; height: 600px;">
  70. <div style="width: 300px; height: 400px; margin: 10px; margin-right: 1px; float: left;
  71. border: 1px solid #ccc; overflow: auto;">
  72. <ul id="tree1">
  73. </ul>
  74. </div>
  75. <div style="width: 300px; height: 400px; margin: 10px; margin-left: 1px; float: left;
  76. border: 1px solid #ccc; overflow: auto;">
  77. <ul id="tree2">
  78. </ul>
  79. </div>
  80. </div>
  81. <div style="display: none">
  82. </div>
  83. </body>
  84. </html>