翻譯|使用教程|編輯:莫成敏|2020-06-02 11:11:59.103|閱讀 1290 次
概述:我們將學(xué)習(xí)在dhtmlxGantt網(wǎng)格中實現(xiàn)過濾和搜索任務(wù)的通用方法。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
dhtmlxGantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的Gantt圖表??蓾M足項目管理應(yīng)用程序的所有需求,是最完善的甘特圖圖表庫。它允許你創(chuàng)建動態(tài)甘特圖,并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt,你可以顯示活動之間的依賴關(guān)系,顯示具有完成百分比陰影的當前任務(wù)狀態(tài)以及組織活動到樹結(jié)構(gòu)。
在這里,我們提供了有關(guān)JavaScript Gantt配置的新視頻教程。我們將學(xué)習(xí)在dhtmlxGantt網(wǎng)格中實現(xiàn)過濾和搜索任務(wù)的通用方法:
讓我們看一下基本文本過濾器的示例。用戶輸入一些內(nèi)容–我們僅顯示與所選內(nèi)容匹配的任務(wù):
	
 
此類過濾器由兩部分組成:
我們已經(jīng)知道如何添加UI控件,并且知道將在用戶輸入上更新過濾器。
現(xiàn)在,我們?nèi)绾芜^濾甘特圖中的任務(wù)?
dhtmlxGantt中沒有過濾任務(wù)方法。相反,有一個API事件稱為onBeforeTaskDisplay:
gantt.attachEvent("onBeforeTaskDisplay", function(id, task){
    if (task.priority == "high"){
        return true;
    }
    return false;
});
完整重繪甘特圖數(shù)據(jù)期間,將為每個任務(wù)調(diào)用此事件。我們可以將此事件的處理程序添加到我們的代碼中,并跳過與過濾器值不匹配的任務(wù)的呈現(xiàn)。
首先,我們在網(wǎng)格標題中添加一個文本字段:
var textFilter = "<input data-text-filter type='text' oninput='gantt.$doFilter(this.value)'>"
  gantt.config.columns = [
    {name: "text", label: textFilter, tree: true, width: '*', resize: true},
    {name: "start_date", align: "center", resize: true},
    {name: "duration", align: "center"}
  ];
在oninput處理程序內(nèi),我們將存儲過濾器的當前值,并使用甘特圖渲染方法觸發(fā)甘特圖的重繪:
var filterValue = "";
  var delay;
  gantt.$doFilter = function(value){
    filterValue = value;
    clearTimeout(delay);
    delay = setTimeout(function(){
      gantt.render();
      gantt.$root.querySelector("[data-text-filter]").focus();
    }, 200) 
  }
甘特圖渲染方法會導(dǎo)致甘特圖完全重繪,在此期間,將為每個任務(wù)調(diào)用onBeforeTaskDisplay事件。 然后,我們檢查任務(wù)是否符合過濾條件,并決定是否顯示它。
  gantt.attachEvent("onBeforeTaskDisplay", function(id, task){
   if(!filterValue) return true;
    var normalizedText = task.text.toLowerCase();
    var normalizedValue = filterValue.toLowerCase();
    return normalizedText.indexOf(normalizedValue) > -1;
  });
在此階段,例如,您可能希望在網(wǎng)格中包含多行標題,以便在過濾器上方顯示列名。
	
 
壞消息是,Gantt沒有內(nèi)置的多行標題配置。但是,我們可以采用與使用自定義HTML內(nèi)容首先添加過濾器相同的方式來繞過它。我們可以在列標簽內(nèi)顯示多行:
var scaleHeight = gantt.config.scale_height;
  var textFilter = [
        "<div class='gantt-sub-header' style='line-height:"+scaleHeight/2+"px'>",
        "<div>Name</div>",
        "<div>Search: <input data-text-filter type='text' oninput='gantt.$doFilter(this.value)'></div>",
        "</div>"
    ].join("");
實施列跨度或行跨度并不是那么簡單,因此希望您將不需要它。
我們邀請您嘗試使用免費評估版自己構(gòu)建自己的JavaScript Gantt來篩選任務(wù)。請按照本文和我們的視頻教程中所述的步驟進行操作。
dhtmlxGantt可以集成到APS生產(chǎn)計劃排程系統(tǒng)中,實現(xiàn)計劃修改、滾動排程、臨時插單等高級智能功能,幫助企業(yè)實現(xiàn)數(shù)字化或智能工廠的轉(zhuǎn)型。
相關(guān)產(chǎn)品推薦:
VARCHART XGantt:支持ActiveX、.Net等平臺的C#甘特圖控件
AnyGantt:構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具
jQuery Gantt Package:基于HTML5 / jQuery的跨平臺jQuery Gantt包
phGantt Time Package:對任務(wù)和時間的分配管理的甘特圖
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: