資訊專欄INFORMATION COLUMN
摘要：而由于沒有后端的數據支持，所有的數據都在表格中展示，所以需要將表格中的數據轉為數據，再通過讀取，然后用模板引擎渲染到頁面上。
如圖所示，是一個動態的表格，內容數量不定第一層分類是專業大類的分類，第二層分類的國家的分類，第三層分類是具體專業名的分類（就是不同的色塊欄），甚至還有具體的院校名分類。而由于沒有后端的數據支持，所有的數據都在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": [
"倫敦大學皇家霍洛威學院",
"?？巳卮髮W",
"華威大學",
"布里斯托大學"
],
"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中的數據 ，所以對象中的具體內容直接讓模板引擎遍歷就好了，不用自己造輪子。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115656.html
摘要：概述數據字典主要解決下拉框數據填充和數據表格轉義處理，一個數據字典可以多處使用。通過服務端異步請求加載數據列表。 概述 數據字典主要解決下拉框數據填充和數據表格轉義處理，一個數據字典可以多處使用。 1.多個頁面下拉框使用同樣的數據，改一個地方需要把所有頁面都要修改 2.數據表格轉義代替自己手動寫templet解析模板數據字典提供一個通用的處理方式，支持配置靜態數據字典和動態數據...
摘要：概述數據字典主要解決下拉框數據填充和數據表格轉義處理，一個數據字典可以多處使用。通過服務端異步請求加載數據列表。 概述 數據字典主要解決下拉框數據填充和數據表格轉義處理，一個數據字典可以多處使用。 1.多個頁面下拉框使用同樣的數據，改一個地方需要把所有頁面都要修改 2.數據表格轉義代替自己手動寫templet解析模板數據字典提供一個通用的處理方式，支持配置靜態數據字典和動態數據...
摘要：而由于沒有后端的數據支持，所有的數據都在表格中展示，所以需要將表格中的數據轉為數據，再通過讀取，然后用模板引擎渲染到頁面上。 showImg(https://segmentfault.com/img/bV3N8M?w=1574&h=692);如圖所示，是一個動態的表格，內容數量不定第一層分類是專業大類的分類，第二層分類的國家的分類，第三層分類是具體專業名的分類（就是不同的色塊欄），甚至...
閱讀 3708·2023-04-26 00:56
閱讀 2686·2021-09-30 10:01
閱讀 961·2021-09-22 15:30
閱讀 3915·2021-09-07 10:21
閱讀 1507·2021-09-02 15:40
閱讀 2750·2021-08-30 09:47
閱讀 1234·2021-08-16 10:57
閱讀 1862·2019-08-30 14:01
