普加甘特图支持如下数据类型的列:
- 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");
效果图如下: