强大的甘特图拥有高达10种的日期模式

原创

LLinda2008 2010-01-20 15:46:16 ©著作权

文章标签 项目管理 project 休闲甘特图 gantt 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者LLinda2008的原创作品，请联系作者获取转载授权，否则将追究法律责任

易度甘特图提供了10种日期模式，如下：

年/季，年/月，年/周，季/月，季/周，季/天，月/周，月/天，周/天

默认的日期模式是“周/天”。

在生成甘特图的时候，可以改变日期模式，如下：

project = Edo.create({    
    type: 'ganttview',
    dateView: 'year-week',  //日期模式
    width: 700,
    height: 400,        
    render: document.getElementById('example-view')
});

在创建完甘特图之后，可以在运行时切换甘特图的日期模式，下面用一个按钮菜单来切换10种日期模式：

Edo.create({    
    type: 'box',
    render: document.getElementById('example-view'),
    children: [
        {
            type: 'group',
            cls: 'e-toolbar',                        
            layout: 'horizontal',
            children: [
                {
                    type: 'button',
                    id: 'dateviewBtn',
                    text: '日期 : 周/天',        
                    arrowMode: 'menu',
                    menu: [
                        {
                            type: 'button',
                            text: '年/季',
                             function(e){
                                project.set('dateView', 'year-quarter');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text: '年/月',
                             function(e){
                                project.set('dateView', 'year-month');
                                
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text: '年/周',
                             function(e){
                                project.set('dateView', 'year-week');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text: '年/天',
                             function(e){
                                project.set('dateView', 'year-day');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text:'季/月',
                             function(e){
                                project.set('dateView', 'quarter-month');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text:'季/周',
                             function(e){
                                project.set('dateView', 'quarter-week');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text:'季/天',
                             function(e){
                                project.set('dateView', 'quarter-day');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text: '月/周',
                             function(e){
                                project.set('dateView', 'month-week');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text: '月/天',
                             function(e){
                                project.set('dateView', 'month-day');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        },{
                            type: 'button',
                            text: '周/天',
                             function(e){
                                project.set('dateView', 'week-day');
                                dateviewBtn.set('text', '日期 : '+this.text);
                            }
                        }
                    ]
                }
            ]
        }
    ]
});