selectlabel.html 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>选择标签</title>
  6. <script type="text/javascript" src="${ctx}/assets/lib/jquery/1.9.1/jquery.min.js"></script>
  7. <style type="text/css">
  8. ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
  9. .bq{font-size:14px;padding:5px 0 5px 30px;font-family: Microsoft YaHei;color:#4d4d4d;}
  10. .lm_lm{margin:10px 10px;}
  11. .lable{margin-right:5px;diaplay:inline;}
  12. </style>
  13. <link rel="stylesheet" type="text/css" media="screen" href="${ctx}/assets/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" >
  14. <script src="${ctx}/assets/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js" type="text/javascript" ></script>
  15. <script type="text/javascript">
  16. String.prototype.replaceAll = function(s1,s2){
  17. return this.replace(new RegExp(s1,"gm"),s2);
  18. }
  19. var labels=eval(${labels!});
  20. var setting = {
  21. check: {
  22. enable: true,
  23. chkStyle: "radio",
  24. radioType: "all"
  25. },
  26. view: {
  27. dblClickExpand: false
  28. },
  29. data: {
  30. simpleData: {
  31. enable: true,
  32. idKey: "columnid",
  33. pIdKey: "parentid",
  34. rootPId: 0
  35. }
  36. },
  37. callback: {
  38. onClick: onClick,
  39. onCheck: onCheck
  40. }
  41. };
  42. var zNodes =${columns};
  43. function onClick(e, treeId, treeNode) {
  44. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  45. zTree.checkNode(treeNode, !treeNode.checked, null, true);
  46. return false;
  47. }
  48. function onCheck(e, treeId, treeNode) {
  49. var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
  50. nodes = zTree.getCheckedNodes(true),
  51. columnNames = "";
  52. columnIDs="";
  53. for (var i=0;i<nodes.length; i++) {
  54. if(i>0){
  55. columnNames +=",";
  56. columnIDs +=",";
  57. }
  58. columnNames += nodes[i].name;
  59. columnIDs += nodes[i].columnid;
  60. }
  61. $("#columnName").val(columnNames);
  62. $("#columnID").val(columnIDs);
  63. tagColumnIDs=columnIDs
  64. $("#treeDemo").hide();
  65. }
  66. function showMenu() {
  67. $("#treeDemo").show();
  68. var cityObj = $("#columnName");
  69. var cityOffset = $("#columnName").offset();
  70. $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
  71. $("body").bind("mousedown", onBodyDown);
  72. }
  73. function hideMenu() {
  74. $("#menuContent").fadeOut("fast");
  75. $("body").unbind("mousedown", onBodyDown);
  76. }
  77. function onBodyDown(event) {
  78. if (!(event.target.id == "menuBtn" || event.target.id == "columnName" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
  79. hideMenu();
  80. }
  81. }
  82. $(document).ready(function(){
  83. $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  84. });
  85. function findByLabelID(labelID){
  86. var la;
  87. $.each(labels, function(index,item) {
  88. if(item.labelID==labelID){
  89. la= item;
  90. }
  91. })
  92. return la;
  93. }
  94. var tagColumnIDs="";
  95. var _workbench=$("#workbench",parent.document.body).contents();
  96. var cmstag=_workbench.find("[objid='${objid}']").attr("cmstag");
  97. var context=_workbench.find("[objid='${objid}']")[0].outerHTML;
  98. //var context=_workbench.find("[objid='${objid}']")[0].innerHTML;
  99. //alert(context);
  100. var labelID1="";
  101. $(function(){
  102. //document.getElementById("context").value = context;
  103. //$("#context").append(context);//获取内容
  104. $.each(labels, function(index,item) {
  105. if(item.labelName.indexOf("-") >= 0){
  106. var lable='<div class="bq"><input type="radio" id="'+item.labelID+'" name="a" class="lable" >'+item.labelName+'';
  107. lable+='</div>';
  108. $("#labels1").append(lable);
  109. }else{
  110. var lable1='<div class="bq"><input type="radio" id="'+item.labelID+'" name="a" class="lable" >'+item.labelName+'';
  111. lable+='</div>';
  112. $("#labels").append(lable1);
  113. }
  114. if(cmstag!=null&&cmstag!="undefined"){
  115. labelID1=cmstag.split(":")[0];
  116. $("#"+labelID1).attr("checked","checked");
  117. }
  118. if(cmstag!=null&&cmstag.indexOf(":")==-1){
  119. $("#"+cmstag).attr("checked","checked");
  120. }
  121. ft();
  122. })
  123. function ft(){
  124. var thisLabel=findByLabelID($("input[name='a']:checked").attr("id"));
  125. //console.log(thisLabel);
  126. if(thisLabel!=null){
  127. var paramForm="";
  128. var labelID=thisLabel.labelID;
  129. if(cmstag!=null&&cmstag!="undefined"){
  130. labelID1=cmstag.split(":")[0];
  131. }
  132. if(thisLabel.params!=null){
  133. $.each(thisLabel.params,function(index,param){
  134. paramForm+="<div class='lm_lm'>"
  135. paramForm+="<label style='padding-right:10px;'>"+param.paramLabel+"</label>";
  136. if(param.paramInput=="text"){
  137. if(labelID=="fylb"){
  138. var fylbValue=_workbench.find("[labeltype='xxlblb']").attr("cmstag");
  139. if(fylbValue!=null){
  140. fylbValue=fylbValue.split(";")[1].split("=")[1];
  141. }else{
  142. alert("请先动态化列表");
  143. window.parent.closeDialog(window.parent.dialogIndex);
  144. return;
  145. }
  146. paramForm+="<input name='"+param.paramName+"' type='hidden' value="+fylbValue+" class='param'/>";
  147. }else{
  148. paramForm+="<input name='"+param.paramName+"' class='param'/>";
  149. }
  150. }else if(param.paramInput=="columnTree"){
  151. paramForm+="<input class='param' name='"+param.paramName+"' id='columnID' type='hidden'/><input id='columnName' type='text' readonly value='' onclick='showMenu();' />";
  152. }else if(param.paramInput=="select"){
  153. paramForm+="<input type='radio' name='"+param.paramName+"' class='param' value='focusBox' /><img src='/images'><input type='radio' name='"+param.paramName+"' class='param' value='ocusif'/><img src='/images'> ";
  154. }
  155. paramForm+="</div>"
  156. }) }
  157. $("#setParam").html(paramForm);
  158. if(labelID==labelID1&&cmstag!=null&&cmstag.indexOf(":")>=0&&labelID!="fylb"){
  159. var cmstage1=cmstag.split(":")[1];
  160. var cmstages=cmstage1.split(";");
  161. for(var i=0;i<cmstages.length;i++){
  162. if(labelID=="clj"||labelID=="qt"){
  163. $("[name='"+cmstages[i].split("=")[0]+"']").val(cmstag.split("=")[1]);
  164. }else{
  165. $("[name='"+cmstages[i].split("=")[0]+"']").val(cmstages[i].split("=")[1]);
  166. }
  167. if(cmstages[i].split("=")[0]=="columnID"){
  168. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  169. var node=zTree.getNodeByParam("columnid",cmstages[i].split("=")[1]);
  170. var columnName=$("#columnName").val();
  171. if(columnName!=node.name){
  172. zTree.checkNode(node, !node.checked, null, true);
  173. $("#columnName").val(node.name);
  174. $("#columnID").val(node.columnid);
  175. }
  176. }
  177. }
  178. }}
  179. }
  180. $(".lable").click(function(){
  181. ft();
  182. })
  183. $("#qd").click(function(){
  184. var thisLabel=findByLabelID($("input[name='a']:checked").attr("id"));
  185. if(typeof(thisLabel)=="undefined"){
  186. alert("请选择标签");
  187. }
  188. $.each(thisLabel.eles,function(index,ele){
  189. $.each(ele.attrs,function(i,attr){
  190. value=attr.value;
  191. $(".param").each(function(){
  192. value=value.replaceAll("#"+$(this).attr("name")+"#",$(this).val());
  193. })
  194. if(attr.key=="show"){
  195. _workbench.find("[objid='${objid}']")[0].innerHTML=value;
  196. }else{
  197. if(index==0){
  198. _workbench.find("[objid='${objid}']").find(ele.jquerySelect).addBack().attr(attr.key,value);
  199. }else{
  200. _workbench.find("[objid='${objid}']").find(ele.jquerySelect).attr(attr.key,value);
  201. }
  202. }
  203. })
  204. })
  205. window.parent.closeDialog(window.parent.dialogIndex);
  206. })
  207. $("#qdbj").click(function(){
  208. var thisLabel=findByLabelID($("input[name='a']:checked").attr("id"));
  209. if(typeof(thisLabel)=="undefined"){
  210. window.parent.closeDialog(window.parent.dialogIndex);
  211. //调用编辑 页面
  212. edit();
  213. }
  214. $.each(thisLabel.eles,function(index,ele){
  215. $.each(ele.attrs,function(i,attr){
  216. value=attr.value;
  217. $(".param").each(function(){
  218. value=value.replaceAll("#"+$(this).attr("name")+"#",$(this).val());
  219. })
  220. if(attr.key=="show"){
  221. _workbench.find("[objid='${objid}']")[0].innerHTML=value;
  222. }else{
  223. if(index==0){
  224. _workbench.find("[objid='${objid}']").find(ele.jquerySelect).addBack().attr(attr.key,value);
  225. }else{
  226. _workbench.find("[objid='${objid}']").find(ele.jquerySelect).attr(attr.key,value);
  227. }
  228. }
  229. })
  230. })
  231. window.parent.closeDialog(window.parent.dialogIndex);
  232. //调用编辑 页面
  233. edit();
  234. })
  235. })
  236. function edit(){
  237. window.parent.showDialog('p_setproperty','编辑代码',"/myconsole/dynamic/edit?objID="+'${objid}'+"&labelType="+'${labelType}',900,565);
  238. }
  239. </script>
  240. </head>
  241. <body>
  242. <div>
  243. <div id="labels" style="padding-bottom:20px;float:left;width:50%;"></div>
  244. <div id="labels1" style="padding-bottom:20px;"></div>
  245. </div>
  246. <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
  247. <ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
  248. </div>
  249. <div id="setParam" style="font-size:14px;padding:5px 0 5px 30px;font-family: Microsoft YaHei;color:#4d4d4d;"></div>
  250. <div style="text-align:center;margin-top:40px;"><button id="qd" style="background:#4285f4;border-radius:5px;color:#fff;border:none;padding:8px 18px;font-size:13px;margin-right: 10px;">确定</button><button id="qdbj" style="background:#4285f4;border-radius:5px;color:#fff;border:none;padding:8px 18px;font-size:13px;">保存并编辑</button></div>
  251. </body>
  252. </html>