翻譯|使用教程|編輯:秦林|2022-11-18 14:26:06.173|閱讀 377 次
概述:本文給大家講解在使用DHTMLX Gantt時,如何創建自定義元素,歡迎大家下載最新版試用體驗。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
本文給大家講解在使用DHTMLX Gantt時,如何創建自定義元素,歡迎大家下載最新版試用體驗。
要為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 WRONG
render: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 <input class='editor_description' type='text'>"+
"<br/>Holders <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="http://code.jquery.com/jquery-3.3.1.min.js?v=5.2.4"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js?v=5.2.4"></script>
<link rel="stylesheet" type="text/css"
>
描述控制邏輯:
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 歡迎進群交流討論
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn