dhtmlx-gantt 启用工具栏

### 启用 dhtmlx-gantt 工具栏

为了在 dhtmlx-gantt 中启用工具栏，需按照特定配置来初始化组件。通过设置 `gantt.config.layout` 属性可以定义布局结构并加入工具栏元素。

以下是具体实现方法：

// 定义带有顶部工具栏的布局
gantt.config.layout = {
    css: "gantt_container",
    rows: [
        { view: "toolbar", height: 30, id: "myToolbar" }, // 添加工具栏视图
        { view: "grid", scrollY: "auto", scrollX: "scrollX", id: "taskGrid"},
        { view: "scrollbar", id: "scrollX", height: 25 },
        { view: "chart", id: "chart"}
    ]
};

// 初始化 gantt 实例
gantt.init("gantt_here");

// 配置工具栏按钮
var toolbar = gantt.$$("myToolbar");
if (toolbar) {
    toolbar.define("template", function(buttonConfig){
        return "<span class='gantt_toolbar_button'>" + buttonConfig.value + "</span>";
    });
    
    toolbar.addItems([
        { value: "缩放", type:"select", options:[
            {"id":"day","value":"按天"},
            {"id":"week","value":"按周"},
            {"id":"month","value":"按月"}
        ]},
        { value: "全屏", click:function(){ /* 全屏逻辑 */ }},
        { value: "导出PDF", click:function(){
            gantt.toPDF({ filename: 'project_plan' }); 
        }}
    ]);
}

上述代码片段展示了如何创建一个包含自定义按钮和下拉菜单的工具栏[^1]。此方式不仅限于简单的按钮添加，还可以集成更多交互功能如文件导出、视图切换等操作。