dhtmlxgantt.js duration

### dhtmlxGantt.js 中 `duration` 属性的使用 在 dhtmlxGantt.js 库中，`duration` 属性用于表示任务持续时间。此属性通常与特定的任务对象关联，并影响甘特图上的显示效果。 对于编辑器配置，可以设置如下： ```javascript var durationEditor = { type: "number", map_to: "duration", min: 0, max: 100 }; ``` 上述代码片段展示了如何创建一个名为 `durationEditor` 的变量来定义输入控件的行为[^1]。该控件允许用户通过界面调整任务的持续时间，范围限定于 0 到 100 单位之间（具体单位取决于应用上下文）。这种设定有助于确保数据有效性并提供直观的操作体验给最终使用者。 为了更好地理解 `duration` 属性的应用场景及其与其他功能模块之间的交互方式，下面给出一段完整的 JavaScript 实现示例，它不仅涵盖了基本的任务管理还包括了 UI 状态保持机制以及样式适配等内容： #### 创建和初始化甘特图实例 首先，在 HTML 文件内引入必要的资源文件之后，可以通过以下脚本启动一个新的甘特图实例： ```javascript gantt.init("gantt_here"); gantt.config.xml_date = "%Y-%m-%d %H:%i"; // 设置默认视图模式和其他全局参数... ``` 这里假设有一个 ID 为 `"gantt_here"` 的 DOM 元素作为图表渲染的目标区域；同时指定了日期格式化字符串以便后续解析 XML 数据源时能够正确识别时间戳信息。 #### 配置任务字段映射关系 接着要做的就是告诉 gantt 组件哪些自定义属性应该被用来填充内部模型结构。这一步骤涉及到修改 `config.lightbox.sections` 和其他相关选项以适应项目需求： ```javascript gantt.attachEvent("onLightbox", function (id) { var task = gantt.getTask(id); // 动态更新 lightbox 表单内的初始值 }); gantt.config.columns = [ {name:"text", label:"Task name", tree:true, width:200}, {name:"start_date", label:"Start time", align:"center"}, {name:"duration", label:"Duration", align:"center"} ]; ``` 这段代码设置了表格列布局，并明确了每一列表头对应的键名。值得注意的是，“duration” 字段在这里得到了特别处理——其标签名称设为 “Duration”，并且居中对齐显示数值型内容。 #### 处理工具栏事件及保存状态 考虑到用户体验方面的要求，每当点击全展/收起按钮时都应当同步记录当前分支的状态变化情况： ```javascript document.getElementById('expandAll').addEventListener('click', function () { gantt.expand(); saveBranchesState(); }); document.getElementById('collapseAll').addEventListener('click', function () { gantt.collapse(); saveBranchesState(); }); ``` 以上逻辑实现了监听指定元素触发的动作，并调用了相应的 API 方法完成节点操作的同时还执行了一次额外的状态存盘动作[^2]。 #### 调整容器尺寸以支持响应式设计 最后但同样重要的一点是要保证甘特图能够在不同设备屏幕上正常呈现出来。为此需遵循官方文档建议的做法即赋予外部包裹层合适的宽高比例约束条件： ```css html, body{ margin:0px; padding:0px; height:100%; /*强制*/ overflow:hidden; } #gantt_here{ position:relative; width:100%; height:100%; } ``` 这些 CSS 规则确保即使是在移动端浏览器环境下也能获得良好的视觉反馈效果[^3]。