bootstrap table表头列名转行

最新推荐文章于 2025-01-21 11:17:17 发布

桀骜浮沉

最新推荐文章于 2025-01-21 11:17:17 发布

阅读量924

点赞数 1

分类专栏：前端基础文章标签： bootstrap table表头列名转行

本文链接：https://blog.csdn.net/weixin_45742032/article/details/102682039

版权

前端基础专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种在表格中使表头列名换行的方法，通过在需要换行的列名中添加<br/>标签，并调整单元格样式以确保内容水平居中。此外，还展示了如何配置表格参数，包括列定义、数据源和分页等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表头列名转行

首先为所有单元格添加样式保证单元格中内容水平居中

/*水平居中*/
    th{
        vertical-align: middle !important;
    }

在需要转行的列名中添加<br/>标签

     var templateTableParams = {
        classes: "table table-bordered table-hover",
        url: "后台访问路经",
        method: 'post',
        contentType: "application/x-www-form-urlencoded",
        dataType: "json",
        cache: false,     //是否使用缓存，默认为true
        striped: true,    //是否显示行间隔色
        singleSelect: true,   //单选
        clickToSelect: true,  //是否启用点击选中行
        queryParams:function () {
            var params = {
                maindjh: $('#maindjh').val()
            };
            return params;
        },
        columns:  [
            { checkbox: true },
            {  title: "序号", align:'center', halign:"center",  formatter: function (value, row, index) {  return index + 1;  }},
            {  field: 'jhyc', title: "计划月次",align:"center",halign:"center"},
            {  field: 'lxdh', title:"计划单号",halign:"center", formatter :'paramsMatter'},
            {  field: 'gyfl', title: "物资分类",halign:"center",align:"center" ,  formatter :'paramsMatter'},
            {  field: 'itemCode', title: "物资编码",halign:"center", sortable:true, formatter :'paramsMatter' },
            {  field: 'itemName', title: "物资名称",halign:"center" ,  sortable:true,formatter :'paramsMatter'},
            {  field: 'cz', title: "物资属性" ,halign:"center" , formatter :'paramsMatter' },
            {  field: 'dw', title: "计量<br/>单位" ,align:'center',halign:"center"  },
            {  field: 'xqsl', title: "需求数量",halign:"center",align:'right'}
        ],
        cardView:(function(){ return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); })(),
        onlyInfoPagination:false,//显示总记录数  必须打开pagination=true
        pagination: false,      //显示分页
        pageNumber: 1,             //初始化加载第一页，默认第一页
        pageSize:10,               //每页记录数
        pageList:[5,10,20],      //可供选择的每页的行数
        idField: 'id',
        uniqueId: 'id',
        smartDisplay:false,
        onPostBody:function (data) {
        },
        onLoadSuccess: function(data) {
        }

    };