<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" class="formLable ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">姓名 </h5>
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">年龄 </h5>
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">家庭住址 </h5>
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">性别 </h5>
</li>
</ul>
</td>
<td height="200" 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]);
}
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
