当我覆盖 handsontable 高度时，所选行超出可见区域 属性
Selected row goes out of visible area when i override handsontable height property
我有一个有 12000 行的 table。我的测试场景是：-
1) Select table 中的任意行
2）点击任意一列header（排序）
3) 数据被排序并且 selection 应该保持并且 selected 行应该在可见区域。
正确工作的用例：-
当 _r8handsontable.scss 中没有参数被修改时，它工作得很好， selection 被维护并且 selected 行进入可见区域。
有问题的场景：-
因为我想增加行的高度。我创建了一个单独的 css 文件并覆盖了其中的一些 handson 属性。我覆盖的 css 中修改的属性是：-
.handsontable th,
.handsontable td {
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
height: 30px;
empty-cells: show;
line-height: 30px;
max-height: 30px;
padding: 0 4px 0 4px;
/* top, bottom padding different than 0 is handled poorly by FF with HTML5 doctype /
background-color: #FFF;
vertical-align: top;
overflow: hidden;
outline-width: 0;
white-space: pre-line;
font: $FontSize_S, "Siemens Sans";
/ preserve new line character in cell */
}
我把行高改为30px。现在，当我打开 table 时，行的高度增加了。 table 的外观和感觉是根据我的需要。但这种情况下的问题是：-
当我 select 一行并单击 table header 进行排序时 selection 保持不变，但可见行超出可见区域。
例如 - 我的 table 默认按升序排序。如果我 select 第一行然后单击列 header 进行排序。现在我的 table 按降序排序，我的 selected 行移动到底部并且 selection 得到维护（我们已经编写了维护 selection 的逻辑）但是问题是 selected 行不在可见区域。
是的，不幸的是，弄乱覆盖 CSS 会弄乱其中的一些功能。我建议改为使用 rowHeights 函数。如果你给它一个 int，这个可以让你设置所有行的高度，或者如果你提供一个数组，则可以设置单个行的高度。
看我的fiddle一个简单的例子。
相关代码：
hot1 = new Handsontable(container, {
data: data,
startRows: 5,
rowHeights: 40
};
我有一个有 12000 行的 table。我的测试场景是：- 1) Select table 中的任意行 2）点击任意一列header（排序） 3) 数据被排序并且 selection 应该保持并且 selected 行应该在可见区域。
正确工作的用例：- 当 _r8handsontable.scss 中没有参数被修改时，它工作得很好， selection 被维护并且 selected 行进入可见区域。
有问题的场景：- 因为我想增加行的高度。我创建了一个单独的 css 文件并覆盖了其中的一些 handson 属性。我覆盖的 css 中修改的属性是：-
.handsontable th,
.handsontable td {
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
height: 30px;
empty-cells: show;
line-height: 30px;
max-height: 30px;
padding: 0 4px 0 4px;
/* top, bottom padding different than 0 is handled poorly by FF with HTML5 doctype /
background-color: #FFF;
vertical-align: top;
overflow: hidden;
outline-width: 0;
white-space: pre-line;
font: $FontSize_S, "Siemens Sans";
/ preserve new line character in cell */
}
我把行高改为30px。现在，当我打开 table 时，行的高度增加了。 table 的外观和感觉是根据我的需要。但这种情况下的问题是：- 当我 select 一行并单击 table header 进行排序时 selection 保持不变，但可见行超出可见区域。
例如 - 我的 table 默认按升序排序。如果我 select 第一行然后单击列 header 进行排序。现在我的 table 按降序排序，我的 selected 行移动到底部并且 selection 得到维护（我们已经编写了维护 selection 的逻辑）但是问题是 selected 行不在可见区域。
是的，不幸的是，弄乱覆盖 CSS 会弄乱其中的一些功能。我建议改为使用 rowHeights 函数。如果你给它一个 int，这个可以让你设置所有行的高度，或者如果你提供一个数组，则可以设置单个行的高度。
看我的fiddle一个简单的例子。
相关代码：
hot1 = new Handsontable(container, {
data: data,
startRows: 5,
rowHeights: 40
};