前台动态创建控件设置ID，事件等实例

标签：js

代码中包括：动态生成各个控件（textbox，div等），动态设置样式，属性，id，前台map创建，dom元素操作等。

//自定义前台Map
function Map() {
	this.elements = new Array();
	// 获取MAP元素个数
	this.size = function() {
		return this.elements.length;
	};
	// 判断MAP是否为空
	this.isEmpty = function() {
		return (this.elements.length < 1);
	};
	// 删除MAP所有元素
	this.clear = function() {
		this.elements = new Array();
	};
	// 向MAP中增加元素（key, value)
	this.put = function(_key, _value) {
		this.elements.push({
			key : _key,
			value : _value
		});
	};
	// 删除指定KEY的元素，成功返回True，失败返回False
	this.remove = function(_key) {
		var bln = false;
		try {
			for (i = 0; i < this.elements.length; i++) {
				if (this.elements[i].key == _key) {
					this.elements.splice(i, 1);
					return true;
				}
			}
		} catch (e) {
			bln = false;
		}
		return bln;
	};
	// 获取指定KEY的元素值VALUE，失败返回NULL
	this.get = function(_key) {
		try {
			for (i = 0; i < this.elements.length; i++) {
				if (this.elements[i].key == _key) {
					return this.elements[i].value;
				}
			}
		} catch (e) {
			return null;
		}
	};
	// 获取指定索引的元素（使用element.key，element.value获取KEY和VALUE），失败返回NULL
	this.element = function(_index) {
		if (_index < 0 || _index >= this.elements.length) {
			return null;
		}
		return this.elements[_index];
	};
	// 判断MAP中是否含有指定KEY的元素
	this.containsKey = function(_key) {
		var bln = false;
		try {
			for (i = 0; i < this.elements.length; i++) {
				if (this.elements[i].key == _key) {
					bln = true;
				}
			}
		} catch (e) {
			bln = false;
		}
		return bln;
	};
	// 判断MAP中是否含有指定VALUE的元素
	this.containsValue = function(_value) {
		var bln = false;
		try {
			for (i = 0; i < this.elements.length; i++) {
				if (this.elements[i].value == _value) {
					bln = true;
				}
			}
		} catch (e) {
			bln = false;
		}
		return bln;
	};
	// 获取MAP中所有VALUE的数组（ARRAY）
	this.values = function() {
		var arr = new Array();
		for (i = 0; i < this.elements.length; i++) {
			arr.push(this.elements[i].value);
		}
		return arr;
	};
	// 获取MAP中所有KEY的数组（ARRAY）
	this.keys = function() {
		var arr = new Array();
		for (i = 0; i < this.elements.length; i++) {
			arr.push(this.elements[i].key);
		}
		return arr;
	};
}

// 前台获取uuid
var generateUUID = function() {
	var d = new Date().getTime();
	var uuid = ‘xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx‘.replace(/[xy]/g, function(c) {
		var r = (d + Math.random() * 16) % 16 | 0;
		d = Math.floor(d / 16);
		return (c == ‘x‘ ? r : (r & 0x3 | 0x8)).toString(16);
	});
	return uuid;
};

function comboLoadFilter(data) { // 下拉框数据过滤
	if (data && data.status == 0) {
		return data.data;
	} else {
		// $.messager.alert(‘错误信息‘, data.msg, ‘error‘);
	}
	return [];
}

function addGroupDefaultValue(data) {

	if (data && data.status == 0) {
		// var defaultValue = {groupId:"-1",groupName:"清空"};
		// data.data.push(defaultValue);
		return data.data;
	} else {
		// $.messager.alert(‘错误信息‘, data.msg, ‘error‘);
	}
	return [];
}

// 全局常量
var subFlowNodeSelectedId; // 配置子流程-选择的子流程节点（终极节点）
var addMap = new Map(); // 配置子流程-存储添加的节点信息（key-添加的空节点id value-被添加的节点id集合）
var isValidatePCR = false;

/* 页面初始化 */
$(function() {
	getUser();
	initProvince();
	initEtypeComplicated();
	initProc();
	initElement();
	initMachinekind();
	$("#easy").show();
	$("#diff").hide();
});
function change(record) {
	if (record.id == 0) {
		$("#easy").show();
		$("#diff").hide();
	} else {
		$("#diff").show();
		$("#easy").hide();
	}
}
function getUser() {
	if ("6" == parent.userInfo.identityType) {
		var code = parent.userInfo.code;
		$.ajax({
			type : ‘POST‘,
			url : sCtx + ‘departmentsibinfo/info‘,
			data : {
				code : code
			},
			async : false,
			success : function(data) {
				if ("市级" == data.data.dlevel || "省级" == data.data.dlevel) {
					isValidatePCR = true;
				} else {
					$(‘#address‘).hide();
				}
			}
		});
	} else {
		$(‘#address‘).hide();
	}
}

// 初始化省市区级联下拉框
function initProvince() {
	$.ajax({
		type : ‘POST‘,
		url : sCtx + ‘iDictionary/getAllPRO‘,
		async : false,
		success : function(data) {
			$("#province").combobox({
				data : data.data,
				valueField : ‘dictId‘,
				textField : ‘dictName‘,
				onSelect : function(record) {
					clearCity();
					clearArea();
					loadCity(record.dictId);
				}
			});
		}
	});
}

// 初始化条件-复杂中的控件
function initEtypeComplicated() {
	$.ajax({
		type : ‘POST‘,
		url : sCtx + ‘iDictionary/dicList‘,
		async : false,
		data : {
			typeCode : ‘MACHINEKIND‘
		},
		success : function(data) {
			$("#etype").combobox({
				data : data.data,
				valueField : ‘dictId‘,
				textField : ‘dictName‘,
				onSelect : function(record) {
					getParameter();
					clearEcategory();
					clearEvariety();
					loadEcategory(record.dictId);
					// clearParameter2Div();
				}
			});
		}
	});
}

// 初始化子流程模板中控件
function initProc() {
	$.ajax({
		type : ‘POST‘,
		url : sCtx + ‘workflowexsi/proc‘,
		async : false,
		success : function(data) {
			$("#cprocdefid").combobox({
				data : data.data,
				valueField : ‘key‘,
				textField : ‘name‘,
				onSelect : select_cprocdefid_onSelect,
				onLoadSuccess : function() {
					$("#cprocdefid").combobox(‘select‘, data.data[0].key);
				}
			});
		}
	});
}

// 子流程模板下拉菜单选择事件
function select_cprocdefid_onSelect(d) {
	var data = d.elements;
	var cprocdefidtemplate = document.getElementById("cprocdefidtemplate");
	cprocdefidtemplate.innerHTML = "";
	for ( var i in data) {

		if (data[i].flag == "0") {
			var div = getUltimateNodeDiv(data[i]);
			cprocdefidtemplate.appendChild(div);
		} else if (data[i].flag == "1") {
			var div = getEmptyNodeDiv(data[i]);
			cprocdefidtemplate.appendChild(div);
		}
	}
	$.parser.parse("#cprocdefidtemplate");

	addMap.clear();
}

// 生成空节点
var getEmptyNodeDiv = function(data) {

	var div = document.createElement("div");
	div.id = data.id + "_div";
	var addjiedian = document.createElement("a");
	addjiedian.innerHTML = "添加节点";
	addjiedian.setAttribute("class", "easyui-linkbutton");
	addjiedian.href = "#";
	addjiedian.onclick = function() {
		addSubNode(data.id)
	}
	div.appendChild(addjiedian);
	div.setAttribute("class", "add_div");
	return div;
}

// 生成终极节点
var getUltimateNodeDiv = function(data) {

	// 节点的最外层div
	var table = document.createElement("table");
	// div.style="border:1px solid #000;width:500px;height:90px;margin-top:20px";
	table.setAttribute("class", "flow-table-smallBlue");
	var divId = data.id + "_div"
	table.id = divId;

	// 节点第一行 name
	var tr_top = document.createElement("tr");
	var td_top_left = document.createElement("td");
	var td_top_right = document.createElement("td");
	// div_top.style="width:100%;height:30px;";
	var label_name = document.createElement("label");
	label_name.innerHTML = "名称：";
	td_top_right.innerHTML = data.name;
	td_top_left.appendChild(label_name);
	tr_top.appendChild(td_top_left);
	tr_top.appendChild(td_top_right);
	table.appendChild(tr_top);
	td_top_left.setAttribute("class", "tag");
	td_top_right.setAttribute("class", "content");

	// 节点第二行 人
	var tr_middle = document.createElement("tr");
	var td_middle_left = document.createElement("td");
	var td_middle_right = document.createElement("td");
	// div_middle.style="width:100%;height:30px;";
	var label_person_left = document.createElement("label");
	// var label_person_right = document.createElement("label");
	var right_input = document.createElement("input");
	// right_input.type = "input";
	right_input.id = data.id + "groupsCombobox";
	right_input.style.cssText = "width:200px";
	right_input.setAttribute("data-options", "panelHeight:‘auto‘,required:false,editable:false,valueField:‘groupId‘,textField:‘groupName‘,url:sCtx+‘workflowexsi/group‘,loadFilter: addGroupDefaultValue, onSelect:setGroupsValue");
	right_input.setAttribute("class", "easyui-combobox");
	label_person_left.id = data.id + "_label_person_left";
	// label_person_right.id = data.id + "_label_person_right";
	label_person_left.innerHTML = "受理组：";
	td_middle_left.appendChild(label_person_left);
	// td_middle_right.appendChild(label_person_right);
	td_middle_right.appendChild(right_input);
	tr_middle.appendChild(td_middle_left);
	tr_middle.appendChild(td_middle_right);
	table.appendChild(tr_middle);
	td_middle_left.setAttribute("class", "tag");
	td_middle_right.setAttribute("class", "content");

	// 节点第三行 组
	// var div_bottom = document.createElement("div");
	// div_bottom.style="width:100%;height:30px;";
	// var label_group = document.createElement("label");
	// label_group.id = data.id +"_label_group";
	// label_group.innerHTML = "组:";
	// div_bottom.appendChild(label_group);
	// div.appendChild(div_bottom);

	var tr_bottom = document.createElement("tr");
	var td_bottom_left = document.createElement("td");
	var td_bottom_right = document.createElement("td");
	// div_bottom.style="width:100%;height:30px;";
	var label_after = document.createElement("label");
	label_after.id = data.id + "_label_after";
	label_after.innerHTML = "自动审批：";
	td_bottom_left.appendChild(label_after);
	tr_bottom.appendChild(td_bottom_left);

	var input_after = document.createElement("input");
	input_after.id = data.id + "_input_after";
	input_after.style.cssText = "width:50px";
	input_after.setAttribute("class", "easyui-numberbox");
	input_after.setAttribute("data-options", "min:1");
	td_bottom_right.appendChild(input_after);

	var label_after_day = document.createElement("label");
	label_after_day.innerHTML = "天";
	td_bottom_right.appendChild(label_after_day);
	tr_bottom.appendChild(td_bottom_right);
	td_bottom_left.setAttribute("class", "tag");
	td_bottom_right.setAttribute("class", "content");
	$.parser.parse(tr_bottom);
	table.appendChild(tr_bottom);

	// 内部隐藏存储数据的隐藏控件
	var hiddenInput_p = document.createElement("input");
	hiddenInput_p.type = "hidden";
	hiddenInput_p.name = data.id;
	hiddenInput_p.className = "personsValue";
	var hiddenInput_g = document.createElement("input");
	hiddenInput_g.type = "hidden";
	hiddenInput_g.name = data.id;
	hiddenInput_g.className = "groupsValue";
	var hiddenInput_a = document.createElement("input");
	hiddenInput_a.type = "hidden";
	hiddenInput_a.name = data.id;
	hiddenInput_a.className = "assigneeValue";
	table.appendChild(hiddenInput_p);
	table.appendChild(hiddenInput_g);
	table.appendChild(hiddenInput_a);
	table.onclick = function() {
		setPersonsGroupsValue(data.id)
	};

	// 固定节点标识
	var hiddenInput_info = document.createElement("input");
	hiddenInput_info.type = "hidden";
	hiddenInput_info.name = "fixedConfig";
	hiddenInput_info.value = data.id;
	table.appendChild(hiddenInput_info);
	return table;
}

function createLabel(target, content, forCheck) {
	var label = document.createElement("label");
	label.style = "vertical-align:middle";
	label.innerHTML = content;
	if (null != forCheck) {
		label.setAttribute("for", forCheck);
	}
	target.appendChild(label);
}
function createLabelFlow(target, content, forCheck) {
	var label = document.createElement("label");
	label.style = "vertical-align:middle";
	label.innerHTML = content;
	// console.log(forCheck);
	// console.log(content);
	if (null != forCheck) {
		label.setAttribute("for", forCheck);
	}
	var div = document.createElement("div");
	div.style.width = "100px";
	div.style.display = "inline-block";
	div.appendChild(label);
	target.appendChild(div);
}
// 初始化流程节点
function initElement() {
	$.ajax({
		url : sCtx + ‘workflowexsi/element‘,
		type : "post",
		async : true,
		dataType : "json",
		success : function(result) {
			if (result.status == 0) {
				$.each(result.data, function(index, flowValue) {
					createElements(flowValue);
				});
			} else {
				// $.messager.alert(‘错误信息‘, result.msg, ‘error‘);
			}
		},
		error : function(request, msg, exception) {
		}
	});
}

function createElements(flowValue) {
	var ol = document.getElementById("ol");
	var flowTable = document.getElementById("flowTable");
	var li = document.createElement("li");
	var liRight = document.createElement("li");
	var tr = document.createElement("tr");
	var td1 = document.createElement("td");
	var td2 = document.createElement("td");
	var head = flowValue.name + "：";
	createLabel(li, head);
	td1.setAttribute("class", "flowleft");
	td1.appendChild(li);
	$.each(flowValue.elements, function(index, value) {
		var input = document.createElement("input");
		input.type = "checkbox";
		input.style = "vertical-align:middle";
		input.id = flowValue.key + ‘_‘ + value.id;
		input.name = "flowNode";
		input.value = flowValue.key + ‘_‘ + flowValue.name + ‘,‘ + value.id + ‘_‘ + value.name;
		if (value.flag == 0) {
			input.setAttribute("disabled", "disabled");
		}
		liRight.appendChild(input);
		// li.appendChild(input);
		var head = value.name + "&nbsp;";
		var labelFor = flowValue.key + ‘_‘ + value.id;
		createLabelFlow(liRight, head, labelFor);
	});
	td2.appendChild(liRight);
	flowTable.appendChild(tr);
	tr.appendChild(td1);
	td2.setAttribute("class", "flowright");
	tr.appendChild(td2);
	// ol.appendChild(li);
}

// 初始化简单配置
function initMachinekind() {
	$.ajax({
		url : sCtx + ‘iDictionary/dicList‘,
		type : "post",
		async : true,
		data : {
			typeCode : ‘MACHINEKIND‘
		},
		dataType : "json",
		success : function(result) {
			if (result.status == 0) {
				createParameter1(result);
			} else {
				// $.messager.alert(‘错误信息‘, result.msg, ‘error‘);
			}
		},
		error : function(request, msg, exception) {
		}
	});
}

function createParameter1(result) {
	var parameters = document.getElementById("parameters_1");
	$.each(result.data, function(index, value) {
		var div = document.createElement("div");
		var input = document.createElement("input");
		input.type = "checkbox";
		input.style = "vertical-align:middle";
		input.id = value.dictName;
		input.name = "param1";
		input.value = value.dictId;
		div.appendChild(input);
		var label = value.id + "&nbsp;";
		var labelName = value.dictName;
		var labelFor = value.dictName;
		createLabel(div, labelName, labelFor);
		div.setAttribute("class", "parameters1");
		parameters.appendChild(div);
	});
}

function setPersonsGroupsValue(id) {
	subFlowNodeSelectedId = id;
	// $(‘#personsCombobox‘).combobox(‘clear‘);
	// $(‘#groupsCombobox‘).combobox(‘clear‘);
}

function setPersonsValue() {
	if (subFlowNodeSelectedId) {
		$(‘input:hidden[name="‘ + subFlowNodeSelectedId + ‘"][class="groupsValue"]‘).removeAttr(‘value‘);
		$(‘input:hidden[name="‘ + subFlowNodeSelectedId + ‘"][class="assigneeValue"]‘).removeAttr(‘value‘);
		var hiddenValue = $(‘#personsCombobox‘).combobox(‘getValues‘);
		$(‘input:hidden[name="‘ + subFlowNodeSelectedId + ‘"][class="personsValue"]‘).val();
		$(‘input:hidden[name="‘ + subFlowNodeSelectedId + ‘"][class="personsValue"]‘).val(hiddenValue);
		if (document.getElementById(subFlowNodeSelectedId + "_label_person_left") && document.getElementById(subFlowNodeSelectedId + "_label_person_right")) {
			document.getElementById(subFlowNodeSelectedId + "_label_person_left").innerHTML = "受理人：";
			document.getElementById(subFlowNodeSelectedId + "_label_person_right").innerHTML = $(‘#personsCombobox‘).combobox(‘getText‘);
		}
	}
}

function setGroupsValue(record) {
	if (subFlowNodeSelectedId) {

		if ($(‘input:hidden[name="‘ + subFlowNodeSelectedId + ‘"][class="assigneeValue"]‘).val()) {
			if ("-1" == record.groupId) {
				return;
			} else {
				$(‘input:hidden[name="‘ + subFlowNodeSelectedId + ‘"][class="assigneeValue"]‘).removeAttr(‘value‘);
				var hiddenValue = $(‘#‘ + subFlowNodeSelectedId + ‘groupsCombobox‘).combobox(‘getValues‘);
				$(‘input:hidden[name="‘ + subFlowNodeSelectedId + ‘"][class="groupsValue"]‘).val();
				$(‘input:hidden[name="‘ + subFlowNodeSelectedId + ‘"][class="personsValue"]‘).val();
				$(‘input:hidden[name="‘ + subFlowNodeSelectedId + ‘"][class="groupsValue"]‘).val(hiddenValue);
				// if (document.getElementById(subFlowNodeSelectedId + "_label_person_left")) {
				// document.getElementById(subFlowNodeSelectedId + "_label_person_left").innerHTML = "受理组：";
				// document.getElementById(subFlowNodeSelectedId + "_label_person_right").innerHTML = $(‘#‘+subFlowNodeSelectedId+‘groupsCombobox‘).combobox(‘getText‘);
				// }
			}
		} else {
			// if("-1" == record.groupId){
			// $(‘input:hidden[name="‘+subFlowNodeSelectedId+‘"][class="groupsValue"]‘).removeAttr("value");
			// if(document.getElementById(subFlowNodeSelectedId+"_label_person")){
			// document.getElementById(subFlowNodeSelectedId+"_label_person").innerHTML = "受理组:";
			// }
			// }else{
			$(‘input:hidden[name="‘ + subFlowNodeSelectedId + ‘"][class="assigneeValue"]‘).removeAttr(‘value‘);
			$(‘input:hidden[name="‘ + subFlowNodeSelectedId + ‘"][class="personsValue"]‘).removeAttr(‘value‘);
			var hiddenValue = $(‘#‘ + subFlowNodeSelectedId + ‘groupsCombobox‘).combobox(‘getValues‘);
			$(‘input:hidden[name="‘ + subFlowNodeSelectedId + ‘"][class="groupsValue"]‘).val();
			$(‘input:hidden[name="‘ + subFlowNodeSelectedId + ‘"][class="groupsValue"]‘).val(hiddenValue);
			// if (document.getElementById(subFlowNodeSelectedId + "_label_person_left")) {
			// document.getElementById(subFlowNodeSelectedId + "_label_person_left").innerHTML = "受理组：";
			// document.getElementById(subFlowNodeSelectedId + "_label_person_right").innerHTML = $(‘#‘+subFlowNodeSelectedId+‘groupsCombobox‘).combobox(‘getText‘);
			// }
			// }
		}
	}
}

function addSubNode(id) {
	var addId = generateUUID();
	var table = document.createElement("table");
	table.setAttribute("class", "flow-table-smallBlue");
	// div.style="border:1px solid #000;width:500px;height:90px;margin-top:20px";
	var tableId = addId + "_div"
	table.id = tableId;
	var tr_top = document.createElement("tr");
	var td_top_left = document.createElement("td");
	var td_top_right = document.createElement("td");
	td_top_left.setAttribute("class", "tag");
	td_top_right.setAttribute("class", "content");
	// tr_top.style="width:100%;height:30px;";
	var label_name = document.createElement("label");
	label_name.innerHTML = "名称：";
	td_top_left.appendChild(label_name);
	tr_top.appendChild(td_top_left);
	var input_name = document.createElement("input");
	input_name.id = addId + "_name_id";
	input_name.style.cssText = "width:200px";
	input_name.setAttribute("class", "easyui-textbox");
	td_top_right.appendChild(input_name);
	tr_top.appendChild(td_top_right);
	$.parser.parse(tr_top);
	table.appendChild(tr_top);

	var tr_middle = document.createElement("tr");
	var td_middle_left = document.createElement("td");
	var td_middle_right = document.createElement("td");
	td_middle_left.setAttribute("class", "tag");
	td_middle_right.setAttribute("class", "content");
	// tr_middle.style="width:100%;height:30px;";
	var label_person_left = document.createElement("label");
	// var label_person_right = document.createElement("label");
	var right_input = document.createElement("input");
	// right_input.type = "input";
	right_input.id = addId + "groupsCombobox";
	right_input.style.cssText = "width:200px";
	right_input.setAttribute("data-options", "panelHeight:‘auto‘,required:false,editable:false,valueField:‘groupId‘,textField:‘groupName‘,url:sCtx+‘workflowexsi/group‘,loadFilter: addGroupDefaultValue, onSelect:setGroupsValue");
	right_input.setAttribute("class", "easyui-combobox");
	label_person_left.id = addId + "_label_person_left";
	// label_person_right.id = addId + "_label_person_right";
	label_person_left.innerHTML = "受理组：";
	td_middle_left.appendChild(label_person_left);
	td_middle_right.appendChild(right_input);
	tr_middle.appendChild(td_middle_left);
	tr_middle.appendChild(td_middle_right);
	table.appendChild(tr_middle);

	// var div_bottom = document.createElement("div");
	// div_bottom.style="width:100%;height:30px;";
	// var label_group = document.createElement("label");
	// label_group.id = addId +"_label_group";
	// label_group.innerHTML = "组:";
	// div_bottom.appendChild(label_group);
	// div.appendChild(div_bottom);

	var tr_bottom = document.createElement("tr");
	var td_bottom_left = document.createElement("td");
	var td_bottom_right = document.createElement("td");
	td_bottom_left.setAttribute("class", "tag");
	td_bottom_right.setAttribute("class", "content");
	// div_bottom.style="width:100%;height:30px;";
	var label_after = document.createElement("label");
	label_after.id = addId + "_label_after";
	label_after.innerHTML = "自动审批：";
	td_bottom_left.appendChild(label_after);
	tr_bottom.appendChild(td_bottom_left);
	var input_after = document.createElement("input");
	input_after.id = addId + "_input_after";
	input_after.style.cssText = "width:50px";
	input_after.setAttribute("class", "easyui-numberbox");
	input_after.setAttribute("data-options", "min:1");
	td_bottom_right.appendChild(input_after);
	tr_bottom.appendChild(td_bottom_right);
	var label_after_day = document.createElement("label");
	label_after_day.innerHTML = "天";
	td_bottom_right.appendChild(label_after_day);

	$.parser.parse(tr_bottom);
	table.appendChild(tr_bottom);

	var hiddenInput_p = document.createElement("input");
	hiddenInput_p.type = "hidden";
	hiddenInput_p.name = addId;
	hiddenInput_p.className = ‘personsValue‘;
	var hiddenInput_g = document.createElement("input");
	hiddenInput_g.type = "hidden";
	hiddenInput_g.name = addId;
	hiddenInput_g.className = ‘groupsValue‘;
	var hiddenInput_a = document.createElement("input");
	hiddenInput_a.type = "hidden";
	hiddenInput_a.name = addId;
	hiddenInput_a.className = ‘assigneeValue‘;
	table.appendChild(hiddenInput_p);
	table.appendChild(hiddenInput_g);
	table.appendChild(hiddenInput_a);

	var hiddenInput_parent = document.createElement("input");
	hiddenInput_parent.type = "hidden";
	hiddenInput_parent.id = addId + "_parentId";
	hiddenInput_parent.value = id;
	table.appendChild(hiddenInput_parent);

	table.setAttribute("onclick", "setPersonsGroupsValue(‘" + addId + "‘)");

	var addjiedian = document.createElement("a");
	var addjiedian_div = document.createElement("div");
	addjiedian_div.setAttribute("class", "del_div");
	addjiedian.innerHTML = "删除节点";
	addjiedian.href = "#";
	addjiedian.setAttribute("class", "easyui-linkbutton");
	addjiedian.setAttribute("data-options", "plain:true");
	addjiedian.setAttribute("onclick", "delSubNode(‘" + addId + "‘,‘" + id + "‘)");
	addjiedian_div.appendChild(addjiedian);
	td_top_right.appendChild(addjiedian_div);

	var hiddenInput_info = document.createElement("input");
	hiddenInput_info.type = "hidden";
	hiddenInput_info.name = "listConfig";
	hiddenInput_info.value = id + "_" + addId;
	table.appendChild(hiddenInput_info);

	if (addMap.containsKey(id)) {
		var list = addMap.get(id);
		id = list[list.length - 1];
		list.push(addId);
	} else {
		var list = new Array();
		list.push(addId);
		addMap.put(id, list);
	}

	var clickDiv = document.getElementById(id + "_div");
	clickDiv.parentNode.insertBefore(table, clickDiv.nextSibling);
	$.parser.parse(‘#‘ + addId + "_div");
}

function delSubNode(id, parentId) {
	var divId = id + "_div";
	document.getElementById(divId).remove();
	var list = addMap.get(parentId);

	if (list.length == 1) {
		addMap.remove(parentId);
	} else {
		var delIndex = 0;
		for ( var i in list) {
			if (list[i] == id) {
				list.splice(i, 1);
				return;
			}
		}
	}
}

function loadEcategory(pid) {
	var params = {
		"typeCode" : "MACHINETYPE",
		"pid" : pid
	};
	if (pid != "") {
		$.ajax({
			type : ‘POST‘,
			url : sCtx + ‘iDictionary/dicList‘,
			data : params,
			async : false,
			success : function(data) {
				searchBoxCityInfo = data.data;
				$("#ecategory").combobox({
					data : searchBoxCityInfo,
					valueField : ‘dictId‘,
					textField : ‘dictName‘,
					onSelect : function(record) {
						getParameter();
						clearEvariety();
						loadEvariety(record.dictId);
						// clearParameter2Div();
					}
				});
			}
		});
	} else if (pid == "") {
		$("#ecategory").combobox("clear");
		$("#ecategory").combobox("loadData", "");
		$("#evariety").combobox("clear");
		$("#evariety").combobox("loadData", "");
		// clearParameter2Div();
	}

}

function loadEvariety(pid) {
	var params = {
		"typeCode" : "MACHINEVARIETY",
		"pid" : pid
	};
	if (pid != "") {
		$.ajax({
			type : ‘POST‘,
			url : sCtx + ‘iDictionary/dicList‘,
			data : params,
			async : false,
			success : function(data) {
				searchBoxAreaInfo = data.data;
				$("#evariety").combobox({
					data : searchBoxAreaInfo,
					valueField : ‘dictId‘,
					textField : ‘dictName‘,
					onSelect : function(record) {
						getParameter();
						// clearParameter2Div();
					}
				});
			}
		});
	} else if (pid == "") {
		$("#evariety").combobox("clear");
		$("#evariety").combobox("loadData", "");
		// clearParameter2Div();
	}
};

function clearParameter2Div() {
	document.getElementById("parameters_2").innerHTML = "";
}

function clearEcategory() {
	$("#ecategory").combobox("clear");
	$("#ecategory").combobox("loadData", "");
}

function clearEvariety() {
	$("#evariety").combobox("clear");
	$("#evariety").combobox("loadData", "");
}

function loadCity(pid) {
	var params = {
		"pid" : pid
	};
	if (pid != "") {
		$.ajax({
			type : ‘POST‘,
			url : sCtx + ‘iDictionary/getAllCITY‘,
			data : params,
			async : false,
			success : function(data) {
				searchBoxCityInfo = data.data;
				$("#city").combobox({
					data : searchBoxCityInfo,
					valueField : ‘dictId‘,
					textField : ‘dictName‘,
					onSelect : function(record) {
						clearArea();
						loadArea(record.dictId);
					}
				});
			}
		});
	} else if (pid == "") {
		$("#city").combobox("clear");
		$("#city").combobox("loadData", "");
		$("#area").combobox("clear");
		$("#area").combobox("loadData", "");
	}

}

function loadArea(pid) {
	var params = {
		"pid" : pid
	};
	if (pid != "") {
		$.ajax({
			type : ‘POST‘,
			url : sCtx + ‘iDictionary/getAllREG‘,
			data : params,
			async : false,
			success : function(data) {
				searchBoxAreaInfo = data.data;
				$("#area").combobox({
					data : searchBoxAreaInfo,
					valueField : ‘dictId‘,
					textField : ‘dictName‘
				});
			}
		});
	} else if (pid == "") {
		$("#area").combobox("clear");
		$("#area").combobox("loadData", "");
	}
};

function clearCity() {
	$("#city").combobox("clear");
	$("#city").combobox("loadData", "");
}

function clearArea() {
	$("#area").combobox("clear");
	$("#area").combobox("loadData", "");
}

var getProcdefs = function() {
	var map = new Map();
	$(‘input:checkbox[name="flowNode"]:checked‘).each(function(i, value) {
		var main = value.value.split(‘,‘)[0];
		var element = value.value.split(‘,‘)[1];
		if (map.containsKey(main)) {
			var ele = new Object();
			ele.id = element.split(‘_‘)[0];
			ele.name = element.split(‘_‘)[1];
			map.get(main).push(ele);
		} else {
			var ele = new Object();
			ele.id = element.split(‘_‘)[0];
			ele.name = element.split(‘_‘)[1];
			var list = new Array();
			list.push(ele);
			map.put(main, list);
		}
	});

	var result = new Array();
	for (var i = 0; i < map.size(); i++) {
		var mainBean = new Object();
		mainBean.key = map.element(i).key.split("_")[0];
		mainBean.name = map.element(i).key.split("_")[1];
		mainBean.elements = map.element(i).value;
		result.push(mainBean);
	}
	return JSON.stringify(result);
}

function addpost() {

	if (!$(‘#name‘).textbox(‘isValid‘)) {
		$.messager.alert(‘系统提示‘, "未命名配置名", ‘info‘);
		return;
	}

	if (0 == $(‘input:checkbox[name="flowNode"]:checked‘).length) {
		$.messager.alert(‘系统提示‘, "未选择节点", ‘info‘);
		return;
	}

	if (!validateParameterValue()) {
		$.messager.alert(‘系统提示‘, "未选择条件", ‘info‘);
		return;
	}

	if (!validatefixedNode()) {
		$.messager.alert(‘系统提示‘, "固定节点配置有误", ‘info‘);
		return;
	}

	if (!validatelistNode()) {
		$.messager.alert(‘系统提示‘, "新增节点配置有误", ‘info‘);
		return;
	}
	var validate = $("#cprocdefid").combobox(‘getValue‘);
	console.log(validate);
	if (validate=="") {
		$.messager.alert(‘系统提示‘, "未选择子流程模板", ‘info‘);
		return;
	}
	$.ajax({
		type : "post",
		url : sCtx + "workflowexsi/add",
		data : JSON.stringify(GetJsonData()),
		contentType : "application/json; charset=utf-8",
		dataType : "json",
		success : function(data) {
			if (data.status == 0) {
				clearing();
				$.messager.alert(‘系统提示‘, data.msg, ‘info‘);
			} else {
				$.messager.alert(‘错误信息‘, data.msg, ‘error‘);

			}
		}
	});

	function GetJsonData() {
		var json = {
			"result" : $(‘#cprocdefid‘).combobox(‘getValue‘),
			"procdefs" : getProcdefs(),
			"name" : $.trim($(‘#name‘).textbox(‘getValue‘)),
			"config" : getConfig(),
			"strategy" : getParamConfig(),
			"etype" : $(‘#etype‘).combobox(‘getValue‘),
			"ecategory" : $(‘#ecategory‘).combobox(‘getValue‘),
			"evariety" : $(‘#evariety‘).combobox(‘getValue‘),
			"fixedconfig" : getFixedconfig(),
			"listconfig" : getListconfig()
		};
		return json;
	}
}

// 校验固定子流程模板中人员或组的设置
var validatefixedNode = function() {
	var flag = true;
	$(‘input:hidden[name="fixedConfig"]‘).each(function(i, data) {
		var name = data.value;
		var person = $(‘input:hidden[name=‘ + name + ‘][class="personsValue"]‘).attr(‘value‘);
		var group = $(‘input:hidden[name=‘ + name + ‘][class="groupsValue"]‘).attr(‘value‘);
		var assignee = $(‘input:hidden[name=‘ + name + ‘][class="assigneeValue"]‘).attr(‘value‘);
		if (assignee && "" != assignee) {
			flag = true;
		} else if (person && "" != person) {
			flag = true;
		} else {
			if (group && "" != group) {
				flag = true;
			} else {
				flag = false;
				return flag;
			}
		}
	});
	return flag;
}

// 校验新增子流程模板中人员或组的设置
var validatelistNode = function() {
	var flag = true;
	$(‘input:hidden[name="listConfig"]‘).each(function(i, data) {
		var name = data.value.split("_")[1];
		var person = $(‘input:hidden[name=‘ + name + ‘][class="personsValue"]‘).attr(‘value‘);
		var group = $(‘input:hidden[name=‘ + name + ‘][class="groupsValue"]‘).attr(‘value‘);
		var assignee = $(‘input:hidden[name=‘ + name + ‘][class="assigneeValue"]‘).attr(‘value‘);
		var subNodeName = $(‘#‘ + name + "_name_id").val();
		if ($.trim(subNodeName) == "") {
			flag = false;
		} else if (assignee && "" != assignee) {
			flag = true;
		} else if (person && "" != person) {
			flag = true;
		} else {
			if (group && "" != group) {
				flag = true;
			} else {
				flag = false;
				return flag;
			}
		}
	});
	return flag;
}

// 获取固定节点
var getFixedconfig = function() {

	var flag = false;
	var result = {};
	$(‘input:hidden[name="fixedConfig"]‘).each(function(i, data) {
		var name = data.value;
		var obj = new Object();
		// obj.users = $(‘input:hidden[name=‘+name+‘][class="personsValue"]‘).val();
		obj.groups = $(‘input:hidden[name=‘ + name + ‘][class="groupsValue"]‘).val();
		// obj.assignee = $(‘input:hidden[name=‘+name+‘][class="assigneeValue"]‘).val();
		obj.after = $(‘#‘ + name + ‘_input_after‘).val();
		var key = name;
		result[key] = obj;
		flag = true;
	});

	if (flag) {
		return JSON.stringify(result);
	}
	return null;
}

// 获取新增节点
var getListconfig = function() {

	function listAddObj(name, list) {
		var obj = new Object();
		var subNodeName = name + "_name_id";
		obj.name = $(‘#‘ + subNodeName).textbox(‘getValue‘);
		// obj.users = $(‘input:hidden[name=‘+name+‘][class="personsValue"]‘).val();
		obj.groups = $(‘input:hidden[name=‘ + name + ‘][class="groupsValue"]‘).val();
		// obj.assignee = $(‘input:hidden[name=‘+name+‘][class="assigneeValue"]‘).val();
		obj.after = $(‘#‘ + name + ‘_input_after‘).val();
		list.push(obj);
	}

	var map = new Map();
	$(‘input:hidden[name="listConfig"]‘).each(function(i, data) {
		var pid = data.value.split("_")[0];
		var name = data.value.split("_")[1];

		if (map.containsKey(pid)) {
			var list = map.get(pid);
			listAddObj(name, list);

		} else {
			var list = new Array();
			listAddObj(name, list);
			map.put(pid, list);
		}
	});

	var result = {};
	var keys = map.keys();
	for ( var i in keys) {
		var key = keys[i];
		var tt = map.get(key);
		result[key] = tt;
	}

	if (!map.isEmpty()) {
		return JSON.stringify(result);
	}
	return null;
}

// 获取配置类型
var getParamConfig = function() {
	var index = $(‘#paramConfig‘).combobox(‘getValue‘);
	// var index = $(‘#paramConfig‘).tabs(‘getTabIndex‘,tab);
	return index;
}

// 动态生成复杂条件
function getParameter() {

	var etype = $(‘#etype‘).combobox(‘getValue‘);
	var ecategory = $(‘#ecategory‘).combobox(‘getValue‘);
	var evariety = $(‘#evariety‘).combobox(‘getValue‘);

	var getNumberInput = function(key, index) {
		var html = "";
		var id = "";
		if (index == 0) {
			id = key + "_start";
		} else if (index == 1) {
			id = key + "_end";
		}
		html += ‘<input id="‘ + id + ‘" name="param2" class="easyui-numberbox inputShort" precision="2" style="width:65px;">‘;
		var input = $(html)[0];
		// var input = document.createElement("input");
		// input.style.cssText = "width:65px";
		// input.className = "easyui-numberbox inputShort";
		// input.name = "param2";
		// if (index == 0) {
		// input.id = key + "_start";
		// } else if (index == 1) {
		// input.id = key + "_end";
		// }
		return input;
	}

	var getParametersDiv = function(key, d) {
		var div = document.createElement("div");
		// div.style.cssText="width:202px";
		arr = d[key].split(",");
		// var label = document.createElement("label");
		// label.id = key;
		// var value = d[key];
		// label.innerHTML = value+"： ";
		// label.className = "parameterHead";
		// div.appendChild(label);
		var numberInput1 = getNumberInput(key, 0);
		div.appendChild(numberInput1);
		var label_line = document.createElement("label");
		label_line.innerHTML = "-";
		// div.appendChild(label_line);
		var divline = document.createElement("div");
		divline.appendChild(label_line);
		divline.setAttribute("class", "parametersLine");
		div.appendChild(divline);
		var numberInput2 = getNumberInput(key, 1);
		div.appendChild(numberInput2);
		var div_unit = document.createElement("div");
		div_unit.setAttribute("class", "div_unit");
		var label_unit = document.createElement("label");
		label_unit.innerHTML = arr[1];
		div_unit.appendChild(label_unit);
		div.appendChild(div_unit);
		return div;
	}

	function paremetersAddValidate(key) {

		$(‘#‘ + key + "_start").numberbox({
			onChange : function(newValue, oldValue) {
				var id = $(this).context.id.split("_")[0];
				var end = $(‘#‘ + id + "_end").numberbox(‘getValue‘);
				if (end != "") {
					if (parseFloat(newValue) > parseFloat(end)) {
						$(‘#‘ + id + "_end").numberbox(‘setValue‘, newValue);
					}
				}
			}
		});

		$(‘#‘ + key + ‘_end‘).numberbox({
			onChange : function(newValue, oldValue) {
				var id = $(this).context.id.split("_")[0];
				var start = $(‘#‘ + id + "_start").numberbox(‘getValue‘);
				if (start != "") {
					if (parseFloat(newValue) < parseFloat(start)) {
						$(‘#‘ + id + "_start").numberbox(‘setValue‘, newValue);
					}
				}
			}
		});
		// $(‘#‘ + key + ‘_start,#‘ + key + ‘_end‘).setAttribute("precision", "2");
		// // $(‘#‘ + key + ‘_start,#‘ + key + ‘_end‘).numberbox({
		// // precision : 2
		// // });
	}

	$.ajax({
		type : "post",
		url : sCtx + "workflowexsi/parameter",
		data : {
			etype : etype,
			ecategory : ecategory,
			evariety : evariety
		},
		dataType : "json",
		success : function(data) {
			if (data.status == 0) {
				var d = data.data;
				var parameters = document.getElementById("parameters_2");
				parameters.innerHTML = "";
				var parametersTable = document.createElement("table");
				parameters.appendChild(parametersTable);
				parametersTable.setAttribute("class", "parameters-table-smallBlue");
				var i = 0;
				if (d) {
					var arrkey = Object.keys(d);
				}
				for ( var key in d) {
					arr = d[key].split(",");
					var label = document.createElement("label");
					var value = arr[0];
					label.id = key;
					label.innerHTML = value + "： ";
					label.className = "parameterHead";
					i++;
					var div = getParametersDiv(key, d);
					if (i % 2 == 1) {
						var tr = document.createElement("tr");
						tr.id = "table_tr" + i
						var td1 = document.createElement("td");
						var td2 = document.createElement("td");
						td1.setAttribute("class", "tag");
						td2.setAttribute("class", "content");
						parametersTable.appendChild(tr);
						tr.appendChild(td1);
						td1.appendChild(label);
						tr.appendChild(td2);
						td2.appendChild(div);
						if (d && i == arrkey.length) {
							var td3 = document.createElement("td");
							var td4 = document.createElement("td");
							td3.setAttribute("class", "tag");
							td4.setAttribute("class", "content");
							tr.appendChild(td3);
							tr.appendChild(td4);
						}
					} else if (i % 2 == 0) {
						var tr = document.getElementById("table_tr" + (i - 1));
						var td1 = document.createElement("td");
						var td2 = document.createElement("td");
						td1.setAttribute("class", "tag");
						td2.setAttribute("class", "content");
						tr.appendChild(td1);
						tr.appendChild(td2);
						td1.appendChild(label);
						td2.appendChild(div);
					}
					paremetersAddValidate(key);
				}
				$.parser.parse(parameters);
			} else {
				// $.messager.alert(‘错误信息‘, data.msg, ‘error‘);

			}
		}
	});
}

// 获取配置条件
var getParameters2Value = function() {

	var arr = new Array();

	var s = $(‘label[class="parameterHead"]‘);
	for (var i = 0; i < s.length; i++) {
		var ss = s[i].id;
		if ("" != $.trim($(‘#‘ + ss + "_start").textbox(‘getValue‘)) || "" != $.trim($(‘#‘ + ss + "_end").textbox(‘getValue‘))) {
			var paramValue = new Object();
			paramValue.id = ss;
			paramValue.start = $.trim($(‘#‘ + ss + "_start").textbox(‘getValue‘));
			paramValue.end = $.trim($(‘#‘ + ss + "_end").textbox(‘getValue‘));
			arr.push(paramValue);
		}
	}

	var result = new Object();
	var nullFlag = false;
	if ($(‘#province‘).combobox(‘getValue‘) != "") {
		var pcr = new Object();
		pcr.province = $(‘#province‘).combobox(‘getValue‘);
		pcr.city = $(‘#city‘).combobox(‘getValue‘);
		pcr.region = $(‘#area‘).combobox(‘getValue‘);
		result.area = pcr;
		nullFlag = true;
	}

	if (arr.length != 0) {
		result.parameters = arr;
		nullFlag = true;
	}

	if (nullFlag) {
		return JSON.stringify(result);
	}

	return null;
}

var getParameters1Value = function() {
	var ids = "";
	$(‘input:checkbox[name="param1"]:checked‘).each(function(i, checked) {
		ids += checked.value + ",";
	});

	// 去除结尾多余逗号
	if (ids && ids.length > 1) {
		ids = ids.substr(0, ids.length - 1);
	} else {
		return null;
	}
	return ids;
}

var getConfig = function() {
	var index = getParamConfig();
	var result;
	if (index == 0) {
		result = getParameters1Value();
	} else if (index == 1) {
		result = getParameters2Value();
	}
	return result;
}

function clearing() {
	$(‘#addForm‘).form(‘clear‘);
	$(‘#name‘).textbox(‘clear‘);
	$("input[type=checkbox]").removeAttr("checked");
	$(‘#etype‘).combobox(‘unselect‘, $(‘#etype‘).combobox(‘getValue‘));
	clearEcategory();
	clearEvariety();
	clearParameter2Div();
	$(‘#province‘).combobox(‘unselect‘, $(‘#province‘).combobox(‘getValue‘));
	clearCity();
	clearArea();
	$("#cprocdefid").combobox(‘select‘, $("#cprocdefid").combobox(‘getData‘)[0].key);
}

var validateParameterValue = function() {

	if (0 == getParamConfig()) {
		var i = $("input:checkbox[name=‘param1‘]:checked").length;
		if (i < 1)
			return false;
	} else if (1 == getParamConfig()) {

		var flag = false;
		$("input[name=‘param2‘]").each(function(index, data) {
			if (data.value != "") {
				flag = true;
			}
		});

		if (isValidatePCR) {
			var value = $("#province").combobox("getValue");
			if (value && value != "") {
				flag = true;
			}
		}
		return flag;
	}
	return true;
}

function setAssignee() {
	if (subFlowNodeSelectedId) {
		$(‘input:hidden[name="‘ + subFlowNodeSelectedId + ‘"][class="personsValue"]‘).removeAttr(‘value‘);
		$(‘input:hidden[name="‘ + subFlowNodeSelectedId + ‘"][class="groupsValue"]‘).removeAttr(‘value‘);
		$(‘input:hidden[name="‘ + subFlowNodeSelectedId + ‘"][class="assigneeValue"]‘).val(‘申请人‘);
		if (document.getElementById(subFlowNodeSelectedId + "_label_person_left") && document.getElementById(subFlowNodeSelectedId + "_label_person_right")) {
			document.getElementById(subFlowNodeSelectedId + "_label_person_left").innerHTML = "受理人：";
			document.getElementById(subFlowNodeSelectedId + "_label_person_right").innerHTML = "申请人";
		}
	}
}

// function show(){
// var l = validateParameter1Value();
// console.info(l);
// }

本文出自 “java程序猿的博客” 博客，请务必保留此出处http://chengxuyuan.blog.51cto.com/5789198/1879856

前台动态创建控件设置ID，事件等实例

标签：js

原文地址：http://chengxuyuan.blog.51cto.com/5789198/1879856