Here is my ajax request data loop splicing
function getconfigureData(){
$.ajax({
type: "GET",
url: ctx + "leaderApproval/automaticApproval",
dataType: 'json',
success: function(res) {
if(res.code==0){
var automaticApprovals = res.automaticApprovals;
var servicePeriod = res.servicePeriod;
var sysUsers = res.sysUsers;
var num = res.num;
for(var i = 0;i<automaticApprovals.length;i++){
var obj=`
<div class="configure_item">
<div class="configure">
<div class="configure_content">
<div class="configure_name">
<input type="checkbox" ${automaticApprovals[i].status== '0'?'':'checked="checked"'} name="configureCheck" data-id="${automaticApprovals[i].id}" class="configureCheck">
<span>${automaticApprovals[i].configurationName}</span>
</div>
<div class="configure_changeCon"><a class="edit_configure">Modify configuration</a><span class="del" data-id="${automaticApprovals[i].id}">delete</span></div>
</div>
<div class="configure_condition">
<label>Screening conditions:</label>
<div>Auditor:<span>${automaticApprovals[i].loginName=='0'?'Unlimited':automaticApprovals[i].loginName}</span></div>
<div>Term of service:<span>${automaticApprovals[i].servicePeriod=='0'?'Unlimited':automaticApprovals[i].servicePeriod}</span><span>${automaticApprovals[i].servicePeriod!=0 && automaticApprovals[i].servicePeriod!= '' ?"Working days":""}</span></div>
<div>Days left:<span>${automaticApprovals[i].minTime}</span><span>${automaticApprovals[i].maxTime?"to":""}</span><span>${automaticApprovals[i].maxTime}</span><span>${automaticApprovals[i].maxTime?"Working days":""}</span></div>
</div>
<div class="configure_time">
<label>Audit time:</label>
<div>Enter the leader audit list<span>${automaticApprovals[i].approvalTime}</span>Pass audit automatically in minutes</div>
</div>
</div>
<div class="configure configure_new" hidden="hidden">
<div class="configure_content">
<div class="configure_name">
<span>${automaticApprovals[i].configurationName}</span>
<input type="text" value="${automaticApprovals[i].configurationName}" hidden="hidden" class="name nameold" maxlength="30">
</div>
<div class="configure_changeName"><a>change one's name</a></div>
</div>
<div class="configure_condition_new">
<label>Screening conditions:</label>
<div>
<span class="condition_tit">Auditor:</span>
<select name="auditor" class="select_condition auditor">
<option value="">Please choose</option>
<option value="0" ${automaticApprovals[i].adminId== '0'?'selected="selected"':''}>Unlimited</option>
${sysUsers.map(sysUsers=>`
<option ${automaticApprovals[i].adminId== sysUsers.userId?'selected="selected"':''} required="required" value="${sysUsers.userId}">${sysUsers.loginName}</option>
`).join('')}
</select>
</div>
<div>
<span class="condition_tit">Term of service:</span>
<select name="servicePeriod" class="select_condition servicePeriod">
<option value="">Please choose</option>
<option value="0" ${automaticApprovals[i].servicePeriod== '0'?'selected="selected"':''}>Unlimited</option>
${servicePeriod.map(servicePeriod=>`
<option ${automaticApprovals[i].servicePeriod == servicePeriod.dictLabel?'selected="selected"':''} required="required" value="${servicePeriod.dictLabel}">${servicePeriod.dictLabel}</option>
`).join('')}
</select>
</div>
<div style="position: relative;">
<span class="condition_tit">Days left:</span>
<input type="number" class="startDay" value="${automaticApprovals[i].minTime?automaticApprovals[i].minTime:""}" />
<span style="width: 10px;">-</span>
<input type="number" class="endDay" value="${automaticApprovals[i].maxTime?automaticApprovals[i].maxTime:""}" />
<label class="error remainday-error" style="left: 490px;top: -2px;color: #ef392b;" hidden="hidden">
<i class="fa fa-times-circle"></i><span>Please enter the correct time period</span>
</label>
</div>
</div>
<div class="configure_time" style="position: relative;">
<label>Audit time:</label>
<div><input type="number" class="time changeTime" value="${automaticApprovals[i].approvalTime}">Automatically pass the leadership review in minutes</div>
<label class="error time-error" style="left: 300px;top: 8px;color: #ef392b;" hidden="hidden">
<i class="fa fa-times-circle"></i>
<span></span>
</label>
</div>
<div class="configure_btn"><button class="btn btn-success cancel">cancel</button><button class="btn btn-primary save" data-id="${automaticApprovals[i].id}">Preservation</button></div>
</div>
</div>
`
$("#configures").append(obj)
}
}
}
});
}
Whether the check box for the implementation of the three item operator is selected
<input type="checkbox" ${automaticApprovals[i].status== '0'?'':'checked="checked"'} name="configureCheck" data-id="${automaticApprovals[i].id}" class="configureCheck">
Drop down box to render data and select a value by default
<select name="auditor" class="select_condition auditor">
Please select < / option >
< option value = "0" ${automaticaapproval [i]. Adminid = ='0 '?'selected = "selected"': '} > unlimited < / option >
${sysUsers.map(sysUsers=>`
<option ${automaticApprovals[i].adminId== sysUsers.userId?'selected="selected"':''} required="required" value="${sysUsers.userId}">${sysUsers.loginName}</option>
`).join('')}
</select>
The above is es. Because ie11 is not compatible, consider js string splicing.
function getconfigureData(){
$.ajax({
type: "GET",
url: ctx + "leaderApproval/automaticApproval",
data:{data:new Date()},
dataType: 'json',
success: function(res) {
if(res.code==0){
var automaticApprovals = res.automaticApprovals;
var servicePeriod = res.servicePeriod;
var sysUsers = res.sysUsers;
var num = res.num;
for(var i = 0;i<automaticApprovals.length;i++){
var obj='<div class="configure_item">\n' +
'<div class="configure">\n' +
'<div class="configure_content">\n' +
'<div class="configure_name">\n' +
'<input type="checkbox" ' +(automaticApprovals[i].status=="0"?"":"checked='checked'" )+ 'name="configureCheck" data-id="'+automaticApprovals[i].id+'" class="configureCheck">\n' +
'<span>'+automaticApprovals[i].configurationName+'</span>\n' +
'</div>\n' +
'<div class="configure_changeCon"><a class="edit_configure">Modify configuration</a><span class="del" data-id="'+automaticApprovals[i].id+'">delete</span></div>\n' +
'</div>\n' +
'<div class="configure_condition">\n' +
'<label>Screening conditions:</label>\n' +
'<div>Auditor:<span>'+(automaticApprovals[i].loginName=="0"?"Unlimited":automaticApprovals[i].loginName)+'</span></div>\n' +
'<div>Term of service:<span>'+(automaticApprovals[i].servicePeriod=="0"?"Unlimited":automaticApprovals[i].servicePeriod)+'</span><span>'+(automaticApprovals[i].servicePeriod!="0"&& automaticApprovals[i].servicePeriod!=""?"Working days":"")+'</span></div>\n' +
'<div>Days left:<span>'+automaticApprovals[i].minTime+'</span><span>'+(automaticApprovals[i].minTime?"to":"")+'</span><span>'+automaticApprovals[i].maxTime+'</span><span>'+(automaticApprovals[i].minTime?"Working days":"")+'</span></div>\n' +
'</div>\n' +
'<div class="configure_time">\n' +
'<label>Audit time:</label>\n' +
'<div>Enter the leader audit list<span>'+automaticApprovals[i].approvalTime+'</span>Pass audit automatically in minutes</div>\n' +
'</div>\n' +
'</div>\n' +
'<div class="configure configure_new" hidden="hidden">\n' +
'<div class="configure_content">\n' +
'<div class="configure_name">\n' +
'<span class="configure_oldname_static">'+automaticApprovals[i].configurationName+'</span>\n' +
'<input type="text" value="'+automaticApprovals[i].configurationName+'" hidden="hidden" class="name nameold" maxlength="30">\n' +
'</div>\n' +
'<div class="configure_changeName"><a>change one's name</a></div>\n' +
'</div>\n' +
'<div class="configure_condition_new">\n' +
'<label>Screening conditions:</label>\n' +
'<div>\n' +
'<span class="condition_tit">Auditor:</span>\n' +
'<select name="auditor" class="select_condition auditor">\n' +
'<option value="">Please choose</option>\n' +
'<option value="0" ' +(automaticApprovals[i].adminId=="0"?"selected='selected'":"" )+ ' >Unlimited</option>'+getUserOptions(sysUsers,automaticApprovals[i].adminId)+'\n' +
'</select>\n' +
'</div>\n' +
'<div>\n' +
'<span class="condition_tit">Term of service:</span>\n' +
'<select name="servicePeriod" class="select_condition servicePeriod" >\n' +
'<option value="">Please choose</option>\n' +
'<option value="0" ' +(automaticApprovals[i].servicePeriod=="0"?"selected='selected'":"" )+ '>Unlimited</option>'+getOptions(servicePeriod,automaticApprovals[i].servicePeriod)+'\n' +
'</select>\n' +
'</div>\n' +
'<div style="position: relative;">\n' +
'<span class="condition_tit">Days left:</span>\n' +
'<input type="number" class="startDay" value="'+(automaticApprovals[i].minTime?automaticApprovals[i].minTime:"")+'" />\n' +
'<span style="width: 10px;">-</span>\n' +
'<input type="number" class="endDay" value="'+(automaticApprovals[i].maxTime?automaticApprovals[i].maxTime:"")+'" />\n' +
'<label class="error remainday-error" style="left: 490px;top: -2px;color: #ef392b;" hidden="hidden">\n' +
'<i class="fa fa-times-circle"></i><span style="margin-left: 4px;">Please enter the correct time period</span>\n' +
'</label>\n' +
'</div>\n' +
'</div>\n' +
'<div class="configure_time" style="position: relative;">\n' +
'<label>Audit time:</label>\n' +
'<div><input type="number" class="time changeTime" value="'+automaticApprovals[i].approvalTime+'">Automatically pass the leadership review in minutes</div>\n' +
'<label class="error time-error" style="left: 300px;top: 8px;color: #ef392b;" hidden="hidden">\n' +
'<i class="fa fa-times-circle"></i>\n' +
'<span></span>\n' +
'</label>\n' +
'</div>\n' +
'<div class="configure_btn"><button class="btn btn-success cancel">cancel</button><div class="btn btn-primary save" data-id="'+automaticApprovals[i].id+'">Preservation</div></div>\n' +
'</div>\n' +
'</div>'
$("#configures").append(obj)
}
}
}
});
}The input check box is selected by default
'<input type="checkbox" ' +(automaticApprovals[i].status=="0"?"":"checked='checked'" )+ 'name="configureCheck" data-id="'+automaticApprovals[i].id+'" class="configureCheck">\n' +
Drop down box: render data option is selected by default
'<select name="servicePeriod" class="select_condition servicePeriod" >\n' + '< option value = "" > please select < / option > \ n'+ '< option value = "0" + (automatic approvals [i]. Serviceperiod = = "0"? "Selected ='selected':" ") + '"' > unlimited < / option > '+ getoptions (serviceperiod, automatic approvals [i]. Serviceperiod) +' \ n '+ '</select>\n' +
function getOptions(data,cur) {
return data.map(function(value){
return '<option ' +(cur==value.dictLabel?"selected='selected'":"" )+ ' value="'+value.dictLabel+'">'+value.dictLabel+'</option>';
}).join('')
}
Add binding events to rendered elements
$(document).on('click ',' element ', function(){
console.log("clicked")
})