Bootstrap table表格常用操作 hover提示,动态表格,排序字段自定义获取

目录

表格标题提示，hover可显示

tooltip (提示框)?

动态创建Table

设置表格标题居中

固定左侧右侧表头

使用data-sortable="true"排序, 自定义获取排序参数

---

? ? Bootstrap中文网

表格标题提示，hover可显示

<tr>
     <th data-width="60" data-field="inviterNum" data-toggle="tooltip" title = "这里设置展示的文字">老访客数</th>
 </tr>

这里使用的是tooltip (提示框)

效果

tooltip (提示框)?

tooltip (提示框) 是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。

常用的功能，可以通过以下属性来设置：

data-toggle = "tooltip"	指明这是一个tooltip组件对象，其实可以省略
title = "这里设置展示的文字"	提示框显示的内容。
data-trigger = "{click | hover | focus | manual}"	触发提示框的方式： 1、click 【默认】单击时显示或关闭 2、hover 移上去显示，移出去隐藏 3、focus 单击时显示，点击空白处时隐藏 4、manual 手动模式。需要调用js代码触发显示或关闭提示框
data-html = "{false | true}"	设置提示框内容是否支持HTML格式。默认值:false 当值为true时，title属性值可以设置成html代码。不过建议不要这么设置，以防XSS攻击
data-delay = "{数值}"	设置提示框延迟显示。比如 data-delay = "1000" 时，提示框会在执行后1秒才显示。默认值：0
data-animation = {true | false}	是否动画效果显示提示框。默认值 ：false不显示动画效果。
data-container = {string | false}	默认值false， 当提示框用于按钮组、表单或表格时，必须指定选项容器：'body'以避免不必要的副作用，（例如当触发弹出窗口时元素变宽和/或失去圆角）。 data-container = "body"
data-placement = {left | top | right | bottom | auto}	设置提示框的显示位置，支持多种设置，比如data-placement="auto left"时，提示窗尽可能显示在左边,在情况不允许的情况下它才显示在右边

动态创建Table

// 销毁表格
$('#dataTable').bootstrapTable('destroy');

// 创建表格
$("#dataTable").bootstrapTable({
    columns: columnsArray, //列对象
    data: dataArray,//要显示的数据对象
    showColumns: true,
    onLoadSuccess: function (data) {
        // alert(JSON.stringify(data));
    }
});

// 刷新表格数据
$("#dataTable").bootstrapTable('load', list);

设置表格标题居中

可以使用 Bootstrap 的?mx-auto?类或者text-center?类设置居中

// mx-auto

<div class="mx-auto">
  <table>
    <!-- 表格内容 -->
  </table>
</div>

// text-center

<table class="table table-striped">
  <thead>
     <tr>
        <th data-width="60" data-class="text-center" data-field="title">标题</th> 
     </tr>
  </thead>
</table>

固定左侧右侧表头

在bootstrap-table配置中加入如下配置

url: "",

fixedColumns: true,//开启固定表头（默认固定左侧）

fixedNumber: 4,//固定表头的数量

fixedRightNumber:1,//固定右侧表头的数量；

使用data-sortable="true"排序, 自定义获取排序参数

html

<th data-width="60" data-field="uv" data-sort-name="uv" data-sortable="true">UV</th>

js

// 获取表格里class是desc或asc的对象
var sortOrder = $('#dataTable .desc, #dataTable .asc');
if (sortOrder && sortOrder.length > 0) {
    var div = sortOrder[0];
    var field = div.parentNode.dataset.field;
    var order = div.className.split(' ')[div.className.split(' ').length - 1];

    console.log(field);
    console.log(order);
    if (field) {
        data['sort'] = field;
        data['order'] = order;
    }

}