0

我正在使用列切换按钮在 jquery mobile 中显示数据表以进行响应式设计。但是，我还添加了<div style="overflow:auto">以便用户能够水平滚动，如果他们选择能够在屏幕上查看太多项目（有些人可能认为这违背了目的，但这是为了显示报告，以便用户可以想要这个功能）。

无论如何，我的问题是，当用户沿表格水平滚动时，表格data-column-btn的其余部分会随之移动。有没有办法可以将按钮“粘贴”到右上角，所以即使表格的其余部分滚动，按钮仍保持在相同的位置？

JS 小提琴在这里：http: //jsfiddle.net/LuA8m/

感谢大家 ：）

4

1 回答 1

1

您可以使用 JavaScript 将按钮移动到另一个 DIV。首先在表格包装器上方创建一个空的占位符 DIV，并将表格包装器 DIV 的宽度设置为 100%：

<div id="colTogglePlaceholder"></div>
<div style="overflow:auto; width: 100%; ">  
    <table  data-role='table' data-theme='a' id='customerListTable' data-mode='columntoggle' class="ui-body-b ui-shadow table-stripe ui-responsive" data-column-btn-mini="true" data-column-btn-text="Columns to Display" data-column-btn-corners="false" data-column-btn-theme="c" data-column-popup-theme="a" >
        <thead>
            <tr>
               etc.

然后使用 jQuery appendTo() 方法将按钮移动到占位符 DIV 中：

$(document).on("pageinit", "#customerList", function () {
    $(".ui-table-columntoggle-btn").appendTo("#colTogglePlaceholder");
});

这是您更新的FIDDLE

注意：这也适用于 jQM 1.4

于 2014-04-30T23:11:38.830 回答