动态数据的表格页面展示

如图所示，是一个动态的表格，内容数量不定第一层分类是专业大类的分类，第二层分类的国家的分类，第三层分类是具体专业名的分类（就是不同的色块栏），甚至还有具体的院校名分类。而由于没有后端的数据支持，所有的数据都在excel表格中展示，所以需要将表格中的数据转为json数据，再通过ajax读取，然后用模板引擎渲染到页面上。

这里需要注意的是json的数据内容一定要和模板的内容互相匹配，这里需要引用的有jQuery，Boostrap,art-Template,将css和js引入后，话不多说，先从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>&nbsp;陕西新东方前途出国</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">澳大利亚&nbsp;|&nbsp;新西兰</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>&nbsp;&nbsp;|&nbsp;&nbsp;有问必答</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>&nbsp;</p><p>&nbsp;</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/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;十字东南角）</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模板引擎渲染数据的小方法。

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": ["<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中的数据，所以对象中的具体内容直接让模板引擎遍历就好了，不用自己造轮子。

动态数据的表格页面展示相关推荐

根据后台的数据设置前端页面展示效果
2019独角兽企业重金招聘Python工程师标准>>> eg1:后台数据:0:女,1:男: 前端展示效果为:男或女,而不是显示0或1 eg2:后台数据:1:模组1, 2:模组2 ...
php漂亮显示数据库页面,通过PHP读取mysql数据库数据，在页面展示
作者博客: 昨天实现了通过PHP向mysql中插入数据,今天咱们就实现通过php从mysql中将数据读出来展现在页面. 代码: 话不多说,直接上代码小泊随記-留言板 table{ border: 1 ...
微信小程序——修改缓存数据，更新页面展示
项目需求大概是这样的一个流程,当用户点击"选为当前设备",点击的那个按钮变为灰色按钮且展示的文字是"当前设备",其他的按钮展示成"选为当前设备&qu ...
Froala Editor 插入的表格页面展示问题样式消失
在froala编辑器里显示表格样式如下: 但是获取的html,拿出来显示样式却丢了处理方法: 在显示界面引入 froala_style.min.css文件绘制html的区域的容器引用 fr ...
html页面展示json数据并格式化
json数据在html页面展示并格式化一.展现效果图描述信息: key值全部采用红色标出,表示重要参数: value值采用不同颜色标出,数值类型的采用橘黄色,字符串采用绿色,布尔采用蓝色... 二 ...
ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2
运行效果: 此文介绍了根据操作左侧菜单在右面板展示相应内容. 一.主页先看一下跳转主页的方式:由在webapp根目录下的index.jsp跳转至demo的index.jsp 下面是demo的inde ...
使用该JavaBean可以将数据在JSP页面中以表格的形式显示出来并具有动态排序动态生成查询自动分页功能
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 使用该类 ...
table表格的使用(动态数据展示)
# table表格的使用(动态数据展示) ## 第一种方式<el-table :data="tableDataalllist" border style="widt ...
Ajax实现动态及时刷新表格数据
大家好,我是雄雄,今天分享的技术很简单,即ajax结合jdbc动态实现及时刷新表单数据. 前言:相信大家在网上冲浪的时候,肯定会发现这样的场景,在实现某个查询功能时,下方表格中会显示需要展示的结果,当 ...
EasyUI DataGrid DetailView（数据表格详细展示带子表格）
Mark一下EASY UI 的数据表格详细展示使用记录. 第一步:创建页面布局这一步主要是引用Easy UI的JS,除了easyui.min.js还有datagrid-detailview.js & ...

动态数据的表格页面展示

动态数据的表格页面展示相关推荐

最新文章

热门文章