資訊專欄INFORMATION COLUMN
摘要：而由于沒有后端的數(shù)據(jù)支持，所有的數(shù)據(jù)都在表格中展示，所以需要將表格中的數(shù)據(jù)轉(zhuǎn)為數(shù)據(jù)，再通過讀取，然后用模板引擎渲染到頁面上。
如圖所示，是一個動態(tài)的表格，內(nèi)容數(shù)量不定第一層分類是專業(yè)大類的分類，第二層分類的國家的分類，第三層分類是具體專業(yè)名的分類（就是不同的色塊欄），甚至還有具體的院校名分類。而由于沒有后端的數(shù)據(jù)支持，所有的數(shù)據(jù)都在excel表格中展示，所以需要將表格中的數(shù)據(jù)轉(zhuǎn)為json數(shù)據(jù)，再通過ajax讀取，然后用模板引擎渲染到頁面上。
這里需要注意的是json的數(shù)據(jù)內(nèi)容一定要和模板的內(nèi)容互相匹配，這里需要引用的有jQuery，Boostrap,art-Template,將css和js引入后，話不多說，先從HTML開始：
藝考生留學指南
陜西新東方前途出國
電話：029-87203365
地址：西安市高新區(qū)林凱國際10層（科技路與高新二路
十字東南角）
Copyright ? 2017-2018 陜西新東方前途出國
如上所示，為全部HTML，其中id為template的就是模板引擎的模板啦，將整個表格部分都看做為模板引擎之內(nèi)的內(nèi)容，變量部分就是需要在json中寫上的內(nèi)容，關于art-template的語法，可以看art_template模板引擎渲染數(shù)據(jù)的小方法。
css 部分不多說。
JS內(nèi)容如下：
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) {};
// 專業(yè)分類點擊事件
$(".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();
// 取出所有數(shù)據(jù)中當前專業(yè)類目數(shù)據(jù)
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數(shù)據(jù)結(jié)構(gòu)的原因，此處不能用數(shù)組的index綁定，所以用id綁定。
var countryId = $(this).attr("id");
console.log(countryId)
// 得到每個國家的數(shù)據(jù)
var countryData = majorDataA[countryId];
console.log(countryData);
// 遍歷當前國家項的數(shù)據(jù)
$.each(countryData, function (index, item) {
console.log(countryData[index]);
console.log(countryData[index].professional);
// 為國家項數(shù)據(jù)設置一個新變量
var countryDataIndex = countryData[index];
console.log(countryDataIndex.professional);
// 將國家項數(shù)據(jù)轉(zhuǎn)為對象
var OBJ = {
items: countryDataIndex
};
console.log(OBJ);
// 將對象寫入模板引擎并賦值給result變量
var result = template("template", OBJ);
console.log(countryDataIndex.university);
$(".articles").append(result);
})
// 設置左側(cè)色塊的的高度和右側(cè)表格的高度相等。
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的數(shù)據(jù)，這需要自己來梳理，略復雜，我梳理后效果是這樣：
[{
"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分以上，高中畢業(yè)；
2. 意大利語A2水平，計劃生"
],
"project": [
"點擊了解"
]
}],
"Asia": [{
"professional": "戲劇
電影",
"direction": "Dramas
Movies",
"university": [
"韓國：韓國慶熙大學，韓國中央大學，韓國建國大學等"
],
"standards": [
"1.國內(nèi)高三在讀（完成高二學業(yè)水平測試）或高中畢業(yè)（或同等學歷：中專，職高，技校），具有高中畢業(yè)證，高中藝術特長；
2.韓語TOPIK三級（可在韓國語學堂完成韓語學習）；
3.表演藝術學部 : 一定量的對詞及指定表演。 "
],
"project": [
"藝形者培訓項目，境外升學輔導課程-點擊了解"
]
}]
}
}
]
當然這只是數(shù)組中的一條數(shù)據(jù)，其他的還有很多條，但是結(jié)構(gòu)都一樣，這里一定要多用數(shù)組類型的json，因為需要對數(shù)據(jù)進行遍歷，用對象就比較麻煩，所以我將很多數(shù)據(jù)內(nèi)容都寫成了數(shù)組，只有最底層的具體內(nèi)容才寫作對象，然后在模板引擎中調(diào)用起來很方便。另外提示一下，模板引擎自帶遍歷功能：模板引擎如何遍歷json中的數(shù)據(jù) ，所以對象中的具體內(nèi)容直接讓模板引擎遍歷就好了，不用自己造輪子。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107402.html
摘要：概述數(shù)據(jù)字典主要解決下拉框數(shù)據(jù)填充和數(shù)據(jù)表格轉(zhuǎn)義處理，一個數(shù)據(jù)字典可以多處使用。通過服務端異步請求加載數(shù)據(jù)列表。 概述 數(shù)據(jù)字典主要解決下拉框數(shù)據(jù)填充和數(shù)據(jù)表格轉(zhuǎn)義處理，一個數(shù)據(jù)字典可以多處使用。 1.多個頁面下拉框使用同樣的數(shù)據(jù)，改一個地方需要把所有頁面都要修改 2.數(shù)據(jù)表格轉(zhuǎn)義代替自己手動寫templet解析模板數(shù)據(jù)字典提供一個通用的處理方式，支持配置靜態(tài)數(shù)據(jù)字典和動態(tài)數(shù)據(jù)...
摘要：概述數(shù)據(jù)字典主要解決下拉框數(shù)據(jù)填充和數(shù)據(jù)表格轉(zhuǎn)義處理，一個數(shù)據(jù)字典可以多處使用。通過服務端異步請求加載數(shù)據(jù)列表。 概述 數(shù)據(jù)字典主要解決下拉框數(shù)據(jù)填充和數(shù)據(jù)表格轉(zhuǎn)義處理，一個數(shù)據(jù)字典可以多處使用。 1.多個頁面下拉框使用同樣的數(shù)據(jù)，改一個地方需要把所有頁面都要修改 2.數(shù)據(jù)表格轉(zhuǎn)義代替自己手動寫templet解析模板數(shù)據(jù)字典提供一個通用的處理方式，支持配置靜態(tài)數(shù)據(jù)字典和動態(tài)數(shù)據(jù)...
摘要：而由于沒有后端的數(shù)據(jù)支持，所有的數(shù)據(jù)都在表格中展示，所以需要將表格中的數(shù)據(jù)轉(zhuǎn)為數(shù)據(jù)，再通過讀取，然后用模板引擎渲染到頁面上。 showImg(https://segmentfault.com/img/bV3N8M?w=1574&h=692);如圖所示，是一個動態(tài)的表格，內(nèi)容數(shù)量不定第一層分類是專業(yè)大類的分類，第二層分類的國家的分類，第三層分類是具體專業(yè)名的分類（就是不同的色塊欄），甚至...
閱讀 2764·2021-11-22 13:54
閱讀 2700·2021-10-14 09:42
閱讀 4046·2021-09-28 09:47
閱讀 2171·2021-09-03 10:28
閱讀 1217·2021-07-26 23:38
閱讀 2566·2019-08-30 15:54
閱讀 2647·2019-08-29 16:35
閱讀 1437·2019-08-29 15:42
