Handsontable 滑动横向滚动条时表格元素的类名会被重置,怎么不重置
时间: 2024-03-08 20:48:55 浏览: 230
利用纯css实现table固定列与表头中间横向滚动的思路和实例
在Handsontable中,滑动横向滚动条时表格元素的类名会被重置是因为Handsontable在渲染表格时会重新生成表格元素。要想滑动横向滚动条时表格元素的类名不被重置,可以通过以下方法实现:
1. 使用 `beforeRender` 钩子函数,在渲染表格前保存表格元素的类名到一个缓存变量中。例如:
```
var cachedClassNames = {};
function beforeRender() {
// 获取表格元素,并保存其类名到缓存变量中
var rows = this.view.wt.wtTable.TBODY.childNodes;
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].childNodes;
for (var j = 0; j < cells.length; j++) {
var cell = cells[j];
if (cell.className) {
cachedClassNames[cell.getAttribute('data-row') + ',' + cell.getAttribute('data-col')] = cell.className;
}
}
}
}
```
2. 使用 `afterRender` 钩子函数,在渲染表格后恢复表格元素的类名。例如:
```
function afterRender() {
// 获取表格元素,并恢复其保存的类名
var rows = this.view.wt.wtTable.TBODY.childNodes;
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].childNodes;
for (var j = 0; j < cells.length; j++) {
var cell = cells[j];
var className = cachedClassNames[cell.getAttribute('data-row') + ',' + cell.getAttribute('data-col')];
if (className) {
cell.className = className;
}
}
}
}
```
3. 使用 `beforeKeyDown` 钩子函数,在用户按下键盘时重新保存表格元素的类名。这是因为在滑动横向滚动条后,如果用户使用键盘导航,表格元素的类名可能会被重置。例如:
```
function beforeKeyDown(event) {
// 用户按下键盘时重新保存表格元素的类名
if (event.keyCode >= 37 && event.keyCode <= 40) {
beforeRender.call(this);
}
}
```
4. 将以上三个钩子函数添加到Handsontable实例的配置中。例如:
```
var hot = new Handsontable(container, {
data: data,
columns: [
// 列配置
],
beforeRender: beforeRender,
afterRender: afterRender,
beforeKeyDown: beforeKeyDown
});
```
通过以上方法,你可以在滑动横向滚动条时保持表格元素的类名不被重置。需要注意的是,该方法可能会影响表格的性能,因此需要根据实际情况进行优化。
阅读全文