Maison > interface Web > Tutoriel d'amorçage > Comment réparer l'en-tête de la table bootstrap

Comment réparer l'en-tête de la table bootstrap

藏色散人
Libérer: 2020-11-13 10:15:36
original
8163 Les gens l'ont consulté

bootstrap表格头部的固定方法:首先引入jquery和bootstrap;然后添加固定列代码为“ $("#table").bootstrapTable('destroy').bootstrapTable({...})”即可。

Comment réparer l'en-tête de la table bootstrap

推荐:《bootstrap教程

bootstrap-table固定表头固定列

1.引入

  bootstrap依赖于jquery

  bootstrap-table依赖于bootstrap,所以都需要引入

2. bootstrap-table有两种方式,html、js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

<table id="table" class="table table-bordered table-hover"

           data-toggle="table"  //启用bootstrap表格

           data-classes="table table-hover"

           data-show-columns="true"  //是否显示内容列下拉框。

           data-striped="true"  //设置为 true 会有隔行变色效果

           data-show-toggle="true" //是否显示切换视图(table/card)按钮。

           data-search="true" //是否显示搜索框

           data-show-refresh="true" //是否显示刷新按钮

           data-toolbar="#toolbar"  //工具栏

           data-height="500"//设置表格高度-固定表头生效

        <thead>

        <tr>

            <th>表格 ID</th>

            <th>表格 Name</th>

            <th>表格 Price</th>

            <th>表格 Price</th>

            <th>表格 Price</th>

            <th>表格 Price</th>

            <th>表格 Price</th>

            <th>表格 Price</th>

            <th>表格 Price</th>

            <th>表格 Price</th>

            <th>表格 Price</th>

        </tr>

        </thead>

        <tbody>

        <tr>

            <td>1</td>

            <td>Item 1</td>

            <td>$1</td>

            <td>Item 1</td>

            <td>$1</td>

            <td>Item 1</td>

            <td>$1</td>

            <td>Item 1</td>

            <td>$1</td>

            <td>Item 1</td>

            <td>$1</td>

        </tr>

        <tr>

            <td>2</td>

            <td>Item 2</td>

            <td>$2</td>

            <td>Item 1</td>

            <td>$1</td>

            <td>Item 1</td>

            <td>$1</td>

            <td>Item 1</td>

            <td>$1</td>

            <td>Item 1</td>

            <td>$1</td>

        </tr>

</table>

Copier après la connexion

js方式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

<table id="table"></table><script>

   $("#table").bootstrapTable({

       toolbar: "#toolbar",

       striped: true, //是否显示行间隔色        height:300,

       sortable: false,//是否排序        search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端        strictSearch: true, //是否显示刷新        showColumns: true, //是否显示所有的列        showRefresh: true, //是否显示刷新按钮        minimumCountColumns: 2, //最少允许的列数        showToggle:true, //是否显示详细视图和列表视图的切换按钮        cardView: false, //是否显示详细视图        columns: [{

           field: &#39;id&#39;,

           title: &#39;Item ID&#39;

       }, {

           field: &#39;name&#39;,

           title: &#39;Item Name&#39;

       }, {

           field: &#39;price&#39;,

           title: &#39;Item Price&#39;

       }],//        data可以换成url        data: [{

           id: 1,

           name: &#39;Item 1&#39;,

           price: &#39;$1&#39;

       }, {

           id: 2,

           name: &#39;Item 2&#39;,

           price: &#39;$2&#39;

       }, {

           id: 3,

           name: &#39;Item 3&#39;,

           price: &#39;$3&#39;

       }, {

           id: 4,

           name: &#39;Item 4&#39;,

           price: &#39;$4&#39;

       }, {

           id: 5,

           name: &#39;Item 5&#39;,

           price: &#39;$5&#39;

       }, {

           id: 6,

           name: &#39;Item 6&#39;,

           price: &#39;$6&#39;

       }, {

           id: 7,

           name: &#39;Item 7&#39;,

           price: &#39;$7&#39;

       }, {

           id: 8,

           name: &#39;Item 8&#39;,

           price: &#39;$8&#39;

       }, {

           id: 9,

           name: &#39;Item 9&#39;,

           price: &#39;$9&#39;

       }, {

           id: 10,

           name: &#39;Item 10&#39;,

           price: &#39;$10&#39;

       }]

   })</script>

Copier après la connexion

固定列代码

1

2

3

4

$("#table").bootstrapTable(&#39;destroy&#39;).bootstrapTable({

       fixedColumns: true,

       fixedNumber: 1 //固定列数

   }

Copier après la connexion

效果展示:

3.问题解决
  固定表头展示错位
  解决办法:给 th 添加宽度 data-width="60px"

  固定列也会错位
  解决办法:所有内容不折行,展示在一行(感觉应该是line-height导致的差异)

  固定表头固定列重叠的表头部分左右滚动的时候 没有固定
  解决办法:重叠部分手动加了层级

  当浏览器窗口变化是,表头与表格不对齐,应该怎么办?

1

2

3

4

5

$(&#39;#tableId&#39;).bootstrapTable(); // init via javascript

 

    $(window).resize(function () {

        $(&#39;#tableId&#39;).bootstrapTable(&#39;resetView&#39;);

    });

Copier après la connexion

4.下载地址

  bootstrap-table:http://bootstrap-table.wenzhixin.net.cn/zh-cn/

  bootstrap-table-fixed-columns:https://github.com/wenzhixin/bootstrap-table-fixed-columns

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal