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