0

我正在使用数据表的多选功能以及 scrollX 和 scrollY 以及其他各种功能。但特别是multiselect和sScrollX、sScrollY的特性似乎相互冲突。

仅多选

http://postimg.org/image/z55uqsbxd/

在使用带有滚动功能的多重过滤器时，多选文本框的宽度似乎向右移动。超过 40 列，UI 变得更糟。

使用 scrollY 进行多选

http://postimg.org/image/palnmlfnb/

我用 firebug 深入研究了渲染的 html，发现
1. 仅在多选中，没有宽度样式

<tfoot>
<tr>
<th rowspan="1" colspan="1">
<span class="filter_column filter_text">

2.但是在使用滚动X和Y特性即（sScrollX，sScrollY）后，出现样式

<tr>
<th rowspan="1" colspan="1" style="width: 17px;">
<span class="filter_column filter_text">

而这里的罪魁祸首似乎是 style="width: XXpx;" 对于每个“th”，它正在由 javascript 渲染

element.style {
    width: XXpx;
}

注：以上XX为两位数，如14

我什至尝试使用 css 功能溢出：自动；对于整个表格可以完美运行，但现在滚动条适用于整个表格。但我还有其他功能，例如顶部的 tableTools 和 Colvis 功能，它们也位于垂直滚动条下方。所以这不是一个解决方案。

请给我的朋友们一些启发。

4

1 回答 1

0

我遇到了类似的问题。在标题单元格与正文单元格中添加水平填充的方式存在错误。我正在查看我的代码，但没有注意到我做了什么来修复它。尝试消除固定宽度和/或将水平填充设置为 0。

更新： 回去挖掘这个。我最终没有在标签上放置水平填充，然后将它们中的内容包装在跨度中，并对其应用水平填充。如此有效...

<th>
  <span>Column heading</span>
</th>

然后是 CSS

th {
  padding: 3px 0;
}

th span {
  padding: 0px 15px;
}

然后要生成正确的 HTML，您需要一个回调来包装标题。

$.fn.dataTableExt.oApi.fnColHeads = function( oSettings ) {
  return this.each( function() {
    var $this = $(this);

    $this
      .parents('.dataTables_wrapper:first')
      .find('.dataTables_scrollHead')
        .find('th.sorting_asc, th.sorting_desc, th.sorting')
          // adds the dom objects
          .each(function() {
            var $this = $(this);

            if ( $this.find('span').length < 1 ) {
              $this.wrapInner('<span />');
            }
          });
  });
});

$.extend( $.fn.dataTable.defaults, {
  "fnInitComplete": function() {
    this.fnColHeads();
  }
});

这是我自己的代码的所有简化版本。让我知道它是否有效或您发现任何错误。

于 2013-09-05T17:50:48.487 回答