向表格添加水平顶部滚动条的Aurelia方式

The Aurelia way of adding a horizontal top scrollbar to a table?

本文关键字：Aurelia 方式 滚动条 顶部 表格 添加 水平      更新时间：2023-09-26

我曾尝试在模板标签内(或外)嵌入一个小脚本，但没有成功。脚本永远不会被执行。

在我的情况下，我希望执行这个脚本:

<script type="text/javascript">
    function DoubleScroll(element) {
        var scrollbar= document.createElement('div');
        scrollbar.appendChild(document.createElement('div'));
        scrollbar.style.overflow= 'auto';
        scrollbar.style.overflowY= 'hidden';
        scrollbar.firstChild.style.width= element.scrollWidth+'px';
        scrollbar.firstChild.style.paddingTop= '1px';
        scrollbar.firstChild.appendChild(document.createTextNode(''xA0'));
        scrollbar.onscroll= function() {
            element.scrollLeft= scrollbar.scrollLeft;
        };
        element.onscroll= function() {
            scrollbar.scrollLeft= element.scrollLeft;
        };
        element.parentNode.insertBefore(scrollbar, element);
    }
    DoubleScroll(document.getElementById('doublescroll'));
</script>

from如何在div的顶部和底部获得水平滚动条?，以便在表的顶部添加一个水平滚动条。

<div class="table-responsive">
    <table class="table table-bordered table-striped">
        // ... a ton of rows
    </table>
</div>

或者更好的(aurelia)方法是什么?什么好主意吗?

这是我的想象，但我似乎想不出最后的部分，我甚至不知道这是不是正确的思考方式。

  1. 添加带有ref属性的虚拟元素
  2. 在Aurelia的视图控制器中创建一个attach函数
  3. 以某种方式将样式添加到ref获取的元素中，如下所示。[yourref]

或者您可以避免在模板中放置一个虚拟的div，实际上是上面的脚本所做的，这是动态添加它。此外，多个表存在于同一个视图中，所以必须使用ref可能不是最好的方式:/

如有任何进一步的意见，将不胜感激。它应该是相当容易做一个水平的顶部滚动条，对吧?: -)

http://plnkr.co/edit/N9dRxG?p = info

为此创建一个自定义属性——下面是一个示例:

double-scroll.js 

import {inject} from 'aurelia-framework';
@inject(Element)
export class DoubleScrollCustomAttribute {
  constructor(element) {
    this.element = element; // this is the element the double-scroll attribute appears on.
  }
  attached() {
    let element = this.element;
    // contents of your DoubleScroll function from your original post
  }
  detached() {
    let element = this.element;
    // optional:  tear-down double scroll (unsubscribe events, etc)
  }
}

然后将标记改为:

app.html 

<require from="./double-scroll"></require>
<div class="table-responsive">
    <table class="table table-bordered table-striped" double-scroll>
        // ...
    </table>
</div>

(自定义属性类导出为DoubleScrollCustomAttribute…aurelia去掉CustomAttribute并将名称用连字符连起来，从而产生您在上面的table元素上看到的double-scroll属性。

工作柱塞:http://plnkr.co/edit/SYHXBO?p=preview

有关自定义属性的更多信息，请查看http://aurelia.io

文档
相关文章：