es6模板字符串中包含动态数据渲染的select下拉框

最新推荐文章于 2022-02-18 11:36:17 发布
原创 最新推荐文章于 2022-02-18 11:36:17 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#es6 #字符串拼接

博客介绍了使用ES6进行ajax请求数据循环拼接，包括三目运算符实现复选框选中状态、下拉框渲染数据并默认选中值。因IE11兼容性问题，考虑使用JS字符串拼接。还提及了input复选框和下拉框默认选中、渲染元素绑定事件等内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

下面就是我的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<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">修改配置</a><span class="del" data-id="${automaticApprovals[i].id}">删除</span></div>

                     </div>

                     <div class="configure_condition">

                             <label>筛选条件:</label>

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

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

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

                     </div>

                     <div class="configure_time">

                             <label>审核时间:</label>

                     <div>进入领导审核列表<span>${automaticApprovals[i].approvalTime}</span>分钟后自动通过审核</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>更改名称</a></div>

                     </div>

                     <div class="configure_condition_new">

                             <label>筛选条件:</label>

                     <div>

                     <span class="condition_tit">审核员：</span>

                     <select name="auditor" class="select_condition auditor">

                             <option value="">请选择</option>

                             <option value="0" ${automaticApprovals[i].adminId== '0'?'selected="selected"':''}>不限</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">服务期限：</span>

                     <select name="servicePeriod" class="select_condition servicePeriod">

                             <option value="">请选择</option>

                             <option value="0" ${automaticApprovals[i].servicePeriod== '0'?'selected="selected"':''}>不限</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">剩余天数：</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>请输入正确的时间段</span>

                             </label>

                             </div>

                             </div>

                             <div class="configure_time" style="position: relative;">

                             <label>审核时间:</label>

                     <div><input type="number" class="time changeTime" value="${automaticApprovals[i].approvalTime}">分钟后自动通过领导审核</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">取消</button><button class="btn btn-primary save" data-id="${automaticApprovals[i].id}">保存</button></div>

                     </div>

                </div>

            `

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

                        }


                    }

                 }

             });

         }

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

<input type="checkbox" ${automaticApprovals[i].status== '0'?'':'checked="checked"'} name="configureCheck" data-id="${automaticApprovals[i].id}" class="configureCheck">

 

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

<select name="auditor" class="select_condition auditor">

      <option value="">请选择</option>

       <option value="0" ${automaticApprovals[i].adminId== '0'?'selected="selected"':''}>不限</option>

      ${sysUsers.map(sysUsers=>`

        <option ${automaticApprovals[i].adminId== sysUsers.userId?'selected="selected"':''} required="required"                        value="${sysUsers.userId}">${sysUsers.loginName}</option>

         `).join('')}

         </select>

以上是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<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">修改配置</a><span class="del" data-id="'+automaticApprovals[i].id+'">删除</span></div>\n' +
										'</div>\n' +
										'<div class="configure_condition">\n' +
										'<label>筛选条件:</label>\n' +
										'<div>审核员：<span>'+(automaticApprovals[i].loginName=="0"?"不限":automaticApprovals[i].loginName)+'</span></div>\n' +
										'<div>服务期限：<span>'+(automaticApprovals[i].servicePeriod=="0"?"不限":automaticApprovals[i].servicePeriod)+'</span><span>'+(automaticApprovals[i].servicePeriod!="0"&& automaticApprovals[i].servicePeriod!=""?"个工作日":"")+'</span></div>\n' +
										'<div>剩余天数：<span>'+automaticApprovals[i].minTime+'</span><span>'+(automaticApprovals[i].minTime?"至":"")+'</span><span>'+automaticApprovals[i].maxTime+'</span><span>'+(automaticApprovals[i].minTime?"个工作日":"")+'</span></div>\n' +
										'</div>\n' +
										'<div class="configure_time">\n' +
										'<label>审核时间:</label>\n' +
										'<div>进入领导审核列表<span>'+automaticApprovals[i].approvalTime+'</span>分钟后自动通过审核</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>更改名称</a></div>\n' +
										'</div>\n' +
										'<div class="configure_condition_new">\n' +
										'<label>筛选条件:</label>\n' +
										'<div>\n' +
										'<span class="condition_tit">审核员：</span>\n' +
										'<select name="auditor"  class="select_condition auditor">\n' +
										'<option value="">请选择</option>\n' +
										'<option value="0" ' +(automaticApprovals[i].adminId=="0"?"selected='selected'":"" )+ ' >不限</option>'+getUserOptions(sysUsers,automaticApprovals[i].adminId)+'\n' +
										'</select>\n' +
										'</div>\n' +
										'<div>\n' +
										'<span class="condition_tit">服务期限：</span>\n' +
										'<select  name="servicePeriod" class="select_condition servicePeriod" >\n' +
										'<option value="">请选择</option>\n' +
										'<option value="0" ' +(automaticApprovals[i].servicePeriod=="0"?"selected='selected'":"" )+ '>不限</option>'+getOptions(servicePeriod,automaticApprovals[i].servicePeriod)+'\n' +
										'</select>\n' +
										'</div>\n' +
										'<div style="position: relative;">\n' +
										'<span class="condition_tit">剩余天数：</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;">请输入正确的时间段</span>\n' +
										'</label>\n' +
										'</div>\n' +
										'</div>\n' +
										'<div class="configure_time" style="position: relative;">\n' +
										'<label>审核时间:</label>\n' +
										'<div><input type="number" class="time changeTime" value="'+automaticApprovals[i].approvalTime+'">分钟后自动通过领导审核</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">取消</button><div class="btn btn-primary save" data-id="'+automaticApprovals[i].id+'">保存</div></div>\n' +
										'</div>\n' +
										'</div>'

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

input复选框默认选中

'<input type="checkbox" ' +(automaticApprovals[i].status=="0"?"":"checked='checked'" )+ 'name="configureCheck" data-id="'+automaticApprovals[i].id+'" class="configureCheck">\n' +

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

'<select  name="servicePeriod" class="select_condition servicePeriod" >\n' +
'<option value="">请选择</option>\n' +
'<option value="0" ' +(automaticApprovals[i].servicePeriod=="0"?"selected='selected'":"" )+ '>不限</option>'+getOptions(servicePeriod,automaticApprovals[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('')
}

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

$(document).on('click', '元素', function () {
  console.log("点击了")
})

 

 

configure详解
刘松华-林散
05-15 3567
./configure,make,make install的作用 转自：http://feinibuke.blog.51cto.com/1724260/367376 1、configure，这一步一般用来生成 Makefile，为下一步的编译做准备，你可以通过在 configure 后加上参数来对安装进行控制，比如代码:./configure –prefix=/usr 意思是将该软件安装在 /us
在Element UI中使用Select,子组件中的下拉框加载更多数据
weixin_42174401的博客
11-26 1817
在element Ui中使用Select组件时,如果后端返回的数据量过大,我们需要做上拉加载更多,前提是后端进行了分页处理 1.首选获取滚动条的高度 创建一个js文件,获取滚动条高度 // directives.js import Vue from 'vue' Vue.directive('selectLoadMore', { bind (el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.qu
C语言内嵌Es6,es6模板字符串中包含动态数据渲染的select下拉框
weixin_36184940的博客
05-21 289
下面就是我的ajax请求数据循环拼接function getconfigureData(){$.ajax({type: "GET",url: ctx + "leaderApproval/automaticApproval",dataType: 'json',success: function(res) {if(res.code==0){var automaticApprovals = res.au...
es6 简单封装一个 省市县三级下拉框
anchu7971的博客
01-10 294
　　　废话不多说，直接上效果图和代码： 　　　　　　　　 　　1，index.js 　　　　 function $(el){ return document.getElementById(el) } let render = Symbol('render') let event = Symbol('event') class Select { ...
react+ant-design(后台管理系统)Select组件下拉框Option动态渲染
yzkdcsdn的博客
02-18 4483
1.发送axios请求后端（这里就不展示了） 2.直接上干货 描述： 首先有form表单 其次有select组件 在这里我使用的是可以下拉搜索得（antd里面可以查到） 重点是这段代码 {dataSource && dataSource.map(item => ( <Option key={item.id}>{item.area}</Option>)) } 在这里要千万记住item箭头后面得渲染html得代码用圆括号（），而不是中括号{}！
react中如何实现下拉菜单
weixin_45625609的博客
02-07 5733
react中如何实现下拉菜单 思路： 1点击某个特定区域展示下拉框,点击其他任意区域隐藏下拉框 2选择某个选项隐藏下拉框,再次打开时滚动到选中的选项 ##### html部分 ```html <div className={styles.staticDep}> <span className={styles.label}>统计单位</span> <div ref={selectRef} onClick={() => setIsShow(!isShow)
带模糊搜索的树状下拉框
12-26
这通常通过JavaScript实现，例如使用`Array.prototype.filter()`方法，对每个选项进行遍历，然后利用正则表达式或字符串的`includes()`方法来判断是否包含搜索关键词。 其次，"树状下拉框"意味着下拉菜单中的选项...
react中实现搜索结果中关键词高亮显示
10-18
在React中，为了将HTML标签插入内容中，替换字符串使用了ES6模板字符串语法，将高亮关键词包裹在标签中，并且可以为标签添加一个class来定义高亮的样式。 最后，当需要将包含HTML标签的字符串插入React元素时，不能...
使用react、es6语法写代码实现以下效果：目前有三个变量分别是a、b、c，有两组字符串分别是“正财”和“偏财”，每个变量只能存储其中一组字符串，当其中某两个变量里的字符串为“正财”、另一个变量里的字符串为“偏财”时，打印字符串“成功”。请展示代码实现以上效果。
05-30
2. 在组件渲染时，我们渲染了三个下拉框，分别对应变量 a、b、c。当下拉框的值发生变化时，我们使用 `handleChange` 方法更新相应的变量。 3. 在 `componentDidUpdate` 方法中，我们判断是否满足“两个变量里的字符...
js监听下拉框
最新发布
03-19
### JavaScript 监听 Select 下拉框 Onchange 事件 在 HTML 中，`<select>` 元素用于创建下拉列表。通过绑定 `onchange` 事件，可以监听用户选择的变化并执行相应的操作。 以下是基于纯 JavaScript 的示例代码： ...
Linux下configure命令参数的详细说明
yel617的专栏
05-04 1223
Linux环境下的软件安装，并不是一件容易的事情;如果通过源代码编译后在安装，当然事情就更为复杂一些;现在安装各种软件的教程都非常普遍;但万变不离其中，对基础知识的扎实掌握，安装各种软件的问题就迎刃而解了。Configure脚本配置工具就是基础之一，它是autoconf的工具的基本应用。 与一些技巧相比，Configure显得基础一些，当然使用和学习起来就显得枯燥乏味一些，当然要成为高手，对基础
ES6知识点解析(二)
酒客的博客
12-20 470
ES6知识点解析(二) 字符串模板基本使用 ​ 在ES6之前，如果我们想要将字符串和一些动态的变量（标识符）拼接到一起，是非常麻烦和丑陋的（ugly）。 ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接： 首先，我们会使用 `` 符号来编写字符串，称之为模板字符串； 其次，在模板字符串中，我们可以通过 ${expression} 来嵌入动态的内容； // ES6之前拼接字符串和其他标识符 const name = "why" const age = 18 const height = 1
js-利用字符模板来动态添加表格
weixin_45630548的博客
08-27 417
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
深入浅出ES6（四）：模板字符串
work hard
03-17 6021
在上一篇文章中，我说过要写一篇风格迥异的新文章，在了解了迭代器和生成器后，是时候来品味一些不烧脑的简单知识，如果你们觉得太难了，还不快去啃犀牛书！ 现在，就让我们从最简单的知识学起吧！ 反撇号（`）基础知识 ES6引入了一种新型的字符串字面量语法，我们称之为模板字符串（template strings）。除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 "外，它们看起来与普通
ajax动态获取select中option内容，并添加点击事件
xuexizhe88的博客
02-07 6501
html代码： js代码： //ajax请求，封装的get请求方法 Get(GETITEMSCURRENTCODE,provOption,function(data){ if(data.code == 0){ var html = ''; var len = data.data.length; for(var i = 0 ; i< len;i++){ html = htm
利用模板字符串动态增减多个input框并传值
xinxiaoyong的博客
07-24 2743
一、先看效果图： 二、代码截图： 三、代码书写： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;动态增减input框并传值&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="bootstrap.
javascript select2.js 动态添加_初识JavaScript
weixin_39735166的博客
11-25 438
一、什么是JavaScriptJavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现...
如何让select下拉框随着内容改变大小
u012992462的专栏
03-30 7777
111      22222      33333333      44444444444      555555555555555                function resetSelectWidth(obj){     var tempObj=document.createElement("select");     tempObj.length=1;    
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值