配合拖动页面中控件达到页面动态生成后页面的排版效果。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>窗体设计</title>
<SCRIPT language="JavaScript" src="/cmsweb/script/jscommon.js"></SCRIPT>
JavaScript代码
<script language="JavaScript">
<!--
/*
代码说明：
－、下面代码中的"xx"、"yy"是为移动元素所需的2个动态属性，分别记录移动前的X和Y坐标。
－、主元素(主选择元素)：第一个选中的元素；次元素(次选择元素)：第二个开始选中的所有元素
*/
var IsDesignChanged=false
var IsDraging=false //判断是否处于拖动状态中
var xMouseBefMove, yMouseBefMove //移动元素前的鼠标X、Y坐标
var currentSelMainElement //当前选中的主元素（第一个选中的元素）
var currentDot //当前正移动(正改变主选择元素宽度高度)的定位点
var saveSign //保存类型：save, saveas
var arrElments = new Array() //保存所有次选择元素（第二个开始选中的元素）
var arrDots = new Array() //保存所有次选择元素的定位点
var g_pointSelTimes = 0; //多选控件时判断第几次点击
var g_pointStartX = 0; //多选控件的起点
var g_pointStartY = 0; //多选控件的起点
var g_pointEndX = 0; //多选控件的终点
var g_pointEndY = 0; //多选控件的终点
document.onmousedown=EvtMouseDown //定义鼠标点击的事件入口
document.onmouseup=EvtMouseUp //定义鼠标放开的事件入口
document.onkeydown=EvtKeyDown //定义键盘点击的事件入口
document.onmouseover=EvtMouseOver //定义鼠标移至的事件入口
//添加元素
function AddElement(){
try{
IsDesignChanged=true
//获取选择的字段
var selIndex = document.all.item("ListBox1").selectedIndex;
if (selIndex == -1){
alert("请选择合适的字段！");
return;
}
var ctlDispName = document.all.item("ListBox1").options(selIndex).text;
var valType = GetCtrlValType(document.all.item("ListBox1").options(selIndex).value)
var ctlName = GetCtrlName(document.all.item("ListBox1").options(selIndex).value)
//创建Text元素
var blnCreateLabel = 1;
if (valType == "1"){ //选择项
var ctlText1 = document.createElement("<SELECT ctrltype='ddlist' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' dragSign='frmElement' id='" + ctlName + "' name='" + ctlName + "' style='Z-INDEX: 125; POSITION: absolute; HEIGHT: 20px; WIDTH: 90px;TOP:5px;LEFT:97px'> <OPTION selected></OPTION></SELECT>");
panelForm.appendChild(ctlText1);
}else if (valType == "101"){ //是输入窗体设计中的多媒体型
//创建文件上传控件元素
var ctlFile1 = document.createElement("<INPUT ctrltype='image' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' type='file' id='" + ctlName + "' name='" + ctlName + "' dragSign='fileElement' disabled style='Z-INDEX: 103; POSITION: absolute; LEFT: 97px; TOP: 5px; WIDTH: 222px'>");
panelForm.appendChild(ctlFile1);
}else if (valType == "102"){ //是打印窗体设计中的多媒体型
var ctlImg1 = document.createElement("<IMG border=0 ctrltype='image' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' id='" + ctlName + "' name='" + ctlName + "' dragSign='frmElement' style='Z-INDEX: 125; LEFT: 97px; POSITION: absolute; TOP: 5px; HEIGHT:80px; WIDTH:80px' alt='图片'>");
panelForm.appendChild(ctlImg1);
}else if (valType == "100"){ //是打印窗体设计中的所有元素显示为Label
var ctlLabel1 = document.createElement("<label ctrltype='TextboxInPrint' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' dragSign='frmElement' align='left' id='" + ctlName + "' name='" + ctlName + "' value='[" + ctlDispName + "]' style='POSITION: absolute; HEIGHT: 20px; WIDTH: 90px;top:9px;left:97px '></label>");
ctlLabel1.innerText = "[" + ctlDispName + "]";
panelForm.appendChild(ctlLabel1);
}else if (valType == "11"){ //多选一选择项
var ctlText1 = document.createElement("<input ctrltype='radio' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' dragSign='frmElement' id='" + ctlName + "' name='" + ctlName + "' value='[" + ctlDispName + "]' readonly style='POSITION: absolute; HEIGHT: 45px; WIDTH: 400px;top:5px;left:97px'>");
panelForm.appendChild(ctlText1);
blnCreateLabel = 0; //不显示Label
}else if (valType == "13"){ //目录文件
var ctlFile1 = document.createElement("<INPUT ctrltype='fileForDirFile' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' type='file' id='" + ctlName + "' name='" + ctlName + "' dragSign='fileElement' disabled style='Z-INDEX: 103; POSITION: absolute; LEFT: 97px; TOP: 5px; WIDTH: 222px'>");
panelForm.appendChild(ctlFile1);
}else if (valType == "12"){ //是否选择项
var ctlText1 = document.createElement("<input ctrltype='checkgrp' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' dragSign='frmElement' id='" + ctlName + "' name='" + ctlName + "' type='checkbox' disabled value='[" + ctlDispName + "]' style='POSITION: absolute; HEIGHT: 20px; WIDTH: 200px;top:5px;left:97px'>");
panelForm.appendChild(ctlText1);
blnCreateLabel = 0; //不显示Label
}else{ //if (valType == "0"){ //是输入型
var ctlText1 = document.createElement("<input ctrltype='text' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' dragSign='frmElement' id='" + ctlName + "' name='" + ctlName + "' value='[" + ctlDispName + "]' readonly style='POSITION: absolute; HEIGHT: 20px; WIDTH: 90px;top:5px;left:97px'>");
panelForm.appendChild(ctlText1);
}
//创建Label元素
if (blnCreateLabel==1){
//var lblName = "lbl" + ctlName;
var lblName = "lbl_" + Math.round(Math.random() * 10000000000); // + "_" + ctlName;
var strAlign = "right";
if (self.document.forms(0).formtype.value == 1){
strAlign = "left";
}
var ctlLabel1 = document.createElement("<label ctrltype='label' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' dragSign='frmElement' align='right' id='" + lblName + "' name='" + lblName + "' style='POSITION: absolute; HEIGHT: 20px; WIDTH: 56px;top:9px;left:32px;TEXT-ALIGN: " + strAlign + "'></label>");
ctlLabel1.innerText = ctlDispName;
panelForm.appendChild(ctlLabel1);
}
}catch(ex){
}
}
//获取窗体内所有元素的布局信息
function GetDFormLayout(){
//获取窗体本身布局信息
var ctlInfo = ";;" + "1||" + "FORM_CONTAINER" + "||0||||" + panelForm.style.left + "||" + panelForm.style.top + "||" + panelForm.style.pixelWidth + "||" + panelForm.style.pixelHeight + "||||;;";
//获取窗体内所有元素的布局信息
for (var i = 0; i < panelForm.all.length; i++){
var ctlItem = panelForm.all.item(i);
var intHeight = ctlItem.style.pixelHeight;
if (ctlItem.style.display != "none" && ctlItem.name != null){ //不保存隐藏的元素
if (ctlItem.ctrltype == "label"){
//2: 表示是标签Label
ctlInfo = ctlInfo + "2||" + ctlItem.name + "||0||" + ctlItem.innerText + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + ctlItem.style.textAlign + "||||";
ctlInfo = ctlInfo + ctlItem.style.fontFamily + "||" + ctlItem.style.fontSize + "||" + ctlItem.style.color + "||" + ctlItem.style.fontWeight + "||" + ctlItem.style.fontStyle + "||" + ctlItem.style.textDecoration + "||;;";
}
else if (ctlItem.ctrltype == "TextboxInPrint"){
//14: 所有元素在打印窗体中都显示为Label
ctlInfo = ctlInfo + "14||" + ctlItem.name + "||0||" + ctlItem.innerText + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + ctlItem.style.textAlign + "||||";
ctlInfo = ctlInfo + ctlItem.style.fontFamily + "||" + ctlItem.style.fontSize + "||" + ctlItem.style.color + "||" + ctlItem.style.fontWeight + "||" + ctlItem.style.fontStyle + "||" + ctlItem.style.textDecoration + "||;;";
}
else if (ctlItem.ctrltype == "text"){
//3: 表示是输入型元素（如Text）
var ctlName = ctlItem.value
ctlInfo = ctlInfo + "3||" + ctlItem.name + "||" + ctlItem.ctrlreadonly + "||" + ctlName + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + ctlItem.style.textAlign + "||||";
ctlInfo = ctlInfo + ctlItem.style.fontFamily + "||" + ctlItem.style.fontSize + "||" + ctlItem.style.color + "||" + ctlItem.style.fontWeight + "||" + ctlItem.style.fontStyle + "||" + ctlItem.style.textDecoration + "||" + ctlItem.ctrlbitian + "||;;";
}else if (ctlItem.ctrltype == "image"){
//4: 表示是Image图形控件
ctlInfo = ctlInfo + "4||" + ctlItem.name + "||0||" + ctlItem.src + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
}else if (ctlItem.ctrltype == "pageimg"){
//13: 表示是页面上的图形文件
ctlInfo = ctlInfo + "13||" + ctlItem.name + "||0||" + ctlItem.src + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
//}else if (ctlItem.ctrltype == "imagefile"){
// //4: 表示是Image图形控件
// ctlInfo = ctlInfo + "4||" + ctlItem.name + "||" + ctlItem.ctrlreadonly + "||" + ctlItem.src + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
}else if (ctlItem.ctrltype == "imageForBinCol"){
//15: 二进制字段以图片方式显示
ctlInfo = ctlInfo + "15||" + ctlItem.name + "||0||" + ctlItem.src + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
}else if (ctlItem.ctrltype == "fileForDirFile"){
//18: 目录文件的文件控件
ctlInfo = ctlInfo + "18||" + ctlItem.name + "||0||" + ctlItem.src + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
}else if (ctlItem.ctrltype == "imageForDirFile"){
//17: 目录文件的图片显示
ctlInfo = ctlInfo + "17||" + ctlItem.name + "||0||" + ctlItem.src + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
}else if (ctlItem.ctrltype == "imageForUrlCol"){
//16: 二进制字段以图片方式显示
ctlInfo = ctlInfo + "16||" + ctlItem.name + "||0||" + ctlItem.src + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
}else if (ctlItem.ctrltype == "file"){
//5: 表示是File控件，文件上传控件
ctlInfo = ctlInfo + "5||" + ctlItem.name + "||" + ctlItem.ctrlreadonly + "||" + ctlItem.value + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||||" + "||||;;";
}else if (ctlItem.ctrltype == "ddlist"){
//6: 表示是DropDownList
var ctlName = ctlItem.value
ctlInfo = ctlInfo + "6||" + ctlItem.name + "||" + ctlItem.ctrlreadonly + "||" + ctlName + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + ctlItem.style.textAlign + "||||";
ctlInfo = ctlInfo + ctlItem.style.fontFamily + "||" + ctlItem.style.fontSize + "||" + ctlItem.style.color + "||" + ctlItem.style.fontWeight + "||" + ctlItem.style.fontStyle + "||" + ctlItem.style.textDecoration + "||" + ctlItem.ctrlbitian + "||;;";
}else if (ctlItem.ctrltype == "line"){
//7: 表示是Line控件
ctlInfo = ctlInfo + "7||" + ctlItem.name + "||0||" + "线条" + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
}else if (ctlItem.ctrltype == "ResTable"){
//8: 表示是资源表单控件
ctlInfo = ctlInfo + "8||" + ctlItem.name + "||0||" + ctlItem.tabresid + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
}else if (ctlItem.ctrltype == "cmsbtn"){
//9: 表示是普通按钮
ctlInfo = ctlInfo + "9||" + ctlItem.name + "||0||" + ctlItem.value + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||" + ctlItem.ctrlscript + "||;;";
}else if (ctlItem.ctrltype == "linkbtn"){
//10: 表示是普通链接
if (ctlItem.innerText != ""){
ctlInfo = ctlInfo + "10||" + ctlItem.name + "||0||" + ctlItem.innerText + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||" + ctlItem.ctrlscript + "||;;";
}else{
ctlInfo = ctlInfo + "10||" + ctlItem.name + "||0||" + ctlItem.value + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||" + ctlItem.ctrlscript + "||;;";
}
}else if (ctlItem.ctrltype == "radio"){
//11: 表示是多选一选择项
var ctlName = ctlItem.value
ctlInfo = ctlInfo + "11||" + ctlItem.name + "||" + ctlItem.ctrlreadonly + "||" + ctlName + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + ctlItem.style.textAlign + "||||";
ctlInfo = ctlInfo + ctlItem.style.fontFamily + "||" + ctlItem.style.fontSize + "||" + ctlItem.style.color + "||" + ctlItem.style.fontWeight + "||" + ctlItem.style.fontStyle + "||" + ctlItem.style.textDecoration + "||" + ctlItem.ctrlbitian + "||;;";
}else if (ctlItem.ctrltype == "checkgrp"){
//12: 表示是是否选择项
var ctlName = ctlItem.value
ctlInfo = ctlInfo + "12||" + ctlItem.name + "||" + ctlItem.ctrlreadonly + "||" + ctlName + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + ctlItem.style.textAlign + "||||";
ctlInfo = ctlInfo + ctlItem.style.fontFamily + "||" + ctlItem.style.fontSize + "||" + ctlItem.style.color + "||" + ctlItem.style.fontWeight + "||" + ctlItem.style.fontStyle + "||" + ctlItem.style.textDecoration + "||" + ctlItem.ctrlbitian + "||;;";
}else{
//未知元素
}
}
}
return ctlInfo;
}