js 拼写 html 调用后台数据，onclick调用函数
js 拼写 html 调用后台数据，onclick调用函数
·
最近，项目开发发现有一些效果，需要自己在js下拼接html代码，做出想要的效果，但是分成两种：一种是html页面，这是多年前写静态页面时遇到一些问题，现在突然想起来，另一种是vue页面，这是最近遇到的一种情况。
我们的项目现在有一个页面搜索功能，集成了页面的好多模块，因为公司问题所以不在这举例了，我们需要请求多个接口、不同的展示方式和排序问题，那问题就来了，第一种方案是没有在js里面拼接html代码，把请求的数据都放到一个数组里面，在通过循环放到页面里面，发现这样偶爱徐有问题，后来我们就想到在js里面拼html代码，整体拼接好后，再通过v-html在页面上展示。发现这个可以行同。
行了不多说了，直接上代码把。
第一种：html页面js拼接html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="attachment">
<div class="upload">
<div class="attachment-title clearfix">
<div class="fileId" style="display:none;">ID</div>
<div class="fileName" style="width:40%">名称</div>
<div class="fileSize" style="width:10%">重量</div>
<div style="width:10%">购买人</div>
<div style="width:20%">购买时间</div>
<div style="width:10%">操作</div>
</div>
<div class="content"></div>
</div>
</div>
</body>
<script src="jquery.min.js"></script>
<script>
// 附件展示
var data = [{
"id": 0,
"filePath": "/opt/images/0.png",
"fileName": "苹果",
"updatorName": "张三",
"updateTime": "2022/06/11 10:37:04",
}, {
"id": 1,
"filePath": "/opt/images/1.png",
"fileName": "香蕉",
"updatorName": "李四",
"updateTime": "2022/06/11 10:37:04",
}]
new contentFunction(data)
function contentFunction(data) {
var str = '<div class = "attachment-content" >'
for (var d = 0; d < data.length; d++) {
var KbSize = data[d].fileSize / 1024
str += '<div class="file-progress clearfix"><div class="fileId" style="display:none;">'
str += data[d].id + '</div><div class="fileName" style="width:40%"><a onclick="previewFunction(\''
str += data[d].filePath + ' \')" style="cursor:pointer;color:#337ab7;white-space: nowrap;"><span>'
str += data[d].fileName + '</span></a></div><div class="fileSize" style="width: 10%;">'
str += KbSize.toFixed(2) + 'kb</div><div class="filePeople" style="width: 10%;">'
str += data[d].updatorName + '</div><div class="fileTime" style="width: 20%;">'
str += data[d].updateTime + '</div><div class="fileDownLoad operate" style="width: 10%;"><a onclick="downloadRow('
str += data[d].id + ')" style = "cursor:pointer;color:#337ab7;white-space: nowrap;" > 下载 </a></div >'
str += '</div>'
}
str += '</div>'
$('.content').html(str)
}
// 下载
function downloadRow(id) {
alert(id);
}
// 预览
function previewFunction(filePath) {
alert(filePath)
}
</script>
</html>
<style>
.clearfix:after {
content: ".";
height: 0px;
display: block;
visibility: hidden;
clear: both;
}
.clearfix {
zoom: 1;
}
.attachment .upload .attachment-title>div {
height: 100%;
line-height: 40px;
padding-left: 5px;
float: left;
border-collapse: collapse;
border-top: 1px solid rgb(221, 221, 221);
border-bottom: 1px solid rgb(221, 221, 221);
font-size: 14px;
font-weight: 400;
color: rgb(51, 51, 51);
text-align: center;
background: #fafafa;
}
.attachment .upload .attachment-title>div:not(:last-child),
.attachment .upload .file-progress>div:not(:last-child) {
border-right: 1px solid #ccc;
}
.attachment .upload .file-progress>div {
float: left;
padding-left: 5px;
background-color: transparent;
border-bottom: 1px solid rgb(221, 221, 221);
line-height: 40px;
font-size: 14px;
font-weight: 400;
z-index: 10;
}
.file-progress .downCheck,
.file-progress .downCheckOne,
.file-progress .fileSize,
.file-progress .filePeople,
.file-progress .fileTime,
.file-progress .fileDownLoad {
text-align: center;
}
.downLoads {
background: url(./1.jpg) no-repeat left;
height: 28px;
width: 91px;
text-align: right;
cursor: pointer;
line-height: 28px;
font-size: 14px;
margin: 10px 0 10px 10px;
padding-right: 5px;
}
</style>
第二种：vue页面
<template>
<div>
<div class="attachment">
<div class="upload">
<div class="attachment-title clearfix">
<div class="fileId" style="display:none;">ID</div>
<div class="fileName" style="width:40%">名称</div>
<div class="fileSize" style="width:10%">重量</div>
<div style="width:10%">购买人</div>
<div style="width:20%">购买时间</div>
<div style="width:10%">操作</div>
</div>
<div class="content">
<span v-for="(aItems,aIndexs) in data" :key="aIndexs">
<span v-html="aItems"></span>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: [],
htmldata:[{
"id": 0,
"filePath": "/opt/images/0.png",
"fileName": "苹果",
"updatorName": "张三",
"updateTime": "2022/06/11 10:37:04",
}, {
"id": 1,
"filePath": "/opt/images/1.png",
"fileName": "香蕉",
"updatorName": "李四",
"updateTime": "2022/06/11 10:37:04",
}]
};
},
mounted () {
this.htmlFunction();
},
created() {
window.downloadRow = this.downloadRow
window.previewFunction = this.previewFunction
},
methods: {
htmlFunction(){
var htmlArrays = []
this.htmldata.forEach((value,index)=>{
var KbSize = this.htmldata[index].fileSize / 1024
var str = '<div class = "attachment-content" >'
str += '<div class="file-progress clearfix"><div class="fileId" style="display:none;">'
str += this.htmldata[index].id + '</div><div class="fileName" style="width:40%"><a onclick="previewFunction(\''
str += this.htmldata[index].filePath + ' \')" style="cursor:pointer;color:#337ab7;white-space: nowrap;"><span>'
str += this.htmldata[index].fileName + '</span></a></div><div class="fileSize" style="width: 10%;">'
str += KbSize.toFixed(2) + 'kb</div><div class="filePeople" style="width: 10%;">'
str += this.htmldata[index].updatorName + '</div><div class="fileTime" style="width: 20%;">'
str += this.htmldata[index].updateTime + '</div><div class="fileDownLoad operate" style="width: 10%;"><a onclick="downloadRow('
str += this.htmldata[index].id + ')" style = "cursor:pointer;color:#337ab7;white-space: nowrap;" > 下载 </a></div >'
str += '</div>'
str += '</div>'
htmlArrays.push(str)
});
this.data = htmlArrays;
},
// 下载
downloadRow(id){
alert(id);
},
// 预览
previewFunction(filePath){
alert(filePath)
},
},
};
</script>
<style>
.clearfix:after {
content: ".";
height: 0px;
display: block;
visibility: hidden;
clear: both;
}
.clearfix {
zoom: 1;
}
.attachment .upload .attachment-title>div {
height: 100%;
line-height: 40px;
padding-left: 5px;
float: left;
border-collapse: collapse;
border-top: 1px solid rgb(221, 221, 221);
border-bottom: 1px solid rgb(221, 221, 221);
font-size: 14px;
font-weight: 400;
color: rgb(51, 51, 51);
text-align: center;
background: #fafafa;
}
.attachment .upload .attachment-title>div:not(:last-child),
.attachment .upload .file-progress>div:not(:last-child) {
border-right: 1px solid #ccc;
}
.attachment .upload .file-progress>div {
float: left;
padding-left: 5px;
background-color: transparent;
border-bottom: 1px solid rgb(221, 221, 221);
line-height: 40px;
font-size: 14px;
font-weight: 400;
z-index: 10;
}
.file-progress .downCheck,
.file-progress .downCheckOne,
.file-progress .fileSize,
.file-progress .filePeople,
.file-progress .fileTime,
.file-progress .fileDownLoad {
text-align: center;
}
.downLoads {
/* background: url(./1.jpg) no-repeat left; */
height: 28px;
width: 91px;
text-align: right;
cursor: pointer;
line-height: 28px;
font-size: 14px;
margin: 10px 0 10px 10px;
padding-right: 5px;
}
</style>
onclick调用函数：
onclick调用函数时，如果在vue中应该在 created()里面声明一下， 否则就不能调用这个函数，代码如下：
created() {
window.downloadRow = this.downloadRow
window.previewFunction = this.previewFunction
},
还有要注意的就是onclick调用函数时传的值应该是字符串，注意单引号和双引号的嵌套和’'转换符的应用，其实例子面都有。
还有问题请留言，谢谢
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)