网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
写在前面
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家:人工智能学习网站
一、jq动态拼接html页面
需求:
1.页面内容不是死的
2.根据后台数据动态加载页面数据
实现:
在这之前我们需要了解下apppend()与html()这两个方法的区别:
简单来说就是append（）方法是在元素列表添加某个元素，但是html（）是替换元素中的数据。如果需要做换页，导航此类的效果最好使用html（）方法
详情可参考:append()与html()区别
废话不多说直接上代码:
1.首先 在需要动态拼接的地方的父级标签可以加上一个id或者class类名 区别倒是不大 个人都是加className 如下(templateArea即是 我们会在其下面拼接html页面及数据):
<body>
<div class="page">
<div class="tab\_line clearfix">
<a class="tab\_line\_a" href="/reportPage?mainId=${mainId !}&year=${year !}&isFillIn=${mainId !}">医疗质量</a>
<a class="tab\_line\_a" href="/reportPageOperate?mainId=${mainId !}&year=${year !}&isFillIn=${isFillIn !}">运营效率</a>
<a class="tab\_line\_a now\_a">持续发展</a>
<a class="tab\_line\_a" href="/reportPageSatisface?mainId=${mainId !}&year=${year !}&isFillIn=${isFillIn !}">满意度</a>
</div>
<div class="templateArea">
</div>
<div class="bottom">
<a href="/homepage" class="operation\_line\_button fr">返回</a>
<div class="operation\_line\_button operation\_line\_button\_blue fr save">保存</div>
</div>
</div>
</body>
2.ajax获取到数据 根据数据情况和需求可自主选择拼接流程 以下为我个人需求拼接:
主要步骤为:
a.新建变量用来存放页面 即:var list=""
b.将对应页面放到list中 如需要放一个input 则为:list+=“input标签” 主要就是这种格式
c.最后就是$(".templateArea").append(list)
大概就是这三步 但是需求都是不一样的 所以说根据自己情况进行改动 有这个思路就可
function getTemplateList(param) {
jQuery.ajax({
url: systemBaseInterface + "/sustainedAdd/findSustainedTemplateList",
type: "POST",
cache: false,
async: false,
data: param,
dataType: "json",
success: function (data, text) {
var list = "";
for (var i = 0; i < data.data.length; i++) {
if (i == 0) {
list += "<div class=\"content\">\n" +
" <div class=\"title\">" + data.data[i].content + "<span style=\"float: right\">" + ${year !} + "</span></div>\n" +
" <table class=\"content\_table\">\n" +
" <tr>\n" +
" <th></th>\n" +
" <th></th>\n" +
" <th></th>\n" +
" <th></th>\n" +
" </tr>"
} else {
list += "<div class=\"content\">\n" +
" <div class=\"title\">" + data.data[i].content + "\n" +
" </div>\n" +
"<table class=\"content\_table functionalPositionArea\">\n" +
" <tr>\n" +
" <th></th>\n" +
" <th></th>\n" +
" <th></th>\n" +
" <th></th>\n" +
" </tr>"
}
jQuery.ajax({
url: systemBaseInterface + "/sustainedAdd/findSustainedTemplateList",
type: "POST",
cache: false,
async: false,
data: {"parentCode": data.data[i].code},
dataType: "json",
success: function (data, text) {
for (var j = 0; j < data.data.length; j++) {
var content = JSON.parse(htmlDecode(data.data[j].content))
if (content.threeType == "定性") {
list += " <tr>\n" +
" <td class=\"content\_table\_label\">" + content.threeName + "</td>\n" +
" <td colspan=\"3\">\n" +
" <div class=\"content\_table\_block content\_table\_block1\">\n" +
" <div class=\"dropdown\">\n" +
" <input name=\"\" autocomplete=\"off\" type=\"text\" data-name=" + content.threeName + " data-code=" + data.data[j].code + " id="+ data.data[j].code +" data-count=" + data.data[j].isCount + " code=" + data.data[j].code + " class=\"dropdown\_input normal result\" readonly=\"readonly\" placeholder=\"请选择\" style=\"cursor: auto;\">\n" +
" <img alt=\"选择\" src=\"../img/dropdown.png\" class=\"dropdown\_img\">\n" +
" <ul class=\"dropdown\_menu\">"
for (var k = 0; k < content.option.length; k++) {
list += " <li class=\"overflow dropdown\_menu\_li\" code=" + k + 1 + ">" + content.option[k].xuanxiang + "</li>\n"
}
list += " </ul>\n" +
" </div>\n" +
" </div>\n" +
" </td>\n" +
" </tr>"
} else if (content.threeType == "定量") {
for (var k = 0; k < content.tiaojian.length; k++) {
if (k == 0) {
var kk = k + 1;
list += " <tr>\n" +
" <td class=\"content\_table\_label\" rowspan=" + content.tiaojian.length + ">" + content.threeName + "</td>\n" +
" <td rowspan=" + content.tiaojian.length + ">\n" +
" <div class=\"content\_table\_block\">\n" +
" <input type=\"text\" class=\"content\_table\_block\_text result result\_type3\" data-count=" + data.data[j].isCount + " data-code=" + data.data[j].code + " data-name=" + content.threeName + " code=" + data.data[j].code + " id=\"value" + data.data[j].code + "\_result\">\n" +
" <span class=\"unit overflow\">" + content.threeUnit + "</span>\n" +
" </div>\n" +
" </td>\n" +
" <td class=\"content\_table\_label\">" + content.tiaojian[0].condition + "</td>\n" +
" <td>\n" +
" <div class=\"content\_table\_block\">\n" +
" <input type=\"text\" class=\"content\_table\_block\_text condition " + data.data[j].code + "\_condition\" data-name=" + content.threeName + " data-count=" + data.data[j].isCount + " data-code=" + data.data[j].code + " code=" + data.data[j].code +"\_"+kk +" οnkeyup='keyUp(data.data[j].code,JSON.stringify(content.suanfa))' id=" + data.data[j].code +"\_"+kk +">\n" +
" <span class=\"unit overflow\">" + content.tiaojian[0].conditionUnit + "</span>\n" +
" </div>\n" +
" </td>\n" +
" </tr>"
} else {
var kk = k + 1;
list += "<tr>\n" +
" <td class=\"content\_table\_label\">" + content.tiaojian[k].condition + "</td>\n" +
" <td>\n" +
" <div class=\"content\_table\_block\">\n" +
" <input type=\"text\" class=\"content\_table\_block\_text condition " + data.data[j].code + "\_condition\" data-name=" + content.threeName + " οnkeyup='keyUp(" + data.data[j].code + "," + JSON.stringify(content.suanfa) + ")' data-code=" + data.data[j].code + " data-count=" + data.data[j].isCount + " code=" + data.data[j].code +"\_"+kk +" id=" + data.data[j].code +"\_"+kk +">\n" +
" <span class=\"unit overflow\">" + content.tiaojian[k].conditionUnit + "</span>\n" +
" </div>\n" +
" </td>\n" +
" </tr>"
}
}
} else {
list += "<tr>\n" +
" <td class=\"content\_table\_label\">" + content.threeName + "</td>\n" +
" <td colspan=\"3\">\n" +
" <div class=\"content\_table\_block\">\n" +
" <input type=\"text\" class=\"content\_table\_block\_text result\" data-name=" + content.threeName + " data-count=" + data.data[j].isCount + " data-code=" + data.data[j].code + " code=" + data.data[j].code + " id="+ data.data[j].code +">\n" +
" <span class=\"unit overflow\">" + content.threeUnit + "</span>\n" +
" </div>\n" +
" </td>\n" +
" </tr>"
}
}
list += "</table>\n" +
" </div>"
}
})
}
$(".templateArea").append(list)
}
})
}
这里是我的拼装代码 我是分三种情况进行拼接的 因需求而异 这种方法笨是笨了点 不过身为后台开发的 有时候想不到思路的话这种拼接倒也不失为一种解决方案
最后给大家看下效果:
我这里是先加载头信息 bb 然后加载的是三种不同的框(下拉框 输入框 两条件一结果框)
二、腾讯template封装数据
这里给大家扩展一个其他的封装数据的方法 template模板引擎框架 这里是在腾讯template基础上使用 些许改变
我用的是template-native-3.0.1.js 大家有兴趣可以找下源码看下
个人认为template用于这些table之类的循环是挺爽的(大佬勿喷)
使用如下:
1.首先 js获取到后台数据列表 通过template进行封装
user.userData = function (param) {
return $.ajax({
url: systemBaseInterface + "/base/userData",
data: param,
failed: function (code, msg) {
DiaLogBox.error(msg);
},
success: function (data) {
template.loadData("user", data.data, function (ele) {
$(ele).show();
user.tableInit();
});
$("#userlist").setPager(data.data, function () {
user.userData(param);
});
}
});
};
2.然后在页面调用方法如下:
页面调用主要分为几步:
a.设置template-name="你在js中设置的名字"
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
2433736)]
[外链图片转存中…(img-4JzOwEoo-1715632433736)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
