自定义任务树

在进行自定义任务树时,我们需要确定要操作的对象:

var edogantt = new EdoGantt();
var tree = edogantt.tree; //是TreeGrid对象

当我们创建完EdoGantt后,tree属性代表了左侧的任务树对象,以下的说明,都是针对此对象的。

自定义列

TreeGrid的列配置对象,描述了表头、单元格、编辑器等重要配置。
EdoGantt默认提供一个列配置对象,显示了“序号”、“任务名称”、“开始日期”、“完成日期”、“进度”等比较典型的列。

如果我们想自定义任务树列,在创建EdoGantt的时候,设置createTreeColumns方法,返回一个列配置数组即可:

var edogantt = new EdoGantt()
.set({    
    createTreeColumns: function(){
       var columns = [......]; //列配置对象
        return columns;
    }
});    

我们做了一个自定义任务树的示例,自定义了3个列,效果图如下:

通过自定义列,您可以自定义表头的内容,控制单元格的显示,以及单元格编辑器的行为。
更多TreeGrid列配置信息,请查看:TreeGrid列配置对象

自定义单元格

一个单元格的显示内容,取决于两点:

  1. dataIndex:如果配置了dataIndex,那么单元格默认显示行对象的dataIndex属性。
  2. renderer:如果有单元格渲染器,那么单元格会忽略掉dataIndex的显示功能,而只显示从renderer函数返回的HTML字符串。

其中,单元格渲染器函数renderer是最强大的单元格内容显示工具。
通过renderer函数,您可以得知是哪一行、哪一列、单元格值,并且可以结合您系统的权限,返回不同的HTML内容。
返回的HTML内容是任意的,可以是图片、超链接、按钮等。
renderer函数介绍如下:

//列数组
[   
    //列对象        
    {   
        //renderer单元格渲染器
        renderer: function(value, record, column, rowIndex, data, t){                    
           //value: 单元格值。对应record[column.dataIndex]
           //record:  行对象。是data对象的一个元素
            //column: 列对象。就是具有"header、dataIndex..."的列配置列对象本身。
            //rowIndex: 行索引号
            //data: 数据对象
            //t: 列表组件对象
            
            return "";  //返回此单元格显示的HTML内容(一般根据value和row的内容进行组织)
        }
    }
]            

更多信息,请看TreeGrid教程:单元格渲染器

自定义编辑器

如果需要快速编辑数据,就需要使用单元格编辑器。
使用单元格编辑器的代码如下:

[
    {   //列配置对象
        editor: {
            type: 'text'
        }
    }
]

单元格编辑器编辑时效果图如下:

更多信息,请看TreeGrid教程:单元格编辑器

编辑器事件

TreeGrid有三个常用编辑器事件:

  1. beforecelledit:TreeGrid开始单元格编辑前。用于控制是否使用编辑器。
  2. beforesubmitedit:单元格编辑提交前。用于验证编辑器结果验证是否通过。
  3. beforeeditstart:编辑器开始编辑前。用于动态修改编辑器的值。

请看单元格编辑器事件