《前端》bootstraptable2021-01-26

最新推荐文章于 2024-04-12 20:46:50 发布

原创

最新推荐文章于 2024-04-12 20:46:50 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在BootstrapTable中处理单元格过长的问题，通过设置`table-layout:fixed;width: 100%`实现表格固定宽度和省略号效果。同时，文章提供了js代码示例，详细解释了如何获取表格行、列和单元格的值，包括innerText和innerHTML的使用，并展示了两种不同的单击事件处理方法，以便在表格单元格被点击时进行交互操作。

Bootstrap：Bootstrap_table第一篇：快速用bootstrap_table（支持参数）筛选并展示数据，固定表格前几列，实现表格单元格编辑

https://www.cnblogs.com/lelexiu/p/10196062.html

bootstrapTable 中的td过长需要加省略号并且鼠标悬停显示全部

首先需要在html里加style="table-layout:fixed;width: 100%;"

<table class="table table-striped" id="historyTable" data-toggle="table" style="table-layout:fixed;width: 100%;">
</table>

然后在js中colums里加方法

cellStyle:pageLogic.formatter.formatTableUnit,
formatter: pageLogic.formatter.paramsMatter

$("#btTable").on("click", ".process", function (event) {
    var id = $(event.target).attr("name");
    $("#historyTable").bootstrapTable('destroy');
    $('#historyTable').bootstrapTable({
        toggle: 'table',
        method: 'post', 
        url: 'shiHouJianGuan/history',
        toolbar: '#toolbar',
        //pagination: true,//页数
        //search: true,
        queryParams: function (queryParams) {
            var query = {
                id
                 };
            return query;
        },//参数
        showColumns: true,
        showRefresh: true,
        //pageSize: '10',
        columns: [{
            title: 'id',
            field: 'id',
            align: 'center',
            valign: 'middle',
            width: '7%',
            visible: false
         },{
             field

最低0.47元/天解锁文章