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

最新推荐文章于 2023-09-05 09:57:02 发布

萧何.

最新推荐文章于 2023-09-05 09:57:02 发布

阅读量1.9k

点赞数 1

分类专栏： Dhtmlx Gantt 文章标签： vue.js javascript 前端 ui

本文链接：https://blog.csdn.net/weixin_46221897/article/details/124122218

版权

Dhtmlx Gantt 专栏收录该内容

5 篇文章 6 订阅

订阅专栏

本文档介绍了如何在DHTMLX Gantt中创建自定义的表单控件，包括定义控件属性、添加到lightbbox配置以及自定义表单样式。通过示例代码展示了如何为任务描述添加新的输入字段，并提供了详细的步骤来实现这一功能。

摘要由CSDN通过智能技术生成

首先先起一个基本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},
    ];

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