js 表单布局设计器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>表单布局设计器 !</title> <link type="text/css" href="css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" /><script type="text/javascript" src="js/jquery-1.5.1.min.js"></script><script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script><script type="text/javascript" src="js/jquery.tablednd.js"></script><script type="text/javascript" src="js/dragform.js"></script><style> #formLable { float: left; width: 100px; min-height: 12em; margin-top:10px;margin-left:20px;} * html #formLable { height: 12em; } /* IE6 */.formLable.custom-state-active { background: #eee; }.formLable li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }.formLable li h5 { margin: 0 0 0.4em; cursor: move; }.tdbg {background:#CCFFFF}.notnull{color:#FF0000;}</style></head><body> <center><h2>表单布局设计器</h2></center> <hr/> <br/> <div id="demo"> <table width="99%" border="0" align="center" cellpadding="0" cellspacing="0" > <tr> <td width="15%" align="center" style="border:1px solid #666666" height="35"> 标签</td> <td style="border:1px solid #666666"> <input type="button" onclick="insertCol();" value="插入行" /> <input type="button" onclick="deleteCol();" value="删除行" /> <input type="button" onclick="insertCell();" value="插入列" /> <input type="button" onclick="deleteCell();" value="删除列" /> <input type="button" onclick="combinCol();" value="合并" /> <!--<input type="button" onclick="" value="拆分" disabled />--> <input type="button" onclick="alignOpr('left');" value="左对齐" /> <input type="button" onclick="alignOpr('center');" value="左右对齐" /> <input type="button" onclick="alignOpr('right');" value="右对齐" /> <input type="button" onclick="valignOpr('top');" value="上对齐" /> <input type="button" onclick="valignOpr('middle');" value="上下居中" /> <input type="button" onclick="valignOpr('bottom');" value="下对齐" /> <input type="button" onclick="nullOpr(1);" value="设为必填" /> <input type="button" onclick="nullOpr(2)" value="取消必填设置" /> </td> </tr> <tr> <td rowspan=2 style="border:1px solid #666666" valign="top" > <ul id="formLable" style="border:1px solid #666666" valign="top"> <center>表格设计</center> <table width="99%" border="1" align="center" cellpadding="0" cellspacing="0" id="formTable" style="table-layout:fixed;font-size:12px;"> <tr> <td height="40"> </td> <td height="40"> </td> <td height="40"> </td> <td height="40"> </td></tr><tr> <td height="40"> </td> <td height="40"> </td> <td height="40"> </td> <td height="40"> </td></tr> </table> </td> </tr> <tr> <td style="border:1px solid #666666" height="35"> <input type="button" onclick="" value="查看页面布局" disabled /> <span style="font-size:12px;color:#666666">（操作提示：单元行可以拖动排序！）</span> </td> </tr> </table> </div></body></html> //拖动元素设置 function formTdClickInit(){ //处理单击选中事件 $("#formTable td").click(function(){ $("#formTable td").droppable("destroy"); //注意不要为disabled，ie不正常 $("#formTable td").removeClass("tdbg"); $(this).addClass("tdbg"); $(this).droppable("enable"); $(this).droppable({ accept: "#formLable > li", activeClass: "ui-state-highlight", drop: function( event, ui ) { var drag = ui.draggable; if($(".tdbg > :input").length == 1 || $(this).next().length == 0 || $.trim($(this).text())!="" ){ alert("不允许添加标签！"); return; } drag[0].parentNode.removeChild(drag[0]); //移除左侧元素 var cle = "<a href='#' title='清除' class='ui-icon ui-icon-refresh' onclick='recycle(this)'></a>"; $(this).html(cle+drag.find("h5").html()); $(this).next().html(" <input type='text' name='' disabled style='margin-left:6px;'/>"); } });});}// 接收元素设置function lableDragInit(){ $( "li", $("#formLable") ).draggable({revert: "invalid", containment: $( "#demo" ).length ? "#demo" : "document", //限制在demo块里helper: "clone", //复制拖动cursor: "move"});}$(function(){lableDragInit()formTdClickInit();$("#formTable").tableDnD(); //插入行后，要重新设置//在这里可以设置双击单元格的事件 //$("#formTable td").dblclick(function(){ //showModalDialog("modifyElmAttr.html",this); //}); });//合并单元格function combinCol(){ if($(".tdbg").length == 0){ alert("请选择要合并的单元格！"); return;}if($(".tdbg").next().length == 0 || $(".tdbg").next().find(":input").length ==1){ alert("当前单元格不能合并！"); return;}var colnum = Number($(".tdbg").attr("colspan")) + Number($(".tdbg").next().attr("colspan"));//合并后一个单元格标签的恢复var notnull = $(".tdbg").next().find(".notnull");//除去必填if(notnull.length == 1){notnull[0].parentNode.removeChild(notnull[0]);}if($(".tdbg").next().html().toLowerCase().indexOf("</a>") > -1){ var innerHtml ="<li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">"+$(".tdbg").next().text()+"</h5></li>"; $("#formLable").append(innerHtml); $(".tdbg").next().next().html(" ");//注意input 要清空}$(".tdbg").attr("colspan",colnum).next().remove();lableDragInit();}//插入行function insertCol(){ if($(".tdbg").length == 0){ alert("请选择插入行的位置！"); return;} //首先获取colspan 总数确定td的个数 var max = 0;$("#formTable tr").eq(0).find("td").each(function(){ max += Number($(this).attr("colspan")); }); var tdStr ="";for(var i=0;i<max;i++){ tdStr += "<td height="40"> </td>";} $(".tdbg").parent().after("<tr>"+tdStr+"</tr>"); formTdClickInit();$("#formTable").tableDnD();}//删除行function deleteCol(){ if($(".tdbg").length == 0){ alert("请选择要删除的行！"); return;}//只有一行的时候，不允许删除if($("#formTable tr").length == 1){ alert("不允许删除行！"); return;}//恢复行中的标签$(".tdbg").parent().find("td").each(function(){ var notnull = $(this).find(".notnull");if(notnull.length == 1){notnull[0].parentNode.removeChild(notnull[0]);} if($(this).html().toLowerCase().indexOf("</a>") > -1){ var innerHtml ="<li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">"+$(this).text()+"</h5></li>"; $("#formLable").append(innerHtml); }});$(".tdbg")[0].parentNode.parentNode.removeChild($(".tdbg")[0].parentNode);lableDragInit();}//插入列function insertCell(){ if($(".tdbg").length == 0){ alert("请选择插入列的位置！"); return;}//计算选择列colspan 之前的综合var colNum = Number($(".tdbg").attr("colspan")); $(".tdbg").prevAll().each(function(){ colNum += Number($(this).attr("colspan"));});var noopr =0;$("#formTable tr").each(function(){ if(noopr ==1)return false;var totalCol=0;$(this).find("td").each(function(){ totalCol += Number($(this).attr("colspan"));if(totalCol >= colNum){if($(this).next().find(":input").length ==1)noopr=1;return false;}});});if( noopr ==1){ alert("当前位置不允许插入列，请重新选择！"); return;}else{$("#formTable tr").each(function(){var totalCol=0;$(this).find("td").each(function(){ totalCol += Number($(this).attr("colspan"));if(totalCol >= colNum){$(this).after("<td height="40"> </td>");return false;}});});formTdClickInit();}}//删除列function deleteCell(){ if($(".tdbg").length == 0){ alert("请选择删除列位置！"); return;}//如果选中该列的没有其他同辈元素，不允许删除if($(".tdbg").parent().find("td").length == 1){ alert("不允许删除列！"); return;}//确定删除列的位置，如果为合并的单元格，删除多列var colsNum = $("#formTable tr").index($(".tdbg").parent()); //所在行var startNum = 1; $(".tdbg").prevAll().each(function(){ startNum += Number($(this).attr("colspan"));});var endNum = startNum + Number($(".tdbg").attr("colspan")) -1;$("#formTable tr").each(function(i){ if( i == colsNum){ //选中行对应列的删除 if($(".tdbg").html().toLowerCase().indexOf("</a>") > -1){ var notnull = $(".tdbg").find(".notnull"); if(notnull.length == 1) { notnull[0].parentNode.removeChild(notnull[0]); } var innerHtml ="<li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">" +$(".tdbg").text()+"</h5></li>"; $("#formLable").append(innerHtml); $(".tdbg").next().html(" "); }if($(".tdbg > :input").length ==1 ){ var notnull = $(".tdbg").prev().find(".notnull"); if(notnull.length == 1) { notnull[0].parentNode.removeChild(notnull[0]); } var innerHtml ="<li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">" +$(".tdbg").prev().text()+"</h5></li>"; $("#formLable").append(innerHtml); $(".tdbg").prev().html(" ");} $(".tdbg")[0].parentNode.removeChild($(".tdbg")[0]); } else { if(startNum < endNum ){ //当前单元格为非选中合并格 //找出 colspan 在 startNum~endNum 对应的单元格 //由于有remove操作，删除之后重新从startNum开始 for(var k=startNum;k<=endNum;k++){ var totalCol=0; $(this).find("td").each(function(j){ totalCol += Number($(this).attr("colspan")); if(totalCol >= startNum){ var col = Number($(this).attr("colspan")); if(col>1){ $(this).attr("colspan",col-1); } else { if($(this).html().toLowerCase().indexOf("</a>") > -1){ var notnull = $(this).find(".notnull");if(notnull.length == 1){notnull[0].parentNode.removeChild(notnull[0]);}var innerHtml ="<li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">" +$(this).text()+"</h5></li>"; $("#formLable").append(innerHtml); $(this).next().html(" ");}if($(this).find(":input").length ==1 ){ var notnull = $(this).prev().find(".notnull"); if(notnull.length == 1) { notnull[0].parentNode.removeChild(notnull[0]); } var innerHtml ="<li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">" +$(this).prev().text()+"</h5></li>"; $("#formLable").append(innerHtml); $(this).prev().html(" ");}$(this)[0].parentNode.removeChild($(this)[0]);} return false; } }); } } else //非合并选中单元格 colspan =1 {//找出所对应的单元格var totalCol=0,epItem,$epItem;$(this).find("td").each(function(l){ totalCol += Number($(this).attr("colspan")); if(totalCol >= startNum){ epItem =l; return false; }});$epItem = $(this).find("td").eq(epItem);var col = Number($epItem.attr("colspan")); if(col>1){ $epItem.attr("colspan",col-1); }else{ if($epItem.html().toLowerCase().indexOf("</a>") > -1){ var notnull = $epItem.find(".notnull");if(notnull.length == 1){ notnull[0].parentNode.removeChild(notnull[0]);} var innerHtml ="<li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">" +$epItem.text()+"</h5></li>"; $("#formLable").append(innerHtml); $epItem.next().html(" "); } if($epItem.find(":input").length ==1 ){ var notnull = $epItem.prev().find(".notnull"); if(notnull.length == 1) { notnull[0].parentNode.removeChild(notnull[0]); } var innerHtml ="<li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">" +$epItem.prev().text()+"</h5></li>"; $("#formLable").append(innerHtml); $epItem.prev().html(" ");} $epItem[0].parentNode.removeChild($epItem[0]); } } }});lableDragInit();} //恢复单元格标签 function recycle(obj){ $item = $(obj).parent(); var notnull = $item.find(".notnull"); if(notnull.length == 1){ notnull[0].parentNode.removeChild(notnull[0]); } var innerHtml ="<li class="ui-widget-content ui-corner-tr"><h5 class="ui-widget-header">"+$item.text()+"</h5></li>"; $("#formLable").append(innerHtml); $item.html(" "); $item.next().html(" "); lableDragInit();}//水平对齐操作 function alignOpr(val){ if($(".tdbg").length == 0){ alert("请选择要操作的单元格！"); return;}$(".tdbg").attr("align",val);}//垂直对其操作 function valignOpr(val){ if($(".tdbg").length == 0){ alert("请选择要操作的单元格！"); return;}$(".tdbg").attr("valign",val);}//必填操作function nullOpr(val){ if($(".tdbg").length == 0){ alert("请选择要操作的单元格！"); return;} if(val == 1){ if($.trim($(".tdbg").text())==""){ alert("该单元格为空，不能设为必填！"); return;}if($(".tdbg .notnull").length == 1){ alert("无需重复设置必填！"); return;} $(".tdbg").append("<span class=notnull>*</span>");}else{ if($(".tdbg .notnull").length == 1) $(".tdbg .notnull")[0].parentNode.removeChild($(".tdbg .notnull")[0]);}}