标签: bootstrap-table

有一种方法可以使用javascript(http://jsfiddle.net/8svjf80g/1/)将JSON数据加载到Bootstrap表中,但同样的例子并不适用于我.

这是代码 -

 var $table = $('#table');
    var mydata = 
[
    {
        "id": 0,
        "name": "test0",
        "price": "$0"
    },
    {
        "id": 1,
        "name": "test1",
        "price": "$1"
    },
    {
        "id": 2,
        "name": "test2",
        "price": "$2"
    },
    {
        "id": 3,
        "name": "test3",
        "price": "$3"
    },
    {
        "id": 4,
        "name": "test4",
        "price": "$4"
    },
    {
        "id": 5,
        "name": "test5",
        "price": "$5"
    },
    {
        "id": 6,
        "name": "test6",
        "price": "$6"
    },
    {
        "id": 7,
        "name": "test7",
        "price": "$7"
    },
    {
        "id": 8, …

我在Bootstrap Table网站的代码示例中找到的唯一版本使用jQuery1.x。2.x或3.x可以工作吗？那么Bootstrap v4呢？

我正在处理一个 2000 多个条目的 Zotero 数据库，并希望使用Bootstrap Table公开展示它。

但是，由于 Zotero 字段的工作方式，即作者字段，我对 JSON 文件有问题。例子：

"author": [{
    "family": "Obama",
    "given": "Barack"
        }
    ,
        {
    "family": "Obama",
    "given": "Michele"
        }]

如果我使用“author”字段，这将转换为 [Object Object]，或者我可以使用 FlatJson 扩展并仅使用嵌套值（通过“author.0.family”），这会中断搜索并且不会返回所有作者。

更新：见jsfiddle

我正在使用此站点Bootstrap Tables中的Bootstrap表,我将数据从MongoDB返回到表中.

其中一个字段是"ACTIVE",我想根据字段中返回的值设置单元格颜色.如果是"是",我希望单元格为绿色,红色表示"否".

任何帮助,将不胜感激!!谢谢

在我的数据库中，我有字段fname和lname。我正在使用Bootstrap表将结果显示给用户。我想做的是将两个字段串联起来，显示在名为“名称”的一列下。

尽管姓和名在单独的列中，但这当前有效。我想将它们合并到同一列中。

<th data-field="fname">First Name</th>
<th data-field="lname">Last Name</th>
<th data-field="title">Title</th>
<th data-field="position">Position</th>
<th data-field="cell">Cell</th>
<th data-field="home">Home</th>
<th data-field="workgroup">Workgroup</th>

我搜索了文档，但没有看到任何示例。谢谢！

我想设计一个具有多个标题的表。表格设计在那里：

How can I get the column heading name of the corresponding cell clicked using jquery plugin: bootstrap-table

$("#voterTable").on('click-cell.bs.table', function(field, value, row, element) {
      console.log(field);
   });

I have tried something like this, but it gives an object and I couldn't find the column heading property. I have also tried finding column heading in element and value argument but couldn't find the column heading property.

Javascript：

function LinkFormatter(value, row, index) {
  return "<a href='"+row.url+"'>"+value+"</a>";
}

HTML：

<th data-field="snum" data-sortable="true" data-formatter="LinkFormatter" >LINK</th>
<th data-sortable="true">DATA</th>

JSON：

{
  data: [
    [
      "https://www.stackoverflow.com",
      "Stackoverflow"
    ]
  ]
}

对于这种组合，我仅在表的第一列中获得一个条目，该条目表示未定义，并且还链接到/ undefined。但是，我只想显示一列Stackoverflow的列，它是Stackoverflow的URL。

我想念什么？

我正在使用分页实现bootstrap-table,我最近注意到在使用它时,我的自定义jQuery脚本不再起作用了.

更确切地说,这是一个片段:

$(document).ready(function() {

  $('.form-modal-confirm-remove').click(function() {

    alert("Test");

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-fr-FR.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<table data-toggle="table" data-classes="table table-hover table-condensed table-no-bordered" data-pagination="true" data-page-size="2">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td>
        Test
      </td>
      <td>
        <button type="button" class="btn btn-danger btn-circle form-modal-confirm-remove" data-toggle="tooltip" data-placement="top" title="Supprimer">
          <i class="fa fa-trash"></i>
        </button>
      </td>
    </tr>
    <tr>
      <td>
        2
      </td>
      <td>
        Test
      </td>
      <td>
        <button type="button" class="btn btn-danger btn-circle form-modal-confirm-remove" data-toggle="tooltip" …

我正在使用“react-bootstrap-table”来渲染表格。某些列有很长的文本，其中有省略号。我已经设置了宽度=“一些数字”。我想将宽度设置为动态或列应根据文本的长度进行设置。有没有办法在不计算文本长度的情况下设置自动宽度，或者我们可以包装文本并删除省略号？

这是我的代码

<BootstrapTable
          data={products}
          pagination
          options={options}
          striped
          hover
          search
        >


          <TableHeaderColumn width="170" dataField="a1" dataSort columnTitle>some text</TableHeaderColumn>

          // Here i have set widht manually as '  width="160" '
          <TableHeaderColumn width="160" dataField="a2" dataSort columnTitle>some text</TableHeaderColumn>

          <TableHeaderColumn width="140" dataField="a3" dataSort>some text</TableHeaderColumn>


        </BootstrapTable>

我有一个引导表，我在它的 tbody 中附加了 db 的内容，但我无法真正仅在 tbody 中获得响应式垂直滚动（带有固定标题），我尝试用 css 搞乱并让 tbody 显示：阻止溢出：自动，它有点工作，但我失去了标题单元宽度的响应能力，它们变得比 tbody 单元更短。

是否有一个特定的引导类可以做到这一点？

tbody{
max-height: 10vh;
overflow: auto;
}

<html>
<head>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css integrity=undefined crossorigin=anonymous>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js" integrity="sha512-72WD92hLs7T5FAXn3vkNZflWG6pglUDDpm87TeQmfSg8KnrymL2G30R7as4FmTwhgu9H7eSzDCX3mjitSecKnw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div>
<table class="table table-bordered table-striped text-center">
<thead>
<tr><th>User</th><th>Action</th><th>Date</th></tr>
</thead>
<tbody>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
</tbody>
</table>    
</div>
</body>
</html>

我正在尝试创建一个带有表格的网站。我搜索模板并找到了 bootstrap-table 设计...该示例运行良好，但如果我想自己使用这个 bootstrap-table-javascript表它不工作。

这是我的jsp代码：

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Test</title>

        <!-- Scriptimporte: -->
        <script src="${pageContext.request.contextPath}/js/bootstrap-table.js"></script>
        <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
        <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>


        <!-- Tabellenpflege mit XML-Datei -->
        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>
        <c:import var="bookInfo" url="tables/xml_doc.xml"/>
        <x:parse xml="${bookInfo}" var="output"/>

        <!-- css-Dateien -->
        ...


    </head>
    <body>
        <div id="start_header">

            <div id="start_logo"><img src="icons/logo.jpg" alt="" /></div>


        </div>
        <h1>Test</h1>
        <div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">           
        <div class="row">
            <ol class="breadcrumb">
                <li><a href="#"><svg class="glyph stroked home"><use xlink:href="#stroked-home"></use></svg></a></li> …