這篇文章給大家講解dhtmlxGantt的指定列設置。

DhtmlxGantt正版試用下載

1、概述

默認情況下，網格包含4列：

1. 任務名稱
2. 開始日期
3. 期間
4. '+' 列。 一個特殊的專欄 name="add"顯示“+”號，允許用戶為任務添加子項。

參數是一個數組，其中的 columns 每個對象表示一個列。 因此，例如，要在網格中定義 5 列：“任務”、“開始日期”、“結束日期”、“持有人”、“進度”，請指定 columns 參數，如下所示：

gantt.config.columns =  [
    {name:"text",       label:"Task name",  tree:true, width:"*" },
    {name:"holder",     label:"Holder",     align:"center" },
    {name:"start_date", label:"Start time", align:"center" },
    {name:"end_date",   label:"End date",   align:"center" },
    {name:"progress",   label:"Progress",   align:"center" },
];
 
gantt.init("gantt_here");

其中'text'、'holder'、'start_date'、'end_date'、'progress' 是數據屬性的名稱 。

2、顯示任務的結束日期

當任務數據對象包含“%Y-%m-%d”或“%d-%m-%Y”格式的開始和結束日期（即沒有小時-分鐘部分）時，結果日期為默認格式可能具有不期望的值。

3、隱藏某些任務的“添加”按鈕

防止用戶將子任務添加到特定任務的一種非常簡單的方法是通過 CSS 隱藏“添加”按鈕。

• 為每個任務行分配一個 CSS 類 首先，使用grid_row_class 模板 ：

gantt.templates.grid_row_class = function( start, end, task ){
        if ( task.$level > 1 ){
            return "nested_task"
        }
        return "";
    };

• 然后，隱藏此類行的“添加”按鈕：

.nested_task .gantt_add{
        display: none !important;
    }

4、寬度

要設置列的寬度，請使用的屬性寬度：相關列對象中

gantt.config.columns =  [
    {name:"text",       label:"Task name",  width:"*", tree:true },
    {name:"start_date", label:"Start time", width:150 },
    {name:"duration",   label:"Duration",   width:120 }
];
gantt.init("gantt_here");

最小/最大列寬

min_width /max_width 屬性可用于在調整大小操作的情況下限制列寬：

gantt.config.columns =  [
 {name:"text", label:"Task name", width:"*", min_width: 150, max_width:300, tree:true},
 {name:"start_date", label:"Start time", width:150 },
 {name:"duration",   label:"Duration",   width:120 }
];
gantt.init("gantt_here");

調整大小時的最小網格寬度

網格可以調整到的最小寬度是通過 gantt.config.min_grid_column_width 選項定義的：

gantt.config.min_grid_column_width = 1; // the grid can be resized to 1 px

請注意，調整大小期間網格的最小寬度還取決于“添加”列的最小寬度（默認為 44）。 為了能夠將網格調整為小于 44 像素的值， 指定min_width選項： 請在“添加”列的對象中

{name: "add", label: "", min_width: 1 }

5、數據映射和模板

默認情況下，dhtmlxGantt 使用與列名稱對應的數據屬性填充網格。 例如，如果為列設置 name:"holder" ，dhtmlxGantt 將在傳入的 JSON 數據中查找此類數據屬性，如果存在此類屬性，則將其加載到列中。

為列數據使用模板

如果您想在一個列中顯示多個數據屬性的混合，您可以為該列使用任何名稱，但通過 的模板 屬性 列 參數 設置數據模板。 例如，您可以為列指定 name:"staff" 并定義一個模板函數，該函數將返回 的持有者 和 進度數據屬性。 要加載到列中。

gantt.config.columns =  [
    {name:"text",       label:"Task name",  tree:true, width:"*" },
    {name:"start_date", label:"Start time", align: "center" },
    {name:"staff",      label:"Holder(s)", template:function(obj){
                                return obj.holder+"("+obj.progress+")"} }
];
 
gantt.init("gantt_here");

6、文本對齊

要設置列中文本的水平對齊方式，請使用的align屬性，代碼如下：

gantt.config.columns =  [
    {name:"text",       label:"Task name",  tree:true, align:"center"},
    {name:"start_date", label:"Start time", align: "center" },
    {name:"duration",   label:"Duration",   align: "center" }
];
 
gantt.init("gantt_here");

dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表，可滿足項目管理控件應用程序的所有需求，是最完善的甘特圖圖表庫。了解更多DhtmlxGantt相關內容和資訊，歡迎在線咨詢或者私信我獲取正版試用版及報價。

甘特圖控件交流群：764148812    歡迎進群交流討論

更多正版甘特圖軟件下載、購買、授權咨詢，請點這里！