自定义列和标准列 - 开发教程 - 项目管理

自定义列和标准列

EdoProject提供了一些实现了通用任务显示和编辑逻辑的列,称为“标准列”。
这些列有的比较简单,如任务名称列,只是一个Name属性的显示和编辑。
有些列比较复杂,如状态列"STATUS",根据任务的多个属性(PercentComplete、Milestone、Notes和ConstraintType、ConstraintDate)显示不同的图标;比如资源分配列 ,提供了下拉多选的方式分配资源;比如前置任务列,提供了输入ID快速设置前置任务的编辑操作,等等。

用户可以使用标准列自定义,也可以自己来实现全新的列来自定义任务树。

标准列

EdoProject提供的标准列如下:

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

效果图如下:

标准列自定义

您可以使用EdoProject的标准列,自定义显示哪些列,以及列的顺序,如下:

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

效果图如下:

完全自定义列

您也可以完全自定义列,自己编写单元格渲染器和编辑器,示例如下:

project.tree.set({
    treeColumn: 'createdate', autoColumns: true,    
    columns: [
        {
            header: '易度甘特图',
            columns: [
                {
                    id: 'createdate', header: '创建日期', 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: 'Start',
                    renderer: function(v, r, c, colIndex, data, tree){
                        return v.format('Y-m-d');                                          
                    }
                }
            ]
        }                        
    ]
});   

效果图如下:

列的增加和删除

以上说明的是对任务树列配置对象的整体设置,如果我们想基于一个已有的列配置对象,想增加和删除列,请参考如下代码:

//获得任务树的原始列配置对象
var columns = project.tree.groupColumns;
//新增列
columns[0].columns.insert(0, {
    header: '部门',
    dataIndex: 'Department'    
});
//删除已有列
columns[0].columns.removeAt(2);
//将修改后的列配置对象, 设置给任务树的columns属性
project.tree.set('columns', columns);

标准列 — 状态列(STATUS)的扩展

状态列是一个比较特殊的列。其他的列一般是对单个属性进行显示和操作,而状态列反应的是任务的状态,根据任务的多个属性(PercentComplete、Milestone、Notes和ConstraintType、ConstraintDate)显示不同的图标和信息。

当人们想显示任务的状态和信息时,可以完全自定义一个列来实现,也可以通过扩展状态列的渲染逻辑,在保留状态列默认状态逻辑的同时,增加自己的状态逻辑,下面有一段示例代码如下:

//1)获得状态列
var column = project.tree.groupColumns[0].columns[1];
//2)保留状态列原有的渲染器函数
var fn = column.renderer;
//3)给状态列增加新的渲染器
column.renderer = function(v, r){
    //4)使用原有的渲染器, 得到一个HTML字符串
    var html = fn.apply(null, arguments);
    if(r.Duration < 8) {    //小于1个工作日的,予以警示.(您也可以附加自己的逻辑)
        html = html.substr(0, html.length - "</div>".length)
        html += "<div style='float:left;width:16px;height:18px;background:url(warning-icon.gif) no-repeat center 2px;'></div>";
        html += "</div>";
    }
    return html;
}

效果图如下:

这段代码的思路是:获得官方的"状态列",然后覆盖渲染器函数,增加自己的图标显示逻辑。

这样,在保留状态列原有逻辑的基础上,增加了自己的显示逻辑。

注意:EdoProject的任务树,就是TreeGrid对象。因此,所有TreeGrid的功能特性,都可以反映到EdoProject任务树上。
开发者可以查看TreeGrid的教程和示例,从而更好扩展和自定义任务树。