listctrl.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>列表控件属性</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  7. <meta name="generator" content="www.leipi.org"/>
  8. <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  9. <link rel="stylesheet" href="leipi.style.css">
  10. <script type="text/javascript" src="../dialogs/internal.js"></script>
  11. <script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
  12. <script type="text/javascript">
  13. function createElement(type, name) {
  14. var element = null;
  15. try {
  16. element = document.createElement('<' + type + ' name="' + name + '">');
  17. } catch (e) {
  18. }
  19. if (element == null) {
  20. element = document.createElement(type);
  21. element.name = name;
  22. }
  23. return element;
  24. }
  25. </script>
  26. </head>
  27. <body>
  28. <div class="content">
  29. <table class="table table-striped">
  30. <thead>
  31. <tr>
  32. <td>
  33. <span> 控件名称 :</span>
  34. <input id="orgname" placeholder="必填项" type="text" class="input-medium" value="列表控件"/> <span
  35. class="label label-important">*</span>
  36. </td>
  37. <td>
  38. 宽 <input id="orgwidth" type="text" value="100%" class="input-small span1" placeholder="auto"/> % 或 px
  39. </td>
  40. </tr>
  41. </thead>
  42. </table>
  43. <table class="table table-striped table-bordered table-condensed" id="tbl">
  44. <thead>
  45. <tr>
  46. <th><span>序号</span></th>
  47. <th><span>表头</span></th>
  48. <th><span>类型</span></th>
  49. <th><span>单位</span></th>
  50. <th><span>合计</span> <a id="showCountTips" title="在该列的底部显示该列的合计数值,数据类型只允许数值类型" rel="popover"><i
  51. class="icon-info-sign"></i></a></th>
  52. <th><span>默认值</span></th>
  53. </tr>
  54. </thead>
  55. <tbody id="tbl1">
  56. <tr>
  57. <td><span class="badge">1</span></td>
  58. <td title="Tab键切换输入框"><input id="item_1" type="text" class="input-medium"></td>
  59. <td title="Tab键切换输入框">
  60. <select id="coltype_1" class="input-medium">
  61. <option value="text">单行输入框</option>
  62. <option value="textarea">多行输入框</option>
  63. <option value="int">数值</option>
  64. </select>
  65. </td>
  66. <td title="Tab键切换输入框"><label><input type="text" class="input-mini" id="unit_1" value=""> </label></td>
  67. <td title="Tab键切换输入框"><label> <input type="checkbox" id="sum_1" class="csum" value="1"> </label></td>
  68. <td title="Tab键切换输入框"><input id="colvalue_1" type="text" class="input-medium"/></td>
  69. </tr>
  70. <tr>
  71. <td><span class="badge">2</span></td>
  72. <td title="Tab键切换输入框"><input id="item_2" type="text" class="input-medium"></td>
  73. <td title="Tab键切换输入框">
  74. <select id="coltype_2" class="input-medium">
  75. <option value="text">单行输入框</option>
  76. <option value="textarea">多行输入框</option>
  77. <option value="int">数值</option>
  78. </select>
  79. </td>
  80. <td title="Tab键切换输入框"><label><input type="text" class="input-mini" id="unit_2" value=""> </label></td>
  81. <td title="Tab键切换输入框"><label> <input type="checkbox" id="sum_2" class="csum" value="2"> </label></td>
  82. <td title="Tab键切换输入框"><input id="colvalue_2" type="text" class="input-medium"/></td>
  83. </tr>
  84. <tr>
  85. <td><span class="badge">3</span></td>
  86. <td title="Tab键切换输入框"><input id="item_3" type="text" class="input-medium"></td>
  87. <td title="Tab键切换输入框">
  88. <select id="coltype_3" class="input-medium">
  89. <option value="text">单行输入框</option>
  90. <option value="textarea">多行输入框</option>
  91. <option value="int">数值</option>
  92. </select>
  93. </td>
  94. <td title="Tab键切换输入框"><label><input type="text" class="input-mini" id="unit_3" value=""> </label></td>
  95. <td title="Tab键切换输入框"><label> <input type="checkbox" id="sum_3" class="csum" value="3"> </label></td>
  96. <td title="Tab键切换输入框"><input id="colvalue_3" type="text" class="input-medium"/></td>
  97. </tr>
  98. <tr>
  99. <td><span class="badge">4</span></td>
  100. <td title="Tab键切换输入框"><input id="item_4" type="text" class="input-medium"></td>
  101. <td title="Tab键切换输入框">
  102. <select id="coltype_4" class="input-medium">
  103. <option value="text">单行输入框</option>
  104. <option value="textarea">多行输入框</option>
  105. <option value="int">数值</option>
  106. </select>
  107. </td>
  108. <td title="Tab键切换输入框"><label><input type="text" class="input-mini" id="unit_4" value=""> </label></td>
  109. <td title="Tab键切换输入框"><label> <input type="checkbox" id="sum_4" class="csum" value="4"> </label></td>
  110. <td title="Tab键切换输入框"><input id="colvalue_4" type="text" class="input-medium"/></td>
  111. </tr>
  112. <tr>
  113. <td><span class="badge">5</span></td>
  114. <td title="Tab键切换输入框"><input id="item_5" type="text" class="input-medium"></td>
  115. <td title="Tab键切换输入框">
  116. <select id="coltype_5" class="input-medium">
  117. <option value="text">单行输入框</option>
  118. <option value="textarea">多行输入框</option>
  119. <option value="int">数值</option>
  120. </select>
  121. </td>
  122. <td title="Tab键切换输入框"><label><input type="text" class="input-mini" id="unit_5" value=""> </label></td>
  123. <td title="Tab键切换输入框"><label> <input type="checkbox" id="sum_5" class="csum" value="5"> </label></td>
  124. <td title="Tab键切换输入框"><input id="colvalue_5" type="text" class="input-medium"/></td>
  125. </tr>
  126. <tr>
  127. <td><span class="badge">6</span></td>
  128. <td title="Tab键切换输入框"><input id="item_6" type="text" class="input-medium"></td>
  129. <td title="Tab键切换输入框">
  130. <select id="coltype_6" class="input-medium">
  131. <option value="text">单行输入框</option>
  132. <option value="textarea">多行输入框</option>
  133. <option value="int">数值</option>
  134. </select>
  135. </td>
  136. <td title="Tab键切换输入框"><label><input type="text" class="input-mini" id="unit_6" value=""> </label></td>
  137. <td title="Tab键切换输入框"><label> <input type="checkbox" id="sum_6" class="csum" value="6"> </label></td>
  138. <td title="Tab键切换输入框"><input id="colvalue_6" type="text" class="input-medium"/></td>
  139. </tr>
  140. <tr>
  141. <td><span class="badge">7</span></td>
  142. <td title="Tab键切换输入框"><input id="item_7" type="text" class="input-medium"></td>
  143. <td title="Tab键切换输入框">
  144. <select id="coltype_7" class="input-medium">
  145. <option value="text">单行输入框</option>
  146. <option value="textarea">多行输入框</option>
  147. <option value="int">数值</option>
  148. </select>
  149. </td>
  150. <td title="Tab键切换输入框"><label><input type="text" class="input-mini" id="unit_7" value=""> </label></td>
  151. <td title="Tab键切换输入框"><label> <input type="checkbox" id="sum_7" class="csum" value="7"> </label></td>
  152. <td title="Tab键切换输入框"><input id="colvalue_7" type="text" class="input-medium"/></td>
  153. </tr>
  154. <tr>
  155. <td><span class="badge">8</span></td>
  156. <td title="Tab键切换输入框"><input id="item_8" type="text" class="input-medium"></td>
  157. <td title="Tab键切换输入框">
  158. <select id="coltype_8" class="input-medium">
  159. <option value="text">单行输入框</option>
  160. <option value="textarea">多行输入框</option>
  161. <option value="int">数值</option>
  162. </select>
  163. </td>
  164. <td title="Tab键切换输入框"><label><input type="text" class="input-mini" id="unit_8" value=""> </label></td>
  165. <td title="Tab键切换输入框"><label> <input type="checkbox" id="sum_8" class="csum" value="8"> </label></td>
  166. <td title="Tab键切换输入框"><input id="colvalue_8" type="text" class="input-medium"/></td>
  167. </tr>
  168. </tbody>
  169. </table>
  170. <!--div class="alert alert-danger">提示:</div-->
  171. </div>
  172. <script type="text/javascript">
  173. var oNode = null, thePlugins = 'listctrl';
  174. var rows_count = 8;
  175. var adefaultDatatype = ['text', 'textarea', 'int', 'calc'];
  176. window.onload = function () {
  177. //弹出窗口初始化函数,这里主要是判断是编辑下拉列表还是新增
  178. if (UE.plugins[thePlugins].editdom) {
  179. oNode = UE.plugins[thePlugins].editdom;
  180. $G('orgname').value = oNode.getAttribute('title');
  181. var gWidth = oNode.getAttribute('orgwidth');
  182. var gTitle = oNode.getAttribute('orgtitle'),
  183. gColType = oNode.getAttribute('orgcoltype'),
  184. gUnit = oNode.getAttribute('orgunit'),
  185. gSum = oNode.getAttribute('orgsum'),
  186. gColValue = oNode.getAttribute('orgcolvalue');
  187. var aTitle = gTitle.split('`'),
  188. aColType = gColType ? gColType.split('`') : null,
  189. aUnit = gUnit ? gUnit.split('`') : null,
  190. aSum = gSum ? gSum.split('`') : null,
  191. aColValue = gColValue ? gColValue.split('`') : null;
  192. $G('orgwidth').value = gWidth;
  193. for (var i = 0; i < aTitle.length - 1; i++) {
  194. var sItem = 'item_' + (i + 1),
  195. sColtype = 'coltype_' + (i + 1),
  196. sUnit = 'unit_' + (i + 1),
  197. sNum = 'sum_' + (i + 1),
  198. sColValue = 'colvalue_' + (i + 1);
  199. $G(sItem).value = aTitle[i];
  200. $G(sUnit).value = aUnit[i];
  201. if (gSum) {
  202. $G(sNum).checked = aSum[i] == 1 ? true : false;
  203. }
  204. if (gColType) {
  205. $('#' + sColtype).val(aColType[i]);
  206. }
  207. if (gColValue) {
  208. if ($.inArray(aColType[i], adefaultDatatype) !== -1) {
  209. $G(sColValue).value = aColValue[i];
  210. }
  211. }
  212. }
  213. }
  214. //合计,强制选择 int
  215. $(".csum").click(function () {
  216. if ($(this).attr("checked")) {
  217. var i = $(this).val();
  218. $("#coltype_" + i).val('int');
  219. }
  220. });
  221. }
  222. dialog.oncancel = function () {
  223. if (UE.plugins[thePlugins].editdom) {
  224. delete UE.plugins[thePlugins].editdom;
  225. }
  226. };
  227. dialog.onok = function () {
  228. var gName = $G('orgname').value.replace(/\"/g, "&quot;"), gWidth = $G('orgwidth').value;
  229. if (gName == '') {
  230. alert('控件名称不能为空');
  231. $G('orgname').focus();
  232. return false;
  233. }
  234. var gTitle = '', gColType = '', gUnitValue = '', gSum = '', gColValue = '',
  235. nCount = 0;
  236. for (var i = 1; i <= rows_count; i++) {
  237. var oItem = $G("item_" + i),
  238. oSum = $G('sum_' + i), oColType = $G('coltype_' + i),
  239. oColValue = $G('colvalue_' + i), oUnit = $G('unit_' + i);
  240. if (oItem.value != '') {
  241. if (gTitle.indexOf(oItem.value + '`') !== -1) {
  242. continue;//重复
  243. }
  244. gTitle += oItem.value + '`'; //表头
  245. nCount++;
  246. if (oSum.checked) { //合计
  247. gSum += '1`';
  248. } else {
  249. gSum += '0`';
  250. }
  251. gColType += oColType.value + '`';
  252. gColValue += oColValue.value + '`';
  253. gUnitValue += oUnit.value + '`';
  254. }//end if
  255. }//end for
  256. if (nCount == 0) {
  257. alert("表头项目不能为空");
  258. return false;
  259. }
  260. if (!oNode) {
  261. try {
  262. oNode = createElement('input', 'leipiNewField');
  263. oNode.setAttribute('leipiPlugins', thePlugins);
  264. oNode.setAttribute('type', 'text');
  265. oNode.setAttribute('value', '{列表控件}');
  266. oNode.setAttribute('readonly', 'readonly');
  267. oNode.setAttribute('title', gName);
  268. oNode.setAttribute('orgtitle', gTitle);
  269. oNode.setAttribute('orgcoltype', gColType);
  270. oNode.setAttribute('orgunit', gUnitValue);
  271. oNode.setAttribute('orgsum', gSum);
  272. oNode.setAttribute('orgcolvalue', gColValue);
  273. if (gWidth != '') {
  274. oNode.style.width = gWidth;
  275. }
  276. oNode.setAttribute('orgwidth', gWidth);
  277. editor.execCommand('insertHtml', oNode.outerHTML);
  278. return true;
  279. } catch (e) {
  280. try {
  281. editor.execCommand('error');
  282. } catch (e) {
  283. alert('控件异常,请到 [雷劈网] 反馈或寻求帮助!');
  284. }
  285. return false;
  286. }
  287. } else {
  288. //修改
  289. oNode.setAttribute('leipiPlugins', thePlugins);
  290. oNode.setAttribute('title', gName);
  291. oNode.setAttribute('orgtitle', gTitle);
  292. oNode.setAttribute('orgcoltype', gColType);
  293. oNode.setAttribute('orgunit', gUnitValue);
  294. oNode.setAttribute('orgsum', gSum);
  295. oNode.setAttribute('orgcolvalue', gColValue);
  296. if (gWidth != '') {
  297. oNode.style.width = gWidth;
  298. } else {
  299. oNode.style.width = '';
  300. }
  301. oNode.setAttribute('orgwidth', gWidth);
  302. delete UE.plugins[thePlugins].editdom; //使用后清空这个对象,变回新增模式
  303. }
  304. };
  305. </script>
  306. </body>
  307. </html>