当前位置： 文江博客 话题详情

bootstrap-table 请问标题和数据为什么会对不上，谁遇到这样的问题了。

发布于 2022-09-12 01:54:10 字数 309 浏览 27 评论 0

HTML代码：
H~8V_MOP170USBC5N5]]ZBI.png

Js代码：
image.png

显示结果：
image.png

目前知道的第二行跨行就会出现这个问题，请问这个是插问题还是数据问题，求解？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

旧情勿念 2022-09-19 01:54:10

Hello，弄下来感觉问题出在了牵引状态这个占了两行两列然后引起了问题，把它改成一行一列就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格</title>
  <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.css" rel="stylesheet">
  <style>
    body {
      margin: 0;
      overflow-x: hidden;
      font-size: 14px;
      background-color: #0f111d;
      font-family: "Rubik", sans-serif;
    }
    .table-wrapper {
      padding: 50px;
    }
    .table th, .table td{
      color: #fff;
      padding: .5rem .2rem !important;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="layout-body">
      <!-- 表格数据 -->
      <div class="table-wrapper" id="main-wrapper">
        <!-- 表格 -->
        <table class="" id="exampleTableFromData">
          <thead>
            <tr>
              <th data-valign="middle" data-align="center" data-field="state" data-checkbox="true" rowspan="3"></th>
              <th data-valign="middle" data-align="center" data-field="ip_segment" rowspan="3">IP段</th>
              <th data-valign="middle" data-align="center" data-field="attack_status" rowspan="3">攻击状态</th>
              <th data-valign="middle" data-align="center" data-field="business_type" rowspan="3">业务类型</th>
              <th data-valign="middle" data-align="center" rowspan="1" colspan="2">牵引状态</th>
              <th data-valign="middle" data-align="center" colspan="10">基础策略</th>
            </tr>
            <tr>
              <th data-valign="middle" data-align="center" rowspan="2" data-field="status_pl_wall">普通墙</th>
              <th data-valign="middle" data-align="center" rowspan="2" data-field="status_jd_wall">节点墙</th>
              <th data-valign="middle" data-align="center" colspan="3">人工调优</th>
              <th data-valign="middle" data-align="center" colspan="2">牵引类型</th>
              <th data-valign="middle" data-align="center" colspan="2">牵引时长</th>

              <th data-valign="middle" data-align="center" data-field="clean_aids" rowspan="2">清洗辅助</th>
              <th data-valign="middle" data-align="center" data-field="seal_line" rowspan="2">封停线路</th>
              <th data-valign="middle" data-align="center" data-field="default_line" rowspan="2">默认线路</th>
            </tr>
            <tr>
              <th data-valign="middle" data-align="center" data-field="seal_time" class="edit-mode">封停时长</th>
              <th data-valign="middle" data-align="center" data-field="seal_max" class="edit-mode">封停MAX</th>
              <th data-valign="middle" data-align="center" data-field="defense_time" class="edit-mode">防御时长</th>

              <th data-valign="middle" data-align="center" data-field="lx_pt_wall" class="edit-mode">普通墙</th>
              <th data-valign="middle" data-align="center" data-field="lx_jd_wall" class="edit-mode">节点墙</th>
              <th data-valign="middle" data-align="center" data-field="sc_pt_wall" class="edit-mode">普通墙</th>
              <th data-valign="middle" data-align="center" data-field="sc_jd_wall" class="edit-mode">节点墙</th>
            </tr>
          </thead>
            
        </table>
      </div>
    </div>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
  <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.js"></script>
  <script>
    $('table').bootstrapTable('resetView');
    let data = [{
      'ip_segment': '192.168.11.0/24',
      'attack_status': 'DDOS攻击',
      'business_type': '普通高防段',
      'status_pl_wall': '牵引',
      'status_jd_wall': '锁定',
      'seal_time': 25,
      'seal_max': 10,
      'defense_time': 1800,
      'lx_pt_wall': '锁定',
      'lx_jd_wall': '锁定',
      'sc_pt_wall': 1800,
      'sc_jd_wall': 300,
      
      'clean_aids': '是',
      'seal_line': 'CT，NTT，VOX',
      'default_line': 'CT，NTT，VOX',
    }]
    $('#exampleTableFromData').bootstrapTable({
      
      data: data,
      height: "600"
    });
  </script>
</body>
</html>

希望能帮助到你。

回复
夏末的微笑 2022-09-19 01:54:10

@范捷琦Jackie

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            overflow-x: hidden;
            font-size: 14px;
            background-color: #0f111d;
            font-family: "Rubik", sans-serif;
        }
        .table-wrapper {
            padding: 50px;
        }
        .table th, .table td{
            color: #fff;
            padding: .5rem .2rem !important;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="layout-body">
            <!-- 表格数据 -->
            <div class="table-wrapper" id="main-wrapper">
                <!-- 表格 -->
                <table class="" id="exampleTableFromData">
                    <thead>
                        <tr>
                            <th data-width="20" data-valign="middle" data-align="center" data-field="state" data-checkbox="true" rowspan="3"></th>
                            <th data-width="100" data-valign="middle" data-align="center" data-field="ip_segment" rowspan="3">IP段</th>
                            <th data-width="100" data-valign="middle" data-align="center" data-field="attack_status" rowspan="3">攻击状态</th>
                            <th data-width="100" data-valign="middle" data-align="center" data-field="business_type" rowspan="3">业务类型</th>
                            <th data-valign="middle" data-align="center" rowspan="2" colspan="2">牵引状态</th>
                            <th data-valign="middle" data-align="center" colspan="10">基础策略</th>
                        </tr>
                        <tr>
                            <th data-valign="middle" data-align="center" colspan="3">人工调优</th>
                            <th data-valign="middle" data-align="center" colspan="2">牵引类型</th>
                            <th data-valign="middle" data-align="center" colspan="2">牵引时长</th>

                            <!-- 这里跨两行就有问题 -->
                            <th data-valign="middle" data-align="center" data-field="clean_aids" rowspan="2">清洗辅助</th>
                            <th data-valign="middle" data-align="center" data-field="seal_line" rowspan="2">封停线路</th>
                            <th data-valign="middle" data-align="center" data-field="default_line" rowspan="2">默认线路</th>
                        </tr>
                        <tr>
                            <th data-valign="middle" data-align="center" data-field="status_pl_wall">普通墙</th>
                            <th data-valign="middle" data-align="center" data-field="status_jd_wall">节点墙</th>

                            <th data-valign="middle" data-align="center" data-field="seal_time" class="edit-mode">封停时长</th>
                            <th data-valign="middle" data-align="center" data-field="seal_max" class="edit-mode">封停MAX</th>
                            <th data-valign="middle" data-align="center" data-field="defense_time" class="edit-mode">防御时长</th>

                            <th data-valign="middle" data-align="center" data-field="lx_pt_wall" class="edit-mode">普通墙</th>
                            <th data-valign="middle" data-align="center" data-field="lx_jd_wall" class="edit-mode">节点墙</th>
                            <th data-valign="middle" data-align="center" data-field="sc_pt_wall">普通墙</th>
                            <th data-valign="middle" data-align="center" data-field="sc_jd_wall">节点墙</th>
                        </tr>
                    </thead>
                    
                </table>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.js"></script>
    <script>
        $('table').bootstrapTable('resetView');
        let data = [{
            'ip_segment': '192.168.11.0/24',
            'attack_status': 'DDOS攻击',
            'business_type': '普通高防段',
            'status_pl_wall': '牵引',
            'status_jd_wall': '锁定',
            'seal_time' : 25,
            'seal_max' : 10,
            'defense_time' : 1800,
            'lx_pt_wall': '锁定',
            'lx_jd_wall': '锁定',
            'sc_pt_wall' : 1800,
            'sc_jd_wall' : 300,
            
            'clean_aids' : '是',
            'seal_line': 'CT，NTT，VOX',
            'default_line': 'CT，NTT，VOX',
        }]
        $('#exampleTableFromData').bootstrapTable({
            
            data: data,
            height: "600"
        });
    </script>
</body>
</html>
回复
~没有更多了~

关于作者

红颜悴

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文