DHTMLX 代码实现点击左侧任务展示右边甘特图
时间: 2023-08-14 15:20:25 浏览: 61
好的,让我来为您解答。
首先,我们需要在页面中引入DHTMLX库和甘特图组件的CSS和JS文件。可以通过以下方式引入:
```html
<link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css"/>
<script type="text/javascript" src="codebase/dhtmlx.js"></script>
<script type="text/javascript" src="codebase/ext/dhtmlxgantt_tooltip.js"></script>
<link rel="stylesheet" type="text/css" href="codebase/dhtmlxgantt.css"/>
<script type="text/javascript" src="codebase/dhtmlxgantt.js"></script>
```
然后,我们需要在页面中创建一个左右两侧的布局。可以使用DHTMLX的`dhtmlXLayout`组件来实现:
```javascript
var layout = new dhtmlXLayoutObject({
parent: document.body, // 父元素
pattern: "2U", // 布局模式
cells: [
{id: "left", text: "任务列表", width: 200}, // 左侧单元格
{id: "right", text: "甘特图",} // 右侧单元格
]
});
```
接下来,我们需要在左侧单元格中创建一个任务列表。可以使用DHTMLX的`dhtmlXTree`组件来实现:
```javascript
var tree = layout.cells("left").attachTree();
tree.load("tasks.xml"); // 加载任务数据
tree.attachEvent("onClick", function(id) {
var task = gantt.getTask(id); // 获取任务对象
gantt.showTask(task.id); // 在甘特图中显示任务
});
```
最后,我们需要在右侧单元格中创建一个甘特图。可以使用DHTMLX的`gantt`组件来实现:
```javascript
var gantt = layout.cells("right").attachGantt({
tasks: {
store: new dhtmlXDataStore({
url: "tasks.json" // 任务数据
})
},
links: {
store: new dhtmlXDataStore({
url: "links.json" // 任务关联数据
})
}
});
```
在左侧任务列表中点击某个任务时,我们可以获取到该任务的ID,并通过`gantt.getTask`方法获取到该任务的对象,最后调用`gantt.showTask`方法在甘特图中显示该任务。
以上就是DHTMLX实现点击左侧任务展示右边甘特图的代码实现。希望能对您有所帮助。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)