Dhtmlx Gantt如何LightBox自定义表单元素

首先先起一个基本Dhtmlx Gantt的基本项目。以下代码可做参考。

以上是基本dhtmlx gantt的使用方法。接下来主要说明dhtmlx gantt 自定义表单控件的使用方法。

具体内容可查看官网：Creating Custom Element Gantt Docs

首先，dhtmlx gantt的lightbox（表单配置）都在此属性中定义 gantt.config.lightbox.sections，所以首先需要定义一个表单控件的存储相关属性值。

gantt.form_blocks["my_editor"] = {
        render: function (sns) {
            return "<div class='dhx_cal_ltext' style='height:60px;'>"+
                "Text&nbsp;<input class='editor_description' type='text'>"+
                "<br/>Holders&nbsp;<input class='editor_holders' type='text'>"+
                "</div>";
        },
        set_value: function (node, value, task) {
            node.querySelector(".editor_description").value = value || "";
            node.querySelector(".editor_holders").value = task.users || "";
        },
        get_value: function (node, task) {
            task.users = node.querySelector(".editor_holders").value;
            return node.querySelector(".editor_description").value;
        },
        focus: function (node) {
            var a = node.querySelector(".editor_description");
            a.select();
            a.focus();
        }
    };

属性已经定义完毕接下来就是将其添加进  gantt.config.lightbox.sections 此属性中。

 gantt.config.lightbox.sections = [
      {
        name: "description",
        height: 36,
        map_to: "text",
        type: "textarea",
        focus: true,
      },
      { name: "time", type: "duration", map_to: "auto" },
      { name:"description", height:200, map_to:"text", type:"my_editor", focus:true},
    ];

按照此方法可自定义表单样式属性。