bsSuggest的表头怎么固定,哪位大神授业解惑一下

Question

$("#shopName").bsSuggest({
ignorecase: true,
effectiveFields : [ "prodShopNo", "prodShopName", "prodPaymentMode", "prodPtsupWarnFlg"],
effectiveFieldsAlias : {
prodShopNo : "店铺号",
prodShopName : "店铺名",
prodPaymentMode : "收银方式",
prodPtsupWarnFlg: "特殊积分方式"
},
idField : "prodShopNo",
keyField : "prodShopName",
data : selectData
}).on('onSetSelectValue', function(e, keyword)

                            下拉时怎么固定表头店铺号,店铺名,收银方式,特殊积分方式呢

Answer 1

bsSuggest是一个基于Bootstrap的自动完成插件，它没有直接提供固定表头的功能。然而，您可以通过以下方式实现固定表头的效果：

使用表格插件: 将bsSuggest的自动完成结果展示在一个表格中，然后使用具有固定表头功能的表格插件，如DataTables或bootstrap-table。这些插件可以让您固定表头，并支持搜索、排序等功能。

使用CSS和JavaScript: 您可以使用CSS和JavaScript来手动实现固定表头的效果。将bsSuggest的结果显示在一个带有表头和内容区域的HTML结构中，然后使用CSS将表头固定在顶部，并为内容区域添加滚动条。您可以使用JavaScript监听滚动事件，以便在内容滚动时同步表头的位置。

下面是一个简单的示例，展示了如何使用CSS和JavaScript来实现固定表头的效果：

HTML结构：

<div class="table-container">
  <table id="result-table">
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody>
      <!-- bsSuggest的自动完成结果展示在这里 -->
    </tbody>
  </table>
</div>

CSS样式：

.table-container {
  height: 200px; /* 设置内容区域的高度，超出高度将出现滚动条 */
  overflow-y: scroll; /* 显示纵向滚动条 */
}

#result-table thead th {
  position: sticky;
  top: 0;
  background-color: #f8f8f8; /* 设置表头背景色 */
  z-index: 1; /* 确保表头在内容之上 */
}

JavaScript代码：

var tableContainer = document.querySelector('.table-container');
tableContainer.addEventListener('scroll', function() {
  var table = document.querySelector('#result-table');
  var thead = table.querySelector('thead');
  thead.style.transform = 'translateY(' + tableContainer.scrollTop + 'px)';
});

通过这种方式，您可以将bsSuggest的自动完成结果以表格形式展示，并实现固定表头的效果。您可以根据实际需求进行样式和交互的调整。