动态数据的表格页面展示

最新推荐文章于 2022-06-30 15:54:42 发布

weixin_34212762

最新推荐文章于 2022-06-30 15:54:42 发布

阅读量1.1k

点赞数

文章标签：前端 javascript 后端 ViewUI

原文链接：https://segmentfault.com/a/1190000013262707

版权

图片描述
如图所示，是一个动态的表格，内容数量不定第一层分类是专业大类的分类，第二层分类的国家的分类，第三层分类是具体专业名的分类（就是不同的色块栏），甚至还有具体的院校名分类。而由于没有后端的数据支持，所有的数据都在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中的数据，所以对象中的具体内容直接让模板引擎遍历就好了，不用自己造轮子。

weixin_34212762

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫