js 表单布局设计器

最新推荐文章于 2020-11-09 18:28:46 发布
最新推荐文章于 2020-11-09 18:28:46 发布
阅读量707 收藏
点赞数
分类专栏： js特效 文章标签： xhtml ui javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/czhaozhi3758/article/details/83981959
版权 


<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]);

		}

	}
czhaozhi3758
关注
专栏目录
基于VUE的ElementUi可视化表单设计器布局器
heye520的博客
11-26 5730
码农苦码农懂的个人空间 工作日志 正文 基于VUE的ElementUi可视化表单设计器布局器 顶 原 码农苦码农懂 发布于 09/11 15:35 字数 1187 阅读 41 收藏 0 点赞 1 评论 0 WebKitSassBootstraplayuiElement 头条面试归来，有些话想和Java开发者说！>>> 您是否有过以下想法： 我是一名element初学者，我想...
jquery 表单设计器
07-02
jquery 表单设计器，简单，灵活。无加密
纯js开发的表单设计器
01-28
全部是用js实现 表单的动态定义 生成xml文件
Form表单js设计器生成器
04-24
利用js生成设计表单，表单为Bootstrap风格
表单设计Javascript工具
03-03
javascript 表单设计工具
JS高级程序设计 表单部分
weixin_33694172的博客
11-28 77
目录：表单：1.引用表单2.提交表单3.重置表单4.表单字段 在HTML中，表单是由<form>元素来表示的，而在javascript中，表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement,因而与其他HTML元素具有相同的默认属性。不过...
表单设计器 纯js BS架构 绝对值这个分
02-15
可视化布局web 控件拖拽、表单自定义、自定义控件自己开发,本来想在这个基础上改版成Bootstrap 添加布局组件，思路有了技术不到家，分享给大家
JavaScript实现的可视化表单设计器源码.zip
05-31
JavaScript实现的可视化表单设计器源码。实现的可视化表单设计器。基于Vue的可视化表单设计器，让表单开发简单而高效。 特性如下： 可视化配置页面 提供栅格布局，并采用flex实现对齐 一键预览配置的效果 一键生成...
基于Layui的拖拽式表单设计器设计源码
最新发布
04-11
本源码提供了一个基于Layui的拖拽式表单设计器设计。项目包含174个文件，其中包括122个JavaScript文件、24个CSS样式文件、4个GIF图片、4个WOFF字体文件、4个HTML文件、2个Markdown文档、2个PNG图片、2个EOT字体文件...
jQuery表单设计器自由拖拽特效
04-02
这款设计器基于流行的JavaScript库jQuery，提供了丰富的功能和高度的定制性，使得开发者能够轻松构建交互性强、用户友好的表单。通过其特有的鼠标拖拽特性，用户无需深入编程细节，就能直观地在界面上自由布局各个...
jquery UI表单设计器
08-30
一个用jaqury UI开发的表单设计器源代码
表单设计器
02-13
jQuery formBuilder是一个开源的WEB在线html表单设计器，开发人员可以通过拖拉实现一个可视化的表单。
强大的jQuery拖拽式表单设计器特效.zip
07-05
强大的jQuery拖拽式表单设计器特效是一款强大的网页在线自由拖拽式表单设计器jQuery代码特效。
完美的jQuery拖拽式表单设计器.rar
07-08
web拖拽式表单设计器Formbuild是强大的在线WEB表单设计器，它通常在、OA系统、问卷调查系统、考试系统、等领域发挥着重要作用，你可以在此基础上自定义修改使功能无限强大！
FormDesigner基于AntDesign和jQueryUI的表单设计器
08-10
Form Designer 基于Ant Design 和 jQuery UI 的表单设计器
【推荐】用于UI和表单设计的10款jQuery插件
weixin_34321977的博客
09-23 103
本文搜集了一些有用的用户界面和架构设计工具。包含架构验证器、文件上传以及UI工具包。1.A Better Form这款插件有助于清除垃圾评论、垃圾邮件和自动提交表单。在线演示2.3 State Switch Plugin此款插件可切换至三种状态。在线演示3.Accessible radio button and checkbox replacement此插件可以访问单选按钮和复选框更换在线演示4....
jquery $.post 超时_推荐四个开源的jQuery可视化表单设计器
weixin_39649660的博客
11-09 626
jquery开源在线表单拖拉设计器formBuilder(推荐)jQuery formBuilder是一个开源的WEB在线html表单设计器，开发人员可以通过拖拉实现一个可视化的表单。支持表单常用控件，如文本框，密码码，多选框，单选框，文件上传等，在线设计选项的默认值，轻松增加减少默认值。 高级表单设计器Ueditor FormDesign PluginsLeipi Form Design是百度编...
图形布局-Layout 之js设计实现
我的Github
02-18 1577
前言 定位browser 的 chart,   VML,SVG, HTML5 Canvas使用的方式各不一样。 如果使用现有的js  library (各种实现js 图表的library汇总与比较) ， 调用的API方式也肯定不同。 举个例子: draw2d 使用addFigure 和 setPosition 都可以设置图的位置。 混在特定技术或是特定library 里去layout ，
js 原生表单设计器
08-08
JS原生表单设计器是一种使用JavaScript语言编写的工具，可用于动态创建和设计网页表单。它提供了一组API和方法，允许开发者通过代码控制表单元素的创建、布局、样式和行为。 使用JS原生表单设计器，开发者可以从零开始构建个性化的表单，也可以对现有的表单进行修改和优化。通过设置属性和事件监听器，可以实现对表单元素的验证、提交、重置等功能。这样就可以在前端实现动态表单的生成和管理，避免了后端不断修改表单的繁琐过程。 JS原生表单设计器具有灵活性和可扩展性，可以根据项目需求定制各种不同类型和样式的表单。同时，它也提供了一些常用的表单组件，如输入框、下拉框、按钮等，可以直接使用或基于自定义进行修改。 除此之外，JS原生表单设计器还支持响应式布局，可以根据不同设备的屏幕大小和方向自动调整表单的显示效果。这样可以保证在不同的终端上都能正常展示和使用表单。 总结来说，JS原生表单设计器是一种强大的工具，可以简化表单的开发和管理过程，提高开发效率和用户体验。它为开发者提供了丰富的功能和灵活的定制选项，使得表单的设计更加灵活和个性化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值