DhtmlGantt案例-弹窗lightbox自定义字段

    
    
    
    
    





    

        

            
OA课项目开发管理
            

            

                
                     查询
                
                 保存
                
            
            

                收起
        
    



    

        

            
            

                
已完成
                

                    

                        
                            全部
                            是
                            否
                        
                    
                

                
姓名
                

                    

                        
                        
                    
                

                

                
开始日期
                

                    

                        
                        -
                        
                    
                
            
        
    

// 设置宽度
// var pObj = $("#gantt_here").parent();
// var width = pObj.width() - 10;
// $("#gantt_here").width(width);
// 设置高度
var sumWidth = $("#toolBar").height() + $("#searchBar").height();
var height = document.documentElement.clientHeight - sumWidth - 100;
$("#gantt_here").height(height);
//1.0 全局变量
var executeDefault = "0";
var solex_config = {};
solex_config.saveUrl = "/solexProjects/ganttView/ganttViewAction.jsp?urlFlag=save";
solex_config.getDataUrl = "/solexProjects/ganttView/ganttViewAction.jsp?urlFlag=search";

//2.0.1、项目信息列的样式
gantt.config.grid_width = 500;
gantt.config.add_column = false;
gantt.templates.grid_row_class = function (start_date, end_date, item) {
    if (item.lineNum == 2) return "WhiteSmoke";//偶数行,标浅黄色底色
    // if (item.progress == 0) return "nobegin";/*未开始的*/
    if (item.progress >= 1) return "green";/* 已完成的*/
};
//2.0.2、设置甘特图区域底色，需要配置自定义样式
// gantt.templates.task_row_class = function (start_date, end_date, item) {
//     if (item.progress == 0) return "nobegin";/*未开始的*/
//     if (item.progress >= 1) return "green";/* 已完成的*/
// };
//2.0.3、按周显示
// gantt.config.work_time = true;//开启周末模式
gantt.config.scale_unit = "day";
gantt.config.date_scale = "%d, %D";/*天，周*/
gantt.config.min_column_width = 60;
gantt.config.duration_unit = "day";
gantt.config.scale_height = 20 * 3;
gantt.config.row_height = 30;
//月和周的样式
var weekScaleTemplate = function (date) {
    var dateToStr = gantt.date.date_to_str("%M%d");/*3月30*/
    var weekNum = gantt.date.date_to_str("(week %W)");/*week 14*/
    var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
    return dateToStr(date) + " - " + dateToStr(endDate) + " " + weekNum(date);
};
gantt.config.subscales = [
    {unit: "month", step: 1, date: "%Y,%F"},/*2020,四月*/
    {unit: "week", step: 1, template: weekScaleTemplate}

];
//周末样式
gantt.templates.task_cell_class = function (task, date) {
    if (!gantt.isWorkTime(date))
        return "week_end";
    return "";
};
//进度条样式
gantt.templates.task_class = function (st, end, item) {
    return item.$level == 0 ? "gantt_solex" : ""
};

//2.1、自定义要展示的列：参考https://blog.csdn.net/CX_silent/article/details/83151415
gantt.config.columns = [
    {
        name: "userName", label: "被指派人", align: "center", width: 60,
        template: function (item) {
            if (!item.userName) return "未分配";
            return item.userName;
        }
    },
    {name: "text", label: "任务名称", tree: true, width: '*'},
    {name: "start_date", label: "开始时间", align: "center", width: 70},
    {name: "duration", label: "天数", align: "center", width: 40},

    {
        name: "progress", label: "进度", width: 80, align: "center",
        template: function (item) {
            if (item.progress >= 1)
                return "完成";
            if (item.progress == 0)
                return "未开始";
            return Math.round(item.progress * 100) + "%";
        }
    },
    {name: "add", label: ""}];
//2.2、自定义提示文字：应该书写在甘特图初始化之前
gantt.templates.task_text = function (start, end, task) {
    return task.text + "----" + task.userName;
};
//允许通过拖拽的方式新增任务依赖的线条
gantt.config.drag_links = false;
//允许用户推拽条形图上用来调整进度百分比的小按钮
gantt.config.drag_progress = false;
// 当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
gantt.config.fit_tasks = true;
// 定义lightbox弹出框
gantt.locale.labels.section_myuser = "被指派人";//自定义字段
gantt.config.lightbox.sections = [
    {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
    {name: "myuser", height: 40, map_to: "userName", type: "textarea", focus: true},
    {name: "time", height: 40, type: "time", map_to: "auto", time_format: ["%Y", "%m", "%d"]}/*按开始日期-结束日期显示*/
    // {name: "time", height: 40, type: "duration", map_to: "auto", time_format: ["%Y", "%m", "%d"]}/*按开始日期-周期长度显示*/
];

//3.1、加载数据
gantt.config.xml_date = "%Y-%m-%d";// 设置时间格式
gantt.init("gantt_here");//顺序很重要
//3.2、自动保存数据
var dp = new gantt.dataProcessor(solex_config.saveUrl);
dp.enableDataNames(true);
dp.setTransactionMode("POST", true);
dp.setUpdateMode("off");//是否自动保存
dp.init(gantt);


/**
 * 源码中保存方法功能实现，我就此简单给介绍一下，首先设置lightbox弹框左下角按钮save的点击事件，
 * 制定 _save_lightbox()方法，然后，在该方法中this.getLightboxValues();通过该方法可以获取该页面中修改的数据将其存储在 t中，
 * 然后调用相应事件函数，制定为save的事件，后面的代码主要就是先去判断t是否为更改的数据，然后将更改的数据，替换原来的数据，
 * 最后就this.refreshTask(t.id), this.updateTask(t.id)), this.refreshData(), this.hideLightbox()刷新然后隐藏弹框。
 * 因为dhtmlxgantt.js是公共的JS所以我们最好不要对该JS做修改，尽可能的在JSP中重写你需要更改的方法，
 * 这样当其他JSP调用dhtmlxgantt.js时，不会出现变动。
 * 原文链接：https://blog.csdn.net/weixin_42803027/java/article/details/82495191
 */
//4、基本事件：放在gantt.init方法之后
//4.1 为任务save保存之后事件，点击+按钮即可添加数据
gantt.attachEvent('onBeforeTaskAdd', function (id, item) {
    // alert("beforeAdd");
    // console.log(JSON.stringify(item));
    // 设置被指派人为当前用户
});
gantt.attachEvent('onAfterTaskAdd', function (id, item) {
    // alert("afterAdd");
    // console.log(JSON.stringify(item));
});

// 4.2、修改任务之后的事件
gantt.attachEvent("onAfterTaskUpdate", function (id, item) {
    // alert("save");
    // console.log(JSON.stringify(item));
});

// 4.3、删除任务事件
gantt.attachEvent("onAfterTaskDelete", function (id, item) {
    // alert("delete");
    // console.log(JSON.stringify(item));
});

$(function () {
    btn_search("init");
});

// 5. 按钮事件：查询
function btn_search(flag) {
    loading();
    var searchStr = jQuery('#searchForm').serialize();
    gantt.clearAll();
    var url = solex_config.getDataUrl + "&" + searchStr + "&flag=" + flag;
    gantt.load(url);
    unloading();
}

function btn_save() {
    loading();
    dp.sendAllData();
    unloading();
    setTimeout(function () {
        btn_search("init");
    }, 100);
}

//遮罩层
function loading() {
    Solex.loading();
};

//取消盖屏
function unloading() {
    Solex.unloading();
}

以上是demo中的代码，主要包含了dhtmlx甘特图的初始化，一些常见的设置。特别是一些自定义字段，像被指派人、开始日期、结束日期、周期等