Web甘特图开发系列：(四) 自定义列

普加甘特图支持如下数据类型的列：

• String。字符串。
• Number。数字。
• Boolean。布尔值。
• Date。日期。
• Array。单选数组。
• Array。多选数组。
• Array。树形选择。

支持如下类型的编辑器：

• TextBox：文本编辑器。
• Spinner：数字编辑器。
• CheckBox：复选框编辑器。
• DatePicker：日期编辑器。
• ComboBox：下拉选择框编辑器，支持单选、多选。
• TreeSelect：树形下拉框编辑器。
• 其他：AutoComplete、TextBoxList等。

 

下面自定义各种数据类型的列，代码如下：

var columns = [];
//String => TextBoxColumn
var stringColumn = {
    name: "name",
    header: "任务名称<br/>String",
    field: "Name",
    width: 150,
    editor: {
        type: "textbox"
    }
};
columns.push(stringColumn);
//Number => NumericUpDownColumn
var numberColumn = {
    header: "进度<br/>Number",
    field: "PercentComplete",
    width: 60,
    editor: {
        type: "spinner", minValue: 0, maxValue: 100
    }
};
columns.push(numberColumn);
//Date => DatePickerColumn
var dateColumn = {
    header: "开始日期<br/>Date",
    field: "Start",
    width: 100,
    renderer: function (e) {
        var date = e.value;
        if (!date) return "";
        return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
    },
    editor: {
        type: "datepicker"
    }
};
columns.push(dateColumn);
//Boolean => CheckBoxColumn
var boolColumn = {
    header: "关键任务<br/>Boolean",
    field: "Critical",
    width: 70,
    type: "checkboxcolumn",
    trueValue: 1,
    falseValue: 0
};
columns.push(boolColumn);
//Array => ComboBoxColumn
var TaskStatus = [
    { id: 1, name: '未启动' },
    { id: 2, name: '进行中' },
    { id: 3, name: '暂停中' },
    { id: 4, name: '已完成' }
];
var arrayColumn = {
    header: "任务状态<br/>Array",
    field: "TaskStatus",
    width: 120,
    editor: {
        type: "combobox", valueField: "id", textField: "name",
        data: TaskStatus
    },
    renderer: function (e) {
        var value = e.value;
        for (var i = 0, l = TaskStatus.length; i < l; i++) {
            var o = TaskStatus[i];
            if (o.id == value) return o.name;
        }
        return "";
    }
};
columns.push(arrayColumn);
//Multi => ComboBoxColumn
var Principals = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '赵五' },
    { id: 4, name: '钱六' }
];
var multiColumn = {
    header: "负责人<br/>Multi",
    field: "Principal",
    width: 120,
    editor: {
        type: "combobox", valueField: "id", textField: "name",
        multiSelect: true, showCheckIcon: true,
        data: Principals
    },
    renderer: function (e) {
        var values = e.value ? e.value.split(",") : [];
        var sb = [];
        for (var i = 0, l = Principals.length; i < l; i++) {
            var o = Principals[i];
            for (var j = 0, k = values.length; j < k; j++) {
                if (o.id == values[j]) {
                    sb.push(o.name);
                }
            }

        }
        return sb.join(",");
    }
};
columns.push(multiColumn);
//将列集合数组设置给甘特图
gantt.setColumns(columns);
gantt.setTreeColumn("name");

效果图如下：