那些遇到过的问题

标签: bootstrap-table

修复Bootstrap表的第一列

我在这篇文章中关注了@ koala_dev的代码,试图锁定我的表水平滚动的第一列.不幸的是,代码对我的表没有影响.我想知道是否有人可以给我一些关于我做错了什么的指示,因为我是编程新手.

这是我的桌子:http: //jsfiddle.net/mademoiselletse/bypbqboe/59/

这是我在JS中插入的代码(第121-133行): 

$(function() {
    var $tableClass = $('.table');
    // Make a clone of our table
    var $fixedColumn = $tableClass.clone().insertBefore($tableClass).addClass('fixed-column');

    // Remove everything except for first column
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();

    // Match the height of the rows to that of the original table's
    $fixedColumn.find('tr').each(function(i, elem) {
      $(this).height($tableClass.find('tr:eq(' + i + ')').height());
    });
});
Run Code Online (Sandbox Code Playgroud)

这是我插入的CSS属性(第36-47行):

.table-responsive > .fixed-column {
   position: absolute;
   display: inline-block;
   width: auto;
   border-right: 1px solid #ddd;
}

@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    } …
Run Code Online (Sandbox Code Playgroud)

javascript css bootstrap-table

Vic*_*Vic
2017 05-23
18
推荐指数
2
解决办法
5万
查看次数

Bootstrap导出选项适用于5,000行,并且在网络故障的16,000行中失败

下面是有5000条记录的html.出口工作完全正常.但是,当记录增加到16,000时,它表示所有出口的网络故障.在控制台中没有找到错误.我不确定原因.在Chrome中测试过.

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/extensions/export/bootstrap-table-export.min.js"></script>
</head>

<body>
  <table data-toggle="table" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-show-export="true" data-minimum-count-columns="2" data-show-pagination-switch="true" data-pagination="true" data-id-field="id"
    data-page-list="[10, 25, 50, 100, ALL]" data-show-footer="false" data-side-pagination="client" data-url="https://jsonplaceholder.typicode.com/photos">
    <thead>
      <tr>
        <th data-field="id">Id</th>
        <th data-field="title">Title</th>
        <th data-field="url">URL</th>
        <th data-field="thumbnailUrl">Thumbnail URL</th>
      </tr>
    </thead>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

有超过15,000条记录

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/extensions/export/bootstrap-table-export.min.js"></script>
</head>

<body>
  <table data-toggle="table" data-search="true" data-show-refresh="true" …
Run Code Online (Sandbox Code Playgroud)

javascript twitter-bootstrap bootstrap-table

Kat*_*hir
2017 09-11
16
推荐指数
1
解决办法
826
查看次数

引导表.如何从表中删除所有边框？

如何从引导表中删除所有(特别是外部的)边框？这是一张没有内边框的桌子:

HTML

<style>
    .table th, .table td { 
        border-top: none !important;
        border-left: none !important;
    }
</style>
<div class="row">
    <div class="col-xs-1"></div>
    <div class="col-xs-10">
        <br/>
        <table data-toggle="table" data-striped="true">
            <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>C</td>
                <td>D</td>
            </tr>
            <tr>
                <td>E</td>
                <td>F</td>
            </tr>
            </tbody>
        </table>
    </div>    
    <div class="col-xs-1"></div>
</row>
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/sba7wkvb/1/

需要覆盖哪些CSS样式才能删除所有边框？

css twitter-bootstrap twitter-bootstrap-3 bootstrap-table

ytt*_*rrr
lucky-day
14
推荐指数
2
解决办法
6万
查看次数

使用jquery获取引导程序中所选表行的值

我正在使用bootstrap表.我希望Item ID在单击'Add to cart'同一页面上的按钮后获取所选表行的值/值.

表格代码:

<table data-toggle="table" id="table-style" data-row-style="rowStyle" data-url="tables/data2.json"  data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc" data-single-select="false" data-click-to-select="true" data-maintain-selected="true">
  <thead>
    <tr>
      <th data-field="state" data-checkbox="true"></th>
      <th data-field="id" >Item ID</th>
      <th data-field="name" data-sortable="true">Product Name</th>
      <th data-field="price" data-sortable="true">Actual Price</th>
      <th data-field="discount_price" data-sortable="true">Discount Price</th>
      <th data-field="stock_avail" data-sortable="true">Stock Available</th>
    </tr>
  </thead>
</table>
Run Code Online (Sandbox Code Playgroud)

JQuery代码:

$(document).ready(function()
{
   $("#add_cart").click(function()
   {
      //foreach selected row retrieve 'Item ID' values in array;
      //call ajax for otherpage.php?arr='Item ID array';
   });
});
Run Code Online (Sandbox Code Playgroud)

因为我是bootstrap的新手,我正试图解决这个问题,但没有得到适当的解决方案,任何人请告诉我这个.

在此输入图像描述

javascript jquery twitter-bootstrap bootstrap-table

Vil*_*las
2015 08-24
12
推荐指数
2
解决办法
6万
查看次数

如何在Bootstrap表中添加Bootstrap按钮

如何在Bootstrap表中添加Bootstrap按钮

twitter-bootstrap bootstrap-table

Jos*_*udi
2018 12-17
11
推荐指数
2
解决办法
3万
查看次数

引导表上的滚动条

我有table一个panel内部渲染modal.由于表格相对较大,我想将它的行限制为5,以便模态不会变得可滚动.我浏览了SO和谷歌以及我发现我需要设置overflow-y:auto或者overflow-y:scroll 让它工作的所有地方,但是在我的情况下,它没有.我还设置了400px的随机高度和position:absolute.这使得表可以滚动但现在面板关闭,<thead>并且表的主体在面板外部呈现.有什么办法解决这个问题？

我的代码片段是:

<div class="modal fade">
   <div class="modal-dialog " >
      <div class="modal-content">
         <div class="modal-body">
            <div class="panel panel-default">
               <div class="panel-body">
                  <table class="table table-bordered>
                     <thead>
                         [........]
                     </thead>
                     <tbody style="overflow-y:auto; height:400px; position:absolute>
                     [.......]
                     </tbody>
                   </table>
Run Code Online (Sandbox Code Playgroud)

[......剩下</div>的......]

编辑

谢谢你的回复.有没有办法将滚动条缩小到<tbody>单独使<thead>保持静止状态？

html css responsive-design twitter-bootstrap bootstrap-table

blu*_*ren
2016 10-08
10
推荐指数
2
解决办法
5万
查看次数

在启动时隐藏引导表中的列

我有下表,我在哪里使用 Bootstrap-table

<div class="row mystyle" >
    <div class="col-md-12">
        <table id="mytable"  data-row-style="rowStyle" class="table table-hover" id="table-pagination " 
               data-url="labels.json" 
               data-toggle="table"
               data-pagination="true"
               data-show-pagination-switch="true"
               data-sort-order="desc" 
               data-search="true"
               data-show-refresh="true" 
               data-show-columns="true"
               data-page-list="[10, 25, 50, 100, ALL]"                     
               >

            <thead>
                <tr>
                    <th data-field="customer.name" data-align="center" data-sortable="true">customer</th>
                    <th data-field="type" data-align="center" data-sortable="true">type</th>
                    <th data-field="description" data-align="center" data-sortable="true">description</th>
                    <th data-field="cutter" data-align="center" data-sortable="true">cutter</th> 
                    <th data-field="valid_s" data-align="center" data-sortable="true">valid</th>
                </tr>
            </thead>
        </table>
    </div>            
</div>
Run Code Online (Sandbox Code Playgroud)

有没有办法定义在启动时隐藏哪些列？例如,我想只显示customer和description列.

twitter-bootstrap bootstrap-table

yay*_*zis
2017 06-13
10
推荐指数
3
解决办法
2万
查看次数

在bootstraptable中向上或向下移动行

我正在项目中使用Bootstrap-Table,我想向上或向下移动行.

我有这些动作事件:

window.actionEvents = {
'click .up': function (e, value, row, index) {
var thisrow = $(this).parents("tr:first"),
thisrow.prev().data('index', rowindex);
},
'click .down': function (e, value, row, index) {
var thisrow = $(this).parents("tr:first");
thisrow.insertAfter(thisrow.next());
},
}
Run Code Online (Sandbox Code Playgroud)

它在屏幕上移动行但由于行索引没有改变而无法正常工作......

所以我试图改变行,.data('index')但它不起作用......

有人成功移动了一排吗？

javascript jquery twitter-bootstrap bootstrap-table

Ama*_*ine
2016 04-29
7
推荐指数
1
解决办法
3282
查看次数

引导表列太宽,当我设置无包装

我试图使一个表行为"正确"(并正确地说我的意思)

  • 使用我给出的宽度百分比
  • 不要换行,而是使用省略号任何溢出

Bootstrap说我的宽度可以指定为th标签样式标记中的内嵌最大宽度百分比

 table.table.table-striped.table-bordered th,
 table.table.table-striped.table-bordered th.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述https://jsfiddle.net/DTcHh/87084/

或者我指定的无包装高度 ......但不是两者都有

  /* CSS used here will be applied after bootstrap.css */

table.table.table-striped.table-bordered td,
table.table.table-striped.table-bordered td.text {
  /*max-width: 177px;*/
}

table.table.table-striped.table-bordered td,
table.table.table-striped.table-bordered td.text, 
table.table.table-striped.table-bordered th,
table.table.table-striped.table-bordered th.text, 
table.table.table-striped.table-bordered span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述 https://jsfiddle.net/n85026uy/

但是我该怎么做才能使页面不包含单词(仅一行),但同时服从我给它的内联%.

省略号不仅没有运行,而且页面下方(底部)出现了一个巨大的废话水平滚动,但是底部的导航tfooter控件被推离屏幕右侧.

我想拥有:

  • 使用的内联百分比
  • 如果它太窄则使用省略号而不包装.

不应该这么难

html css bootstrap-table

Mr *_*lis
lucky-day
7
推荐指数
1
解决办法
3607
查看次数

在bootstrap表问题中打开bootstrap select

问题

我正在使用bootstrap-table插件和bootstrap-select插件,它们都非常好用.
但是当我在 bootstrap-table中使用bootstrap-select时,我遇到了一个问题.如果最后一行的选择框打开,则表格大小会改变,而不是选择框"覆盖"表区域,从而创建一个我不喜欢的滚动区域.

如下图所示: 在此输入图像描述

我试图使用下面的javascript代码"修复"此效果,但无济于事.代码被执行但问题仍然存在.我没有看到哪个css对此行为负责,并且非常感谢任何帮助.

$('.table-responsive').on('show.bs.select', function () { 
  console.log("triggered show bs select");
  $('.table-responsive').css( "overflow", "hidden" ); 
}); 
$('.table-responsive').on('hide.bs.select', function () { 
  console.log("triggered hide bs select");
  $('.table-responsive').css( "overflow", "auto" ); 
})
Run Code Online (Sandbox Code Playgroud)

例

行为可以在:
Jsfiddle:http ://jsfiddle.net/e3nk137y/8612/

编辑

我现在有它工作,但只有在桌子上应用padding-bottom并使用以下js代码:

$('.table-responsive').on('show.bs.select', function () { 
      $('.table-responsive').css( "overflow", "inherit" );
      $('.bootstrap-table').css( "overflow", "inherit" ); 
      $('.fixed-table-body').css( "overflow", "inherit" );     
 });
Run Code Online (Sandbox Code Playgroud)

我现在暂时打开这个问题,因为在我的意见中这不是一个"好的"修复,特别是需要再次"隐藏"选择框所需的填充.

html javascript bootstrap-select bootstrap-table

Bas*_*ein
2016 09-19
6
推荐指数
1
解决办法
3989
查看次数

标签 统计

bootstrap-table ×10

twitter-bootstrap ×7

javascript ×5

css ×4

html ×3

jquery ×2

bootstrap-select ×1

responsive-design ×1

twitter-bootstrap-3 ×1