摘要：而由于没有后端的数据支持，所有的数据都在表格中展示，所以需要将表格中的数据转为数据，再通过读取，然后用模板引擎渲染到页面上。
如图所示，是一个动态的表格，内容数量不定第一层分类是专业大类的分类，第二层分类的国家的分类，第三层分类是具体专业名的分类（就是不同的色块栏），甚至还有具体的院校名分类。而由于没有后端的数据支持，所有的数据都在excel表格中展示，所以需要将表格中的数据转为json数据，再通过ajax读取，然后用模板引擎渲染到页面上。
这里需要注意的是json的数据内容一定要和模板的内容互相匹配，这里需要引用的有jQuery，Boostrap,art-Template,将css和js引入后，话不多说，先从HTML开始：
艺考生留学指南
陕西新东方前途出国
电话：029-87203365
地址：西安市高新区林凯国际10层（科技路与高新二路
十字东南角）
Copyright © 2017-2018 陕西新东方前途出国
如上所示，为全部HTML，其中id为template的就是模板引擎的模板啦，将整个表格部分都看做为模板引擎之内的内容，变量部分就是需要在json中写上的内容，关于art-template的语法，可以看art_template模板引擎渲染数据的小方法。
css 部分不多说。
JS内容如下：
window.onload = function () {
var data;
$.ajax({
dataType: "json",
url: "data.json",
data: data,
type: "get",
success: function (data, key) {
var datas = data;
console.log(data);
for (var key in datas) {};
// 专业分类点击事件
$(".majors>ul>li").hover(
function (e) {
$(this).children(".mask").css("background", "rgba(0, 0, 0, .3)");
$(this).siblings().children(".mask").css("background", "rgba(0, 0, 0, .5)");
},
function (e) {
$(this).children(".mask").css("background", "rgba(0, 0, 0, .5)");
$(this).siblings().children(".mask").css("background", "rgba(0, 0, 0, .5)");
}
);
$("body").on("click", ".majors>ul>li", function (e) {
console.log("好好学习");
console.log($(this).index());
// 给当前项的兄弟元素加上阴影，给当前项去除阴影。
$(this).addClass("active");
$(this).siblings().removeClass("active");
$(this).find(".mask").css("background", "rgba(0, 0, 0, 0)");
$(this).siblings().find(".mask").css("background", "rgba(0, 0, 0, .5)");
//获取当前tab中鼠标停在的table栏的索引
var majorIndex = $(this).index();
// 取出所有数据中当前专业类目数据
var majorData = data[majorIndex];
console.log(majorData);
// 由于取出的是对象，所以遍历key，求出它的value,并赋值给新变量
for (var key in majorData) {
console.log(majorData[key]);
var majorDataA = majorData[key]
}
// 当国家项被点击时
$("body").on("click", ".countries>li", function () {
console.log($(this));
$(this).siblings().removeClass("selected");
$(this).addClass("selected")
$(".articles").html("");
console.log("天天向上");
// var countryIndex=$(this).index();
// console.log(countryIndex);
// var countryData=majorData
// 由于json数据结构的原因，此处不能用数组的index绑定，所以用id绑定。
var countryId = $(this).attr("id");
console.log(countryId)
// 得到每个国家的数据
var countryData = majorDataA[countryId];
console.log(countryData);
// 遍历当前国家项的数据
$.each(countryData, function (index, item) {
console.log(countryData[index]);
console.log(countryData[index].professional);
// 为国家项数据设置一个新变量
var countryDataIndex = countryData[index];
console.log(countryDataIndex.professional);
// 将国家项数据转为对象
var OBJ = {
items: countryDataIndex
};
console.log(OBJ);
// 将对象写入模板引擎并赋值给result变量
var result = template("template", OBJ);
console.log(countryDataIndex.university);
$(".articles").append(result);
})
// 设置左侧色块的的高度和右侧表格的高度相等。
var tHeight = $("table").height();
console.log(tHeight);
var aHeight = $("aside").height();
console.log(aHeight);
var aHeight = tHeight;
console.log(tHeight);
$("aside").css("height", aHeight);
})
$("#Americia").trigger("click");
})
$(".art").trigger("click");
}
})
注释上介绍的基本挺清楚啦，所以应该没什么需要解释的，如果需要请留言。
JSON的数据，这需要自己来梳理，略复杂，我梳理后效果是这样：
[{
"Performance": {
"Americia": [{
"professional": "暂无",
"direction": " ",
"university": [
"暂无"
],
"standards": [
"暂无"
],
"project": [
"点击了解"
]
}],
"England": [{
"professional": "戏剧",
"direction": " Drama",
"university": [
"伦敦大学皇家霍洛威学院",
"埃克塞特大学",
"华威大学",
"布里斯托大学"
],
"standards": [
"雅思5.0，写作5.0；
高中三年平均成绩75分以上",
"雅思5.5，单项不低于5.0，
高中三年平均成绩75分以上",
"雅思5.5，单项不低于5.5；
高中三年平均成绩85分以上",
"雅思6.0，写作5.5，其他不低于5.0；
高中三年平均成绩80分以上"
],
"project": [
"点击了解"
]
}],
"Canada": [{
"professional": "暂无",
"direction": " ",
"university": [
"暂无"
],
"standards": [
"暂无"
],
"project": [
"点击了解"
]
}],
"Austrilia": [{
"professional": "暂无",
"direction": " ",
"university": [
"暂无"
],
"standards": [
"暂无"
],
"project": [
"点击了解"
]
}],
"Europe": [{
"professional": "艺术
音乐与表演",
"direction": " Art music
performance",
"university": [
"意大利博洛尼亚大学，罗马三大"
],
"standards": [
"1. 高考文化课300分以上，高中毕业；
2. 意大利语A2水平，计划生"
],
"project": [
"点击了解"
]
}],
"Asia": [{
"professional": "戏剧
电影",
"direction": "Dramas
Movies",
"university": [
"韩国：韩国庆熙大学，韩国中央大学，韩国建国大学等"
],
"standards": [
"1.国内高三在读（完成高二学业水平测试）或高中毕业（或同等学历：中专，职高，技校），具有高中毕业证，高中艺术特长；
2.韩语TOPIK三级（可在韩国语学堂完成韩语学习）；
3.表演艺术学部 : 一定量的对词及指定表演。 "
],
"project": [
"艺形者培训项目，境外升学辅导课程-点击了解"
]
}]
}
}
]
当然这只是数组中的一条数据，其他的还有很多条，但是结构都一样，这里一定要多用数组类型的json，因为需要对数据进行遍历，用对象就比较麻烦，所以我将很多数据内容都写成了数组，只有最底层的具体内容才写作对象，然后在模板引擎中调用起来很方便。另外提示一下，模板引擎自带遍历功能：模板引擎如何遍历json中的数据 ，所以对象中的具体内容直接让模板引擎遍历就好了，不用自己造轮子。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107402.html
摘要：概述数据字典主要解决下拉框数据填充和数据表格转义处理，一个数据字典可以多处使用。通过服务端异步请求加载数据列表。 概述 数据字典主要解决下拉框数据填充和数据表格转义处理，一个数据字典可以多处使用。 1.多个页面下拉框使用同样的数据，改一个地方需要把所有页面都要修改 2.数据表格转义代替自己手动写templet解析模板数据字典提供一个通用的处理方式，支持配置静态数据字典和动态数据...
摘要：概述数据字典主要解决下拉框数据填充和数据表格转义处理，一个数据字典可以多处使用。通过服务端异步请求加载数据列表。 概述 数据字典主要解决下拉框数据填充和数据表格转义处理，一个数据字典可以多处使用。 1.多个页面下拉框使用同样的数据，改一个地方需要把所有页面都要修改 2.数据表格转义代替自己手动写templet解析模板数据字典提供一个通用的处理方式，支持配置静态数据字典和动态数据...
摘要：而由于没有后端的数据支持，所有的数据都在表格中展示，所以需要将表格中的数据转为数据，再通过读取，然后用模板引擎渲染到页面上。 showImg(https://segmentfault.com/img/bV3N8M?w=1574&h=692);如图所示，是一个动态的表格，内容数量不定第一层分类是专业大类的分类，第二层分类的国家的分类，第三层分类是具体专业名的分类（就是不同的色块栏），甚至...
阅读 2751·2021-11-22 13:54
阅读 2687·2021-10-14 09:42
阅读 3985·2021-09-28 09:47
阅读 2161·2021-09-03 10:28
阅读 1203·2021-07-26 23:38
阅读 2557·2019-08-30 15:54
阅读 2638·2019-08-29 16:35
阅读 1424·2019-08-29 15:42
