jq动态拼接html页面及数据

2401_84152140

于 2024-04-13 01:05:09 发布

阅读量393

点赞数 3

分类专栏：程序员文章标签： html okhttp 前端

本文链接：https://blog.csdn.net/2401_84152140/article/details/137699790

版权

程序员专栏收录该内容

187 篇文章 0 订阅

订阅专栏

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 !} + “\n” +

" <table class=“content_table”>\n" +

" \n" +

" "

} else {

list += “<div class=“content”>\n” +

" <div class=“title”>" + data.data[i].content + “\n” +

" \n" +

“<table class=“content_table functionalPositionArea”>\n” +

" \n" +

" "

}

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 += " \n" +

" <td class=“content_table_label”>" + content.threeName + “\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 + “\n”

}

list += " \n" +

" \n" +

" "

} else if (content.threeType == “定量”) {

for (var k = 0; k < content.tiaojian.length; k++) {

if (k == 0) {

var kk = k + 1;

list += " \n" +

" <td class=“content_table_label” rowspan=" + content.tiaojian.length + “>” + content.threeName + “\n” +

" \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 + “\n” +

" \n" +

" <td class=“content_table_label”>" + content.tiaojian[0].condition + “\n” +

" \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 + “\n” +

" \n" +

" "

} else {

var kk = k + 1;

list += “\n” +

" <td class=“content_table_label”>" + content.tiaojian[k].condition + “\n” +

" \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 + “\n” +

" \n" +

" "

}

} else {

list += “\n” +

" <td class=“content_table_label”>" + content.threeName + “\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 + “\n” +

" \n" +

" "

}

list += “\n” +

" "

}

})

}

$(“.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中设置的名字"

b.循环数据(我这里的list是因为我是分页最后一层是list目录然后你们可以看数据情况进行循环)

c.放入数据即可

在这里插入图片描述

3.效果如下:

在这里插入图片描述

最后给大家放下template-native-3.0.1.js源码有兴趣看下:

!function () {

function a(a) {

return a.replace(t, “”).replace(u, “,”).replace(v, “”).replace(w, “”).replace(x, “”).split(/^$|,+/)

}

function b(a) {

return “'” + a.replace(/(‘|\)/g, “\$1”).replace(/\r/g, “\r”).replace(/\n/g, “\n”) + "’"

}

function c(c, d) {

function e(a) {

return m += a.split(/\n/).length - 1, k && (a = a.replace(/\s+/g, " ").replace(/ /g, “”)), a && (a = s[1] + b(a) + s[2] + “\n”), a

}

function f(b) {

var c = m;

if (j ? b = j(b, d) : g && (b = b.replace(/\n/g, function () {

return m++, “$line=” + m + “;”

})), 0 === b.indexOf(“=”)) {

var e = l && !/^=[=#]/.test(b);

if (b = b.replace(/^=[=#]?|[\s;]*$/g, “”), e) {

var f = b.replace(/\s*([^)]+)/, “”);

n[f] || /^(include|print) $/. t es t (f) ∣∣ (b = "$ escape(" + b + “)”)

} else b = “$string(” + b + “)”;

b = s[1] + b + s[2]

}

return g && (b = “$line=” + c + “;” + b), r(a(b), function (a) {

if (a && !p[a]) {

var b;

b = “print” === a ? u : “include” === a ? v : n[a] ? “ $u t i l s ." + a : o [a]? "$ helpers.” + a : “$data.” + a, w += a + “=” + b + “,”, p[a] = !0

}

}), b + “\n”

}

var g = d.debug, h = d.openTag, i = d.closeTag, j = d.parser, k = d.compress, l = d.escape, m = 1,

p = {$data: 1, $filename: 1, $utils: 1, $helpers: 1, $out: 1, $line: 1}, q = “”.trim,

s = q ? [“ $o u t =^{''}; ", "$ out+=”, “;”, “ $o u t "] : ["$ out=[];”, “ $o u t . p u s h (", "); ", "$ out.join(‘’)”],

t = q ? “$out+=text;return $o u t; " : "$ out.push(text);”,

u = “function(){var text=‘’.concat.apply(‘’,arguments);” + t + “}”,

v = “function(filename,data){data=data|| $d a t a; v a r t e x t =$ utils. $in c l u d e (f i l e nam e, d a t a,$ filename);” + t + “}”,

w = “‘use strict’;var $u t i l s = t hi s,$ helpers= $u t i l s .$ helpers,” + (g ? “$line=0,” : “”), x = s[0],

y = “return new String(” + s[3] + “);”;

r(c.split(h), function (a) {

a = a.split(i);

var b = a[0], c = a[1];

});

var z = w + x + y;

g && (z = “try{” + z + “}catch(e){throw {filename: $f i l e nam e, nam e :^{'} R e n d er E rro r^{'}, m ess a g e : e . m ess a g e, l in e :$ line,source:” + b© + “.split(/\n/)[$line-1].replace(/^\s+/,‘’)};}”);