普加项目管理中间件示例之二：自定义表格列

自定义表格列 示例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"));