editable.htm 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  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. <link href="../../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet"
  6. type="text/css" />
  7. <script src="../../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
  8. <script src="../../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
  9. <script src="../../../lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>
  10. <script src="../../../lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
  11. <script src="../../../lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
  12. <script src="../../../lib/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
  13. <script src="../../../lib/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
  14. <script src="../../../lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
  15. <script src="../TreeDeptData.js" type="text/javascript"></script>
  16. <script type="text/javascript">
  17. function alert(message)
  18. {
  19. $.ligerDialog.alert(message.toString(), '提示信息');
  20. }
  21. function tip(message)
  22. {
  23. $.ligerDialog.tip({ title: '提示信息', content: message.toString() });
  24. }
  25. var manager;
  26. $(function ()
  27. {
  28. manager = $("#maingrid").ligerGrid({
  29. columns: [
  30. { display: '部门名', name: 'name', width: 250, align: 'left', editor: { type: 'text'} },
  31. { display: '部门标示', name: 'id', width: 250, type: 'int', align: 'left' },
  32. { display: '部门描述', name: 'remark', width: 250, align: 'left', editor: { type: 'text'} }
  33. ], width: '100%', pageSizeOptions: [5, 10, 15, 20], height: '97%',
  34. onSelectRow: function (rowdata, rowindex)
  35. {
  36. $("#txtrowindex").val(rowindex);
  37. },
  38. data: TreeDeptData, alternatingRow: false, tree: { columnName: 'name' }, checkbox: false,
  39. autoCheckChildren: false
  40. }
  41. );
  42. });
  43. function deleteRow()
  44. {
  45. var row = manager.getSelectedRow();
  46. manager.deleteRow(row);
  47. }
  48. var i = -1;
  49. function getNewData(withchildren)
  50. {
  51. i++;
  52. var dept = $("#txtDept").val();
  53. var data = {
  54. name: dept + i,
  55. id: dept + i,
  56. remark: dept + i
  57. };
  58. if (withchildren)
  59. {
  60. data.children = [];
  61. data.children.push(getNewData());
  62. data.children.push(getNewData());
  63. data.children.push(getNewData());
  64. }
  65. return data;
  66. }
  67. //parent:是否增加到当前节点下面
  68. function addRow(withchildren)
  69. {
  70. var data = getNewData(withchildren);
  71. var selectRow = manager.getSelectedRow();
  72. var parentRow = selectRow;
  73. if (manager.isLeaf(parentRow))
  74. {
  75. tip('叶节点不能增加子节点');
  76. return;
  77. }
  78. manager.add(data, null, true, parentRow);
  79. }
  80. function appendToCurrentNodeUp()
  81. {
  82. var selectRow = manager.getSelectedRow();
  83. if (!selectRow) return;
  84. var selectRowParnet = manager.getParent(selectRow);
  85. var data = getNewData();
  86. manager.add(data, selectRow, true, selectRowParnet);
  87. }
  88. function appendToCurrentNodeDown()
  89. {
  90. var selectRow = manager.getSelectedRow();
  91. if (!selectRow) return;
  92. var selectRowParnet = manager.getParent(selectRow);
  93. var data = getNewData();
  94. manager.add(data, selectRow, false, selectRowParnet);
  95. }
  96. function getSelected()
  97. {
  98. var row = manager.getSelectedRow();
  99. if (!row) { alert('请选择行'); return; }
  100. alert(JSON.stringify(row));
  101. }
  102. function getData()
  103. {
  104. var data = manager.getData();
  105. alert(JSON.stringify(data));
  106. }
  107. function hasChildren()
  108. {
  109. var row = manager.getSelected();
  110. alert(manager.hasChildren(row));
  111. }
  112. function upgrade()
  113. {
  114. var row = manager.getSelected();
  115. manager.upgrade(row);
  116. }
  117. function demotion()
  118. {
  119. var row = manager.getSelected();
  120. manager.demotion(row);
  121. }
  122. function isLeaf()
  123. {
  124. var row = manager.getSelected();
  125. alert(manager.isLeaf(row));
  126. }
  127. function toggle()
  128. {
  129. var row = manager.getSelected();
  130. manager.toggle(row);
  131. }
  132. function expand()
  133. {
  134. var row = manager.getSelected();
  135. manager.expand(row);
  136. }
  137. function up()
  138. {
  139. var row = manager.getSelected();
  140. manager.up(row);
  141. }
  142. function down()
  143. {
  144. var row = manager.getSelected();
  145. manager.down(row);
  146. }
  147. </script>
  148. <style type="text/css">
  149. .l-button{width: 120px; float: left; margin-left: 10px; margin-bottom:2px; margin-top:2px;}
  150. </style>
  151. </head>
  152. <body style="padding: 4px">
  153. <div>
  154. <div style="margin: 2px;">
  155. 【增加节点选项】 部门:
  156. <input type="text" value="新部门" id="txtDept" />
  157. </div>
  158. <a class="l-button" onclick="deleteRow()">
  159. 删除选择的行</a>
  160. <a class="l-button" onclick="addRow()">增加节点</a>
  161. <a class="l-button" onclick="addRow(true)" style="width: 150px;">增加节点(附加子节点)</a>
  162. <a class="l-button" onclick="appendToCurrentNodeUp()" style="width: 150px;">增加节点到同级别(上方)</a>
  163. <a class="l-button" onclick="appendToCurrentNodeDown()" style="width: 150px;">增加节点到同级别(下方)</a>
  164. <a class="l-button" onclick="upgrade()">升级</a>
  165. <a class="l-button" onclick="demotion()">降级</a>
  166. <a class="l-button" onclick="expand()">伸展</a>
  167. <a class="l-button" onclick="toggle()">伸展/收缩节点</a>
  168. <a class="l-button" onclick="up()">上移</a>
  169. <a class="l-button" onclick="down()">下移</a>
  170. <a class="l-button" onclick="isLeaf()">是否叶节点节点</a>
  171. <a class="l-button" onclick="getSelected()">获取选中的值(选择行)</a>
  172. <a class="l-button" onclick="getData()">获取当前的值</a>
  173. <div class="l-clear">
  174. </div>
  175. </div>
  176. <div id="maingrid">
  177. </div>
  178. <div>
  179. </div>
  180. </body>
  181. </html>