動態數據的表格頁面展現
如圖所示，是一個動態的表格，內容數量不定第一層分類是專業大類的分類，第二層分類的國家的分類，第三層分類是具體專業名的分類（就是不一樣的色塊欄），甚至還有具體的院校名分類。而因爲沒有後端的數據支持，全部的數據都在excel表格中展現，因此須要將表格中的數據轉爲json數據，再經過ajax讀取，而後用模板引擎渲染到頁面上。css
這裏須要注意的是json的數據內容必定要和模板的內容互相匹配，這裏須要引用的有jQuery，Boostrap,art-Template,將css和js引入後，話很少說，先從HTML開始：html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="render" content="webkit">
<meta name="keywords" content="出國留學,研究生留學,留學研究生，出國讀研,美國研究生,英國研究生,歐洲研究生,澳洲研究生,日本研究生,藝術生留學,法國留學,歐洲留學,意大利留學,德國留學" />
<meta name="description" content="藝術生申請留學有哪些要求？藝術生怎麼申請留學？歐洲留學有什麼要求？出國留學必需要雅思合格？" />
<meta name="copyright" content="本網站版權歸陝西新東方前途出國諮詢有限公司全部" />
<meta name="revisit-after" content="1 days">
<title>藝考生留學指南</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">
<link href="favicon.ico" mce_href="favicon.ico" rel="bookmark" type="image/x-icon" />
<link href="favicon.ico" mce_href="favicon.ico" rel="icon" type="image/x-icon" />
<link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<!--集團統計開始-->
<!--neworiental全站異步 google分析開始-->
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20005525-1']);
_gaq.push(['_setDomainName', '.xdf.cn']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_setAllowHash', false]);
_gaq.push(['_addOrganic', 'baidu', 'word']);
_gaq.push(['_addOrganic', '360', 'q']);
_gaq.push(['_addOrganic', 'so.com', 'q']);
_gaq.push(['_addOrganic', 'soso', 'w']);
_gaq.push(['_addOrganic', 'yodao', 'q']);
_gaq.push(['_addOrganic', 'sogou', 'query']);
_gaq.push(['_addOrganic', 'gougou', 'search']);
_gaq.push(['_addOrganic', 'so.360.cn', 'q']);
_gaq.push(['_addOrganic', 'haosou', 'q']);
_gaq.push(['_setLocalGifPath', 'http://ads.staff.xdf.cn/_.gif']);
_gaq.push(['_setLocalRemoteServerMode']);
_gaq.push(['_trackPageview']);
</script>
<!-- google分析結束-->
</head>
<body>
<header class="content ">
<div class="container top">
<a href="http://liuxue.xdf.cn/xian/" target="_blank">
<img class="logo" src="./img/logo.png" alt="陝西新東方前途出國">
</a>
<span class="copyright">
<span class="glyphicon glyphicon-copyright-mark"></span>
<span> 陝西新東方前途出國</span>
</span>
</div>
</header>
<nav class="majors container">
<ul>
<li class="active art">
<img src="./img/art.png" alt="美術類">
<span class="text">
<p>美術類</p>
<p>Art</p>
</span>
<div class="mask"></div>
</li>
<li class="broadcaster">
<img src="./img/broadcaster.png" alt="播音編導類">
<span class="text">
<p>播音編導類</p>
<p>Broadcaster</p>
</span>
<div class="mask"></div>
</li>
<li class="music">
<img src="./img/music.png" alt="音樂類">
<span class="text">
<p>音樂類</p>
<p>Music</p>
</span>
<div class="mask"></div>
</li>
<li class="dance">
<img src="./img/dance.png" alt="舞蹈類">
<span class="text">
<p>舞蹈類</p>
<p>Dancet</p>
</span>
<div class="mask"></div>
</li>
<li class="performance" style="margin-right: 0;">
<img src="./img/performance.png" alt="表演類">
<span class="text">
<p>表演類</p>
<p>Performance</p>
</span>
<div class="mask"></div>
</li>
</ul>
</nav>
<section class="center" style="overflow:hidden">
<nav class="container">
<ul class="countries">
<li id="Americia">美國</li>
<li id="England">英國</li>
<li id="Canada">加拿大</li>
<li id="Austrilia">澳大利亞 | 新西蘭</li>
<li id="Europe">歐洲</li>
<li id="Asia">亞洲</li>
</ul>
</nav>
<section class="articles">
</section>
<script id="template" type="text/html">
<article class="container">
<aside class="professional-direction">
<div class="professional">{{@ items.professional}}</div>
<div class="line">—</div>
<div class="direction">{{@ items.direction}}</div>
</aside>
<table class="table-responsive table-borded">
<thead>
<tr class='yuanxiao'>
<td>院校
<br>推薦</td>
{{each items.university as value index}}
<td class="university">{{@ items.university[index]}}</td>
{{/each}}
</tr>
</thead>
<tbody>
<tr class='yaoqiu'>
<td>錄取
<br>要求</td>
{{each items.standards as velue index}}
<td class="standards">{{@ items.standards[index]}}</td>
{{/each}}
</tr>
<tr class='xiangmu'>
<td>推薦
<br>項目</td>
{{each items.project as velue index}}
<td class="standards">{{@ items.project[index]}}</td>
{{/each}}
</tr>
</tbody>
</table>
</article>
</script>
</section>
<div class="assessment container">
<img src="./img/QA_bg1.jpg" alt="">
<a class="ask" href="http://xdfvision.mikecrm.com/DcJYFuW" target="_blank">
<img src="./img/QA_icon.png" alt="">
<span> | 有問必答</span>
</a>
</div>
<footer>
<!--返回頂部-->
<div class="toTop">
<img src="img/toTop.png" alt="返回頂部" />
</div>
<!--右側樂語彈窗start-->
<div class="leyuu">
<a onclick="openWin()">
<img src="./img/kefu.png" alt="樂語">
</a>
</div>
<div class="container">
<div class="pccss row">
<div class="col-md-4 lis">
<img class="logo" src="img/logo2.png" alt="陝西新東方前途出國" />
<p>新東方前途出國諮詢有限公司是新東方旗下惟一從事出國留學服務的專職機構。</p>
<p>新東方前途出國諮詢有限公司立志於提供專業的國際教育服務，幫助每一位夢想出國的學生實現本身的夢想，打形成專業、權威、誠信的留學服務旗艦品牌。</p>
</div>
<div class="col-md-4 lis ">
<div class="links">
<p class="bot_title" style="padding-top: 0;">友情連接</p>
<span>
<a href="http://www.xdf.cn" target="_blank">新東方官方網站</a>
</span>
<span>
<a href="http://www.koolearn.com" target="_blank">新東方在線</a>
</span>
<span>
<a href="http://liuxue.xdf.cn/xian" target="_blank">新東方前途出國
<br/>
</a>
</span>
<span>
<a href="http://liuxue.xdf.cn/special/branch/xian/application_plan/" target="_blank">考研後留學</a>
</span>
</div>
<div class="tuiguang">
<p class="bot_title">推廣平臺</p>
<span>
<a href="http://v.qq.com/vplus/08f47dc35a83e34bcfd603be13eae39a" target="_blank">騰訊視頻</a>
</span>
<span>
<a href="https://weibo.com/xianqiantu?refer_flag=1001030101_" target="_blank">新浪微博</a>
</span>
<p> </p>
<p> </p>
</div>
</div>
<div class="col-md-4 lis">
<div class="qr">
<span class="wechat">
<img src='img/wechat.png' />
</span>
<span class="weibo">
<img src="img/weibo.png" />
</span>
<img class="qrwechat" src="img/qr_wechat.png" alt="" />
<img class="qrweibo" src="img/qr_weibo.png" alt="" />
</div>
<div class="con">
<p class="bot_title" style="opacity: 1;">陝西新東方前途出國</p>
<p class="tel">電話：029-87203365</p>
<p class="adress">地址：西安市高新區林凱國際10層（科技路與高新二路
<br/> 十字東南角）</p>
<p class="copyright1">Copyright © 2017-2018 陝西新東方前途出國</p>
</div>
</div>
</div>
</div>
</footer>
<script src="./lib/jquery1.11.3.js"></script>
<script src="./lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="./lib/template-web.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
如上所示，爲所有HTML，其中id爲template的就是模板引擎的模板啦，將整個表格部分都看作爲模板引擎以內的內容，變量部分就是須要在json中寫上的內容，關於art-template的語法，能夠看art_template模板引擎渲染數據的小方法。jquery
css 部分很少說。web
JS內容以下：ajax
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
JSON的數據，這須要本身來梳理，略複雜，我梳理後效果是這樣：bootstrap
[{
"Performance": {
"Americia": [{
"professional": "暫無",
"direction": " ",
"university": [
"暫無"
],
"standards": [
"暫無"
],
"project": [
"<a onclick='openWin()'>點擊瞭解</a>"
]
}],
"England": [{
"professional": "戲劇",
"direction": " Drama",
"university": [
"倫敦大學皇家霍洛威學院",
"埃克塞特大學",
"華威大學",
"布里斯托大學"
],
"standards": [
"雅思5.0，寫做5.0；<br>高中三年平均成績75分以上",
"雅思5.5，單項不低於5.0，<br>高中三年平均成績75分以上",
"雅思5.5，單項不低於5.5；<br>高中三年平均成績85分以上",
"雅思6.0，寫做5.5，其餘不低於5.0；<br>高中三年平均成績80分以上"
],
"project": [
"<a onclick='openWin()'>點擊瞭解</a>"
]
}],
"Canada": [{
"professional": "暫無",
"direction": " ",
"university": [
"暫無"
],
"standards": [
"暫無"
],
"project": [
"<a onclick='openWin()'>點擊瞭解</a>"
]
}],
"Austrilia": [{
"professional": "暫無",
"direction": " ",
"university": [
"暫無"
],
"standards": [
"暫無"
],
"project": [
"<a onclick='openWin()'>點擊瞭解</a>"
]
}],
"Europe": [{
"professional": "藝術<br>音樂與表演",
"direction": " Art music <br> performance",
"university": [
"意大利博洛尼亞大學，羅馬三大"
],
"standards": [
"1. 高考文化課300分以上，高中畢業；<br>2. 意大利語A2水平，計劃生"
],
"project": [
"<a onclick='openWin()'>點擊瞭解</a>"
]
}],
"Asia": [{
"professional": "戲劇<br>電影",
"direction": "Dramas <br> Movies",
"university": [
"韓國：韓國慶熙大學，韓國中央大學，韓國建國大學等"
],
"standards": [
"1.國內高三在讀（完成高二學業水平測試）或高中畢業（或同等學歷：中專，職高，技校），具備高中畢業證，高中藝術特長；<br>2.韓語TOPIK三級（可在韓國語學堂完成韓語學習）；<br>3.表演藝術學部 : 必定量的對詞及指定表演。 "
],
"project": [
"<a onclick='openWin()'>藝形者培訓項目，境外升學輔導課程-點擊瞭解</a>"
]
}]
}
}
]
固然這只是數組中的一條數據，其餘的還有不少條，可是結構都同樣，這裏必定要多用數組類型的json，由於須要對數據進行遍歷，用對象就比較麻煩，因此我將不少數據內容都寫成了數組，只有最底層的具體內容才寫做對象，而後在模板引擎中調用起來很方便。另外提示一下，模板引擎自帶遍歷功能：模板引擎如何遍歷json中的數據 ，因此對象中的具體內容直接讓模板引擎遍歷就行了，不用本身造輪子。segmentfault
相關文章
- 1. layui動態數據表格-分頁
- 2. 解決動態渲染頁面表格
- 3. echarts動態展現數據
- 4. element-ui表格+分頁器數據分頁展現
- 5. MySQL+Service+Servlet+Jsp實現Table表格分頁展現數據
- 6. 完成數據的頁面展現
- 7. html獲取頁面動態加載表格中的行列的數據值
- 8. 數據綁定頁面表格
- 9. 頁面數據表格回填
- 10. JSON數據填充到頁面表格
- 更多相關文章...
- • XSL-FO 頁面 - XSL-FO 教程
- • jQuery Mobile 頁面 - jQuery Mobile 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Flink 數據傳輸及反壓詳解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. layui動態數據表格-分頁
- 2. 解決動態渲染頁面表格
- 3. echarts動態展現數據
- 4. element-ui表格+分頁器數據分頁展現
- 5. MySQL+Service+Servlet+Jsp實現Table表格分頁展現數據
- 6. 完成數據的頁面展現
- 7. html獲取頁面動態加載表格中的行列的數據值
- 8. 數據綁定頁面表格
- 9. 頁面數據表格回填
- 10. JSON數據填充到頁面表格