Spread欧洲杯之旅-Spread.Views赛程表

Spread大家族中有多了一位成员-Spread.Views。SpreadJS视图(Spread.Views)是一个创新的高性能纯前端JavaScript控件，它帮助用户轻松实现灵活多变的数据布局和呈现。适逢2016法国欧洲，我们用Spread.Views快速制作一份小组赛的赛程表来展现Spread.Views的魅力。

图中效果就是用Spread.Views TimelineStrategy功能制作的，下面我们介绍下详细步骤。

1. 引用Spread.Views 资源

<script type="text/javascript" src="./zepto.min.js"></script>
<script src="./spreadjs/views/js/dataview.min.js" type="text/javascript"></script>
<script src="./spreadjs/views/js/plugins/globalize.min.js" type="text/javascript"></script>
<script src="./spreadjs/views/js/plugins/formatter.min.js" type="text/javascript"></script>
<script src="./spreadjs/views/js/plugins/functions.min.js" type="text/javascript"></script>
<script src="./spreadjs/views/js/plugins/gridLayoutEngine.min.js" type="text/javascript"></script>
<script src="./spreadjs/views/js/plugins/timelineStrategy.min.js" type="text/javascript"></script>

其中timelineStrategy.js用户时间轴展示，gridLayoutEngine.js用于数据分组，我们需要将比赛数据按比赛时间进行分组。

2. 设置容器

    <div id="gridContainer" style="height:420px;">
        <div id="grid1" style="height:100%;margin:10px auto; position: relative;width:95%"></div>
    </div>

3. 设置时间轴数据绑定

        var columns = [
        {
            id: 'datetime',
            dataField: 'datetime',
            format: 'MMMM dd, HH:mm tt'
        },
        {
            id: 'time',
            dataField: 'datetime',
            format: 'HH:mm tt'
        }, {
            id: 'type',
            dataField: 'type',
            format: timeFormatter
        }, {
            id: 'speaker',
            dataField: 'speaker'
        }, {
            id: 'content',
            dataField: 'content'
        }, {
            id: 'countryA',
            dataField: 'countryA',
        },{
            id: 'countryB',
            dataField: 'countryB',
        }];

4. 设置时间分组Header和比赛信息模板

        var groupSummaryEventTemplate = '<div class="template_detial">' +
            '<div class="country_detail result_{{=it.resultA}}" ><span class="employee-photo"><img src={{=it.countryA.Flag}} /></span><span class="country_name">{{=it.countryA.Name}}</span><span class="country_score">{{=it.scoreA}}</span></div>' +
            '<div class="country_detail result_{{=it.resultB}}" ><span  class="employee-photo"><img src={{=it.countryB.Flag}} /></span><span class="country_name">{{=it.countryB.Name}}</span><span class="country_score">{{=it.scoreB}}</span></div>' +
            '<div class="action_title">' +
            '<div>{{=it.type}}</div>' +
            '<div>{{=it.time}}' +
            '</div>'
        '</div>'
        var groupHeaderMiddleTemplate = '<div>' +
            '<div style="top:12px;text-align: center;">' +
            '<div>' +
            '<div style="font-size:12px;display: inline-block;background: #ffffff;color:#131313;padding:5px;border-top:3px solid red; border-left: 1px solid rgba(208, 209, 206, 0.99);border-right: 1px solid rgba(208, 209, 206, 0.99);border-bottom: 1px solid rgba(208, 209, 206, 0.99)">' +
            '<div>{{=it.name}}</div>' +
            '</div>' +
            '</div>' +
            '</div></div>';

5. 绑定数据，大功告成

                var excelFormatter = new GC.Spread.Views.DataView.Plugins.Formatter.ExcelFormatter('mm/dd');
                //triangle
                var timeLinestrategy = new GC.Spread.Views.DataView.Plugins.TimelineStrategy({});
                dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), schedule, columns, new GC.Spread.Views.DataView.Plugins.GridLayoutEngine({
                    grouping: {
                        field: 'datetime',
                        converter: function(field) {
                            return excelFormatter.format(field);
                        },
                        header:{
                            visible: true,
                            template: groupHeaderMiddleTemplate,
                            height: 35
                        }
                    },
                    rowHeight: 90,
                    rowTemplate: groupSummaryEventTemplate,
                    groupStrategy: timeLinestrategy
                }));

一切就这么简单，有了Spread.Views我们可以方便快捷的构建自己页面，将更多精力投入到产品的功能之中。

RunJS在线演示地址：http://runjs.cn/detail/2bu8emmq

更多资源

Spread.Views在线示例：http://demo.grapecity.com.cn/spreadjs/views/#/

Spread.Views在线英文产品文档：http://sphelp.grapecity.com/WebHelp/SpreadViews/#SpreadJS.ViewsDocumentation.html

如果您对Spread.Views产品感兴趣，可以到官方网站下载试用：/developer/spreadjs/views

如果你有疑问，可以到GCDN论坛获得技术支持：http://gcdn.grapecity.com.cn