如何在dhtmlx调度程序灯箱中添加隐藏字段

时间:2018-01-04 12:14:39

标签: javascript jquery dhtmlx-scheduler

我正在尝试修改dhtmlx调度程序灯箱,我在这里添加了一些新字段,但现在问题我需要一个隐藏字段,并将通过JavaScript传递值。但是dhtmlx调度程序没有隐藏任何字段类型,我无法在那里推送任何自定义类或ID。我知道有一个示例可以创建自定义灯箱视图here,但我不想仅将其用于一个字段。

这是我的代码:

function init() {
    var role = <%= role %> ;
    var custom_form = document.getElementById("custom_form");
    scheduler.config.lightbox.sections = [
        {   name: "Post on",type: "radio",map_to: "post_on",
            options: [
                { key: "facebook", label: '<i class="fa fa-facebook"> </i>' },
                { key: "google", label: '<i class="fa fa-google-plus"> </i>' },
                { key: "twtter", label: '<i class="fa fa-twitter"> </i>' }
            ]
        },
        { name: "files", height: 50, map_to: "files", type: "textarea", focus: true }, //This one need to be a hidden field with a unique class or id
        { name: "text", height: 50, map_to: "description", type: "textarea", focus: true },
        {   name: "Tags: ", type: "multiselect",map_to: "tags",
            options: [
                { key: "funny", label: 'Funny' },
                { key: "promotions", label: 'Promotions' },
                { key: "Branding", label: 'Branding' },
            ]
        },
        {name: "time",height: 72,type: "time",map_to: "auto",},
    ];
    scheduler.config.first_hour = 0;
    scheduler.config.event_duration = (60 * 14) - 10;
    scheduler.config.auto_end_date = true;
    scheduler.config.include_end_by = true;
    scheduler.locale.labels.section_priority = 'Priority';
    // Adding custom button
    scheduler.config.buttons_left = ["dhx_save_btn", "dhx_cancel_btn", "add_file"];
    scheduler.locale.labels["add_file"] = "Add Files";
    scheduler.config.buttons_right = ["dhx_delete_btn", "select_file"]
    scheduler.locale.labels["select_file"] = "Select File";
    scheduler.attachEvent("onLightboxButton", function(button_id, node, e) {
        if (button_id == "add_file") showUploader();
        else if (button_id == "select_file") showFilemanager();
    });
    scheduler.config.xml_date = "%Y-%m-%d %H:%i";
    scheduler.init('scheduler_here', new Date(), "month");
    var user_id = <%= locals.user_id %> ;
    scheduler.templates.xml_date = function(value) { return new Date(value); };
    scheduler.load("/cdata?user_id=" + user_id, "json");
    var dp = new dataProcessor("/cdata?user_id=" + user_id);
    dp.init(scheduler);
    dp.setTransactionMode("POST", false);
    scheduler.templates.event_bar_text = function(text, start, end, event) {
        return "<b>" + end.post_on + "<b> <i>" + end.description + "</i> " + end.tags;
    };
    scheduler.templates.event_bar_date = function() { return ""; };
}

这样可以隐藏files字段并将特殊类推送给它吗?

提前致谢。

2 个答案:

答案 0 :(得分:1)

最简单的方法是在onBeforeLightbox事件触发时根据您的条件重新定义scheduler.config.lightbox.sections。即您需要为灯箱创建2个配置:使用文件(1)和不使用(2)。

Check the sample how it works. 隐藏部分仅显示“完全访问”事件

答案 1 :(得分:0)

如果您不能使用单独的灯箱,则可以通过隐藏其父div并在其节点中直接添加一个特殊的类来使灯箱中的任何字段都隐藏起来,因此:

scheduler.attachEvent("onBeforeLightbox", function(id){
    scheduler.formSection('Files').node.classList.add('yourclass')
    scheduler.formSection('Files').node.parentNode.style.display = 'none'
    return true 
});