EdoGantt甘特图中间件自定义任务列

EdoGantt甘特图中间件:

.code { border:solid 1px #ccc; padding:5px; margin:5px; margin-left:15px; margin-right:15px; line-height:18px; }

    

易度甘特图默认提供的列如下：

project.tree.set('columns', [{
    header: 'edo甘特图 - <a href="http://www.edojs.com" target="_blank">www.edojs.com</a>',
    columns: [
        //ID:索引号
        Edo.project.GanttView.createColumn('ID'),
        //状态
        Edo.project.GanttView.createColumn('status'),
        //任务名称
        Edo.project.GanttView.createColumn('name'),
        //工期
        Edo.project.GanttView.createColumn('DURATION'),
        //完成百分比
        Edo.project.GanttView.createColumn('PERCENTCOMPLETE'),
        //开始日期
        Edo.project.GanttView.createColumn('START'),
        //完成日期
        Edo.project.GanttView.createColumn('FINISH'),
        //任务相关性
        Edo.project.GanttView.createColumn('PredecessorLink'),
        //资源分配
        Edo.project.GanttView.createColumn('ASSIGNMENT')
    ]
}]);

    对应的效果图如下：

 

    你可以 使用易度提供的标准列，自定义显示哪些列，以及列的顺序，如下：

project.tree.set({
    columns:[{
        header: '使用易度甘特图提供的标准列自定义列',
        columns: [
            Edo.project.GanttView.createColumn('ID'),
            Edo.project.GanttView.createColumn('name'),
            Edo.project.GanttView.createColumn('DURATION'),                
            Edo.project.GanttView.createColumn('START'),
            Edo.project.GanttView.createColumn('FINISH')
        ]
    }]
});

    效果图如下：

 

    你也可以完全自定义列，自己编写任务属性的renderer单元格渲染器，代码如下：

project.tree.set({
    treeColumn: 'createdate',
    autoColumns: true,
    columns: [
        {
            header: '易度甘特图',
            columns: [
                {
                    header: '创建日期',
                    id: 'createdate',
                    dataIndex: 'CreateDate',
                    editor: {                       //自定义列编辑器
                        type: 'date'
                    },
                    renderer: function(v, r, c){    //自定义列渲染器
                        return v.format('Y-m-d');
                    }
                },
                {
                    header: '任务名称',
                    dataIndex: 'Name',
                    editor: {
                        type: 'text'
                    },
                    renderer: function(v, r, c){
                        return '<span style="color:blue;">'+v+'</span>';
                    }
                },
                {
                    header: '解决人',
                    dataIndex: 'Assignments',
                    renderer: function(v, r, c, colIndex, data, tree){
                        if(v && v.length){
                            var s = "";
                            for(var i=0,l=v.length; i<l; i++){
                                var uid = v[i].ResourceUID;
                                if(uid > 0) {
                                    s += project.data.getResource(uid).Name;
                                    if(i != l-1) s += ',';
                                }
                            }
                            return s;
                        }                                                
                    }
                }
            ]
        }                        
    ]
});   

    对应的效果图如下：