首页 > 代码库 > 前台动态创建控件设置ID，事件等实例
前台动态创建控件设置ID，事件等实例
代码中包括：动态生成各个控件（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 + " ";
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 + " ";
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，事件等实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。