在dhtmlxGantt里面如何 让Grid里面 让一列保持固定,即在移动滚动轮的时候固定的那一列不跟随移动,请说下实现思路和具体代码
时间: 2024-02-25 18:52:38 浏览: 161
如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
3星 · 编辑精心推荐
要让Grid里的一列保持固定,即在移动滚动轮的时候固定的那一列不跟随移动,可以通过以下步骤实现:
1. 使用dhtmlxGantt的onGanttScroll事件来监听滚动事件。
2. 在该事件中,获取Grid的容器和表格对象,以及要固定的列的索引。
3. 获取固定列的宽度,并设置Grid表格的左边距为该宽度,以便固定列能够显示在Grid左侧。
4. 获取表格中所有单元格元素,并通过遍历的方式,将固定列的单元格元素的position属性设置为"absolute",并设置left属性为固定列的宽度,以便将固定列固定在Grid左侧。
5. 在滚动事件中,根据Grid容器的scrollTop属性,设置固定列的单元格元素的top属性,以便使其与Grid表格中的其他单元格对齐。
以下是实现思路和具体代码:
```javascript
gantt.attachEvent("onGanttScroll", function (scrollLeft, scrollTop) {
var gridContainer = gantt.$grid,
gridTable = gantt.$grid.querySelector("table"),
fixedColumnIndex = 1, // 要固定的列的索引(这里假设为第2列)
fixedColumnWidth = 100; // 固定列的宽度
// 设置Grid表格的左边距为固定列的宽度
gridTable.style.marginLeft = fixedColumnWidth + "px";
// 遍历表格中所有单元格元素
var cells = gridTable.querySelectorAll("td"),
cell,
i;
for (i = 0; i < cells.length; i++) {
cell = cells[i];
// 如果是固定列的单元格
if (cell.cellIndex === fixedColumnIndex) {
// 设置单元格的position属性为"absolute",left属性为固定列的宽度
cell.style.position = "absolute";
cell.style.left = fixedColumnWidth + "px";
} else {
// 设置单元格的position属性为"static"
cell.style.position = "static";
}
}
// 设置固定列的单元格元素的top属性,使其与Grid表格中的其他单元格对齐
var fixedCells = gridTable.querySelectorAll(
"tr td:nth-child(" + (fixedColumnIndex + 1) + ")"
);
for (i = 0; i < fixedCells.length; i++) {
cell = fixedCells[i];
cell.style.top = cell.parentNode.offsetTop + "px";
}
});
```
以上代码仅为示例,具体实现可能需要根据实际情况进行调整。
阅读全文