Web甘特图开发系列：(五) 权限编辑

在实际项目管理系统应用中，需要根据用户的不同角色、权限，来控制甘特图上可编辑的内容。

普加甘特图权可根据权限，精确控制单元格编辑、条形图拖拽、右键菜单功能项等功能显示和操作细节。

1.单元格编辑控制

监听"cellbeginedit"事件，在编辑前，判断用户是否可以编辑此单元格，不满足，就取消操作。

//控制单元格是否可编辑
gantt.on("cellbeginedit", function (e) {
    var task = e.record, column = e.column, field = e.field;
    if (task.Summary == 1) {
        e.cancel = true;
    }
    if (field == 'Duration') {
        e.cancel = true;
    }
});

 本代码控制摘要任务、工期列不能编辑。

2.条形图拖拽控制

监听"itemdragstart"事件，在拖拽前，判断用户是否可修改任务日期，不满足，就取消操作。

//只允许调整百分比
gantt.on("itemdragstart", function (e) {
    if (e.action == "finish" || e.action == "move") {   //percentcomplete
        e.cancel = true;
    }
});

 本代码控制用户不能拖拽开始、不能移动条形图。

3.右键菜单项显示控制

 监听菜单的"beforeopen"事件，如果当前点击的任务跟用户操作权限不匹配，则隐藏、禁用一些菜单项。

//右键菜单
var menu = new GanttMenu();
gantt.setContextMenu(menu);

//监听菜单的opening事件，此事件在菜单显示前激发。可以控制菜单项的显示和可操作。
menu.on("beforeopen", function (e) {
    var gantt = this.owner;       //PlusProject对象
    var task = gantt.getSelected();
    if (!task) {
        e.cancel = true;
        return;
    }

    //显示和可编辑所有菜单项

    this.add.show();
    this.edit.show();
    this.remove.show();

    this.upgrade.enable();
    this.downgrade.enable();

    if (task.Summary) {
        this.edit.hide();
        this.remove.hide();

        this.upgrade.disable();
        this.downgrade.disable();
    } else {
        this.add.hide();
    }
});

 

访问示例请点击这里。