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

2023-12-26 17:06:57

目录

表格标题提示,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;
    }

}

文章来源:https://blog.csdn.net/qq_44695727/article/details/134854986
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。