C语言内嵌Es6,es6模板字符串中包含动态数据渲染的select下拉框

下面就是我的ajax请求数据循环拼接

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

var obj=`

${automaticApprovals[i].configurationName}

修改配置 删除

筛选条件:

审核员： ${automaticApprovals[i].loginName=='0'?'不限':automaticApprovals[i].loginName}

服务期限： ${automaticApprovals[i].servicePeriod=='0'?'不限':automaticApprovals[i].servicePeriod} ${automaticApprovals[i].servicePeriod!=0 && automaticApprovals[i].servicePeriod!= '' ?"个工作日":""}

剩余天数： ${automaticApprovals[i].minTime} ${automaticApprovals[i].maxTime?"至":""} ${automaticApprovals[i].maxTime} ${automaticApprovals[i].maxTime?"个工作日":""}

审核时间:

进入领导审核列表 ${automaticApprovals[i].approvalTime}分钟后自动通过审核

${automaticApprovals[i].configurationName}

更改名称

筛选条件:

审核员：

请选择

不限

${sysUsers.map(sysUsers=>`

${sysUsers.loginName}

`).join('')}

服务期限：

请选择

不限

${servicePeriod.map(servicePeriod=>`

${servicePeriod.dictLabel}

`).join('')}

剩余天数：

-

请输入正确的时间段

审核时间:

分钟后自动通过领导审核

取消保存

`

$("#configures").append(obj)

}

}

}

});

}

三目运算符 实现 复选框是否选中状态

下拉框渲染数据并默认选中一个值

请选择

不限

${sysUsers.map(sysUsers=>`

${sysUsers.loginName}

`).join('')}

以上是es的 由于ie11兼容不行  所以考虑js字符串拼接

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

var obj='

\n' +

'

\n' +

'

\n' +

'

\n' +

'\n' +

''+automaticApprovals[i].configurationName+'\n' +

'

\n' +

'

修改配置 删除

\n' +

'

\n' +

'

\n' +

'筛选条件:\n' +

'

审核员： '+(automaticApprovals[i].loginName=="0"?"不限":automaticApprovals[i].loginName)+'

\n' +

'

服务期限： '+(automaticApprovals[i].servicePeriod=="0"?"不限":automaticApprovals[i].servicePeriod)+' '+(automaticApprovals[i].servicePeriod!="0"&& automaticApprovals[i].servicePeriod!=""?"个工作日":"")+'

\n' +

'

剩余天数： '+automaticApprovals[i].minTime+' '+(automaticApprovals[i].minTime?"至":"")+' '+automaticApprovals[i].maxTime+' '+(automaticApprovals[i].minTime?"个工作日":"")+'

\n' +

'

\n' +

'

\n' +

'审核时间:\n' +

'

进入领导审核列表 '+automaticApprovals[i].approvalTime+'分钟后自动通过审核

\n' +

'

\n' +

'

\n' +

'

\n' +

'

\n' +

'

\n' +

''+automaticApprovals[i].configurationName+'\n' +

'\n' +

'

\n' +

'

更改名称

\n' +

'

\n' +

'

\n' +

'筛选条件:\n' +

'

\n' +

'审核员：\n' +

'\n' +

'请选择\n' +

'不限'+getUserOptions(sysUsers,automaticApprovals[i].adminId)+'\n' +

'\n' +

'

\n' +

'

\n' +

'服务期限：\n' +

'\n' +

'请选择\n' +

'不限'+getOptions(servicePeriod,automaticApprovals[i].servicePeriod)+'\n' +

'\n' +

'

\n' +

'

\n' +

'剩余天数：\n' +

'\n' +

'-\n' +

'\n' +

'\n' +

'请输入正确的时间段\n' +

'\n' +

'

\n' +

'

\n' +

'

\n' +

'审核时间:\n' +

'

分钟后自动通过领导审核

\n' +

'\n' +

'\n' +

'\n' +

'\n' +

'

\n' +

'

取消

保存

\n' +

'

\n' +

'

'

$("#configures").append(obj)

}

}

}

});

}

input复选框默认选中

'\n' +

下拉框默认选中 渲染数据option

'\n' +

'请选择\n' +

'不限'+getOptions(servicePeriod,automaticApprovals[i].servicePeriod)+'\n' +

'\n' +

function getOptions(data,cur) {

return data.map(function(value){

return ''+value.dictLabel+'';

}).join('')

}

给渲染的元素添加绑定事件

$(document).on('click', '元素', function () {

console.log("点击了")

})