如何在dhtmlx scheduler lightbox中添加带自定义类的隐藏字段

我正在修改dhtmlx scheduler的lightbox，已经添加了几个新字段，现在需要添加一个隐藏字段并通过JavaScript传递值。但dhtmlx scheduler没有内置的隐藏字段类型，也没办法直接给字段添加自定义类或ID。我知道有创建自定义lightbox视图的示例，但不想只为了一个字段就用这个方案。以下是我的代码片段：

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 
        }, 
        // 这个字段需要设为隐藏并添加唯一类或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';

    // 添加自定义按钮
    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>" + event.post_on + "</b> <i>" + event.description + "</i> " + event.tags;
    };
    scheduler.templates.event_bar_date = function() { return ""; };
}

请问是否可以将files字段设为隐藏并为其添加特殊类？

当然可以！不用专门创建自定义lightbox视图也能搞定这个需求，这里有几个简单实用的方法：

方法1：通过onLightbox事件动态修改字段样式 #

你可以监听scheduler的onLightbox事件，当lightbox弹出时，定位到files字段的容器，给它添加自定义类并设置隐藏：

scheduler.attachEvent("onLightbox", function(id){
    // 获取files字段对应的容器元素
    const filesSection = scheduler._lightbox.form_section("files");
    if(filesSection){
        // 添加自定义类
        filesSection.classList.add("custom-hidden-field");
        // 隐藏整个字段区域
        filesSection.style.display = "none";
    }
    return true;
});

之后你可以通过事件对象直接给files字段赋值，值会自动随表单提交：

// 给当前打开的事件设置files值
const currentEvent = scheduler.getEvent(id);
currentEvent.files = "你的隐藏数据";

方法2：自定义字段渲染模板 #

直接给files字段指定template属性，渲染成隐藏的输入框并带上自定义类：

{ 
    name: "files", 
    map_to: "files", 
    type: "textarea", 
    // 自定义模板，渲染为隐藏的textarea
    template: function(obj){
        return `<textarea class="custom-hidden-field" style="display: none;" name="files">${obj.files || ''}</textarea>`;
    }
},

这种方式下，scheduler依然会正常处理这个字段的数据绑定，只是视觉上完全隐藏，还能通过自定义类快速定位元素。

方法3：跳过lightbox字段，直接在事件对象中存储值 #

如果这个字段完全不需要在lightbox中显示，其实可以不用把它加入sections列表，直接在事件创建或编辑时给事件对象赋值即可：

// 当事件刚创建时设置隐藏值
scheduler.attachEvent("onEventCreated", function(id, event){
    event.files = "默认隐藏值";
    return true;
});

// 或者在打开lightbox时更新值
scheduler.attachEvent("onLightbox", function(id){
    const event = scheduler.getEvent(id);
    event.files = "动态生成的隐藏值";
    return true;
});

这种方式最简洁，值会自动被dataProcessor提交到后台，完全不需要处理lightbox的UI元素。

内容的提问来源于stack exchange，提问作者M. K Hossain