自定义表格列 示例demo/diyColumns.html****
上文介绍了标准列，这里介绍一下自定义列。
正如标准列是一些预设好的对象，自定义列也是一个对象。
支持多种数据类型的列：String、Number、Boolean、Date、Array等
支持多种单元格编辑器：TextBox、Spinner、CheckBox、DatePicker、ComboBox、TreeSelect等
支持任意扩展任务属性
var project = new PlusProject();
var columns = [];
//可以使用标准列: "状态列", 也可以使用其他的
columns.push(new PlusProject.IDColumn());
columns.push(new PlusProject.StatusColumn());
//以下进行自定义列, 演示各种数据类型对应使用什么列
//String
var stringColumn = {
name: "name",
header: "任务名称<br/>String",
field: "Name", //OutlineNumber
width: 150,
editor: {
type: "textbox"
}
};
columns.push(stringColumn);
//Number
var numberColumn = {
header: "进度<br/>Number",
field: "PercentComplete",
width: 60,
editor: {
type: "spinner", minValue: 0, maxValue: 100/*, decimalPlaces: 2*/
}
};
columns.push(numberColumn);
//Date
var dateColumn = {
header: "开始日期<br/>Date",
field: "Start1",
name:"Start1",
width: 100,
renderer: function (e) {
var date = e.value;
if (!date) return "";
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
//return e.task.Duration * e.task.XXXX;
//return '<img />';
},
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,
autoShowPopup: true, //编辑时自动下拉
editor: {
id: 'aa',
type: "combobox", valueField: "id", displayField: "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,
autoShowPopup: true, //点击单元格自动下拉选择
editor: {
type: "combobox", valueField: "id", displayField: "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);
//TextBoxList 模糊多选输入框
var textBoxListColumn = {
header: "公司<br/>TextBoxList",
field: "Company",
displayField: "CompanyName",
width: 120,
editor: {
type: "textboxlist", valueField: "id", textField: "company",
url: "filterdata.aspx"
}
};
columns.push(textBoxListColumn);
project.setColumns(columns);
project.setTreeColumn("name");
project.render(document.getElementById("viewCt"));
