项目管理工具DHTMLX Gantt灯箱元素配置教程：创建自定义元素

1、创建自定义元素

要为lightbox创建一个自定义控件，请按以下方法定义一个新对象:

gantt.form_blocks["my_editor"]={    render:function(sns){ //sns - the section's configuration object        return "html code of the editor here";    },    set_value:function(node,value,task,section){        //node - an html object related to the html defined above        //value - a value defined by the map_to property        //task - the task object        //section- the section's configuration object        ... code to set value to the element ...    },    get_value:function(node,task,section){        //node - an html object related to the html defined above        //task - the task object        //section - the section's configuration object        return "current value from editor";    },    focus:function(node){        //node - an html object related to the html defined above        ...code to set focus to the element...    }}

要确保没有在”render”函数返回的HTML代码中对标签使用短的关闭语法，因为这可能会导致浏览器的解析问题:

//this is WRONGrender:function(){    return "<div id='box'/>";}//instead use opening and closing tags syntax:render:function(){    return "<div id='box'></div>";// recommended}

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 = [    { name:"description", height:200, map_to:"text", type:"my_editor", focus:true},    { name:"time", height:72, type:"duration", map_to:"auto"}];

可

例如，你可以基于jQuery selected插件创建一个控件，为一个任务分配多个资源。与默认的Gantt资源控件不同，它只允许为任务分配资源，而不设置资源的数量。然而，如果您想要一个非常简单的控件，它可能是有用的。

在甘特图中使用基于jQuery chosen的控件。

在页面中包含它的源文件：

<script    src="https://code.jquery.com/jquery-3.3.1.min.js=5.2.4"    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="    crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js=5.2.4"></script><link rel="stylesheet" type="text/css"    href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css=5.2.4">

描述控制逻辑：

gantt.form_blocks["multiselect"] = { render: function (sns) {  var height = (sns.height || "23") + "px";  var html = "<div class='gantt_cal_ltext gantt_cal_chosen gantt_cal_multiselect'"+     "style='height:"+ height + ";'><select data-placeholder='...'"+        "class='chosen-select' multiple>";  if (sns.options) {   for (var i = 0; i < sns.options.length; i++) {    if(sns.unassigned_value !== undefined && sns.options[i].key==sns.unassigned_value){        continue;    }    html+="<option value='" +sns.options[i].key+ "'>"+sns.options[i].label+"</option>";  }}  html += "</select></div>";  return html;},set_value: function (node, value, ev, sns) {    node.style.overflow = "visible";    node.parentNode.style.overflow = "visible";    node.style.display = "inline-block";    var select = $(node.firstChild);    if (value) {        value = (value + "").split(",");        select.val(value);    }    else {        select.val([]);    }    select.chosen();    if(sns.onchange){        select.change(function(){            sns.onchange.call(this);        })    }    select.trigger('chosen:updated');    select.trigger("change");},get_value: function (node, ev) {    var value = $(node.firstChild).val();    //value = value value.join(",") : null    return value;},focus: function (node) {    $(node.firstChild).focus(); }};

将该控件用作lightbox section，类型为:”multiselect”：

gantt.config.lightbox.sections = [    {name:"description",height:38,map_to:"text",type:"textarea",focus: true},    {name:"owner",height:60, type:"multiselect", options:gantt.serverList("people"),        map_to:"owner_id", unassigned_value:5 },    {name: "time", type: "duration", map_to: "auto"}];

控件对象中的unassignd_value属性用于隐藏控件中不应用于选择的资源。您需要将相应资源的id设置为此属性的值。在上面的例子中，id=5的资源在控件中没有显示为选项。

DHTMLX Gantt享有超十年声誉，支持跨浏览器和跨平台，性价比高，可满足项目管理控件应用的所有需求，是最完善的甘特图图表库。2022年终狂欢火热进行中，知名软控件产品享超低折扣，满额豪礼赠，复购双重大礼！了解更多内容，欢迎在线咨询或者私信我获取正版试用版及 价。

甘特图控件交流群：764148812    欢迎进群交流讨论

年终狂欢季，全场产品，限时特惠，立即了解详情！

标签：