动态数据的表格页面展现
如图所示，是一个动态的表格，内容数量不定第一层分类是专业大类的分类，第二层分类的国家的分类，第三层分类是具体专业名的分类（就是不一样的色块栏），甚至还有具体的院校名分类。而因为没有后端的数据支持，全部的数据都在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. layui动态数据表格-分页
- 2. 解决动态渲染页面表格
- 3. echarts动态展现数据
- 4. element-ui表格+分页器数据分页展现
- 5. MySQL+Service+Servlet+Jsp实现Table表格分页展现数据
- 6. 完成数据的页面展现
- 7. html获取页面动态加载表格中的行列的数据值
- 8. 数据绑定页面表格
- 9. 页面数据表格回填
- 10. JSON数据填充到页面表格