那些遇到过的问题

标签: bootstrap-table

如何在引导程序表中设置单选按钮或复选框的样式？

我希望使用https://github.com/cosmicwheels/jquery-checkradios之类的东西来设置Bootstrap表中的单选按钮或复选框.但是,我不明白如何做到这一点,因为实际的相应输入标记是由javascript代码(bootstrap-table.js)中的连接操作创建的.是否有任何规定提供CSS类来设置Bootstrap表中的单选按钮？

css radio-button bootstrap-table

Pra*_*ant
lucky-day
5
推荐指数
1
解决办法
2万
查看次数

表过滤器未在bootstrap-table中初始化

我使用bootstrap 3和bootstrap-table.我想使用表过滤器扩展,但过滤器未初始化.

的jsfiddle

HTML

<div id="filter-bar"> </div>

<table class="table table-striped table-bordered table-hover"  cellspacing="0" data-toggle="table" id="mainTable" data-click-to-select="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true" data-toolbar="#filter-bar" data-show-filter="true">
    <thead>
    <tr>
        <th data-field="name" data-editable="true">Name</th>
        <th data-field="stargazers_count" data-editable="true">Stars</th>
        <th data-field="forks_count" data-editable="true">Forks</th>
        <th data-field="description" data-editable="true">Description</th>
    </tr>
    </thead>
    <tbody>
        <tr><td>ala</td><td>ele</td><td>na</td><td>asd</td></tr>
        <tr><td>ala</td><td>ele</td><td>na</td><td>asd</td></tr>
        <tr><td>ala</td><td>ele</td><td>na</td><td>asd</td></tr>
    </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

JavaScript的

$.fn.editable.defaults.mode = 'inline';

$('table').bootstrapTable({
    editable: true
});
Run Code Online (Sandbox Code Playgroud)

jquery tablefilter twitter-bootstrap twitter-bootstrap-3 bootstrap-table

Mat*_*att
2015 09-09
5
推荐指数
1
解决办法
1619
查看次数

bootstrap-table-filter-control扩展在bootstrap-table中不起作用

我使用bootstrap-table并希望使用table-filter-control扩展.在此示例中,您可以看到如何使用此扩展.当我想将此扩展名用于更多列时,它不起作用.在我的示例中,过滤器仅适用于一列.

的jsfiddle

HTML

<table ref="mainTable" class="table table-striped table-bordered table-hover" 
       cellSpacing="0" id="mainTable" data-show-toggle="true" 
       data-show-columns="true" data-search="true" data-pagination="true" data-filter-control="true">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="Customer Name" data-sortable="true" data-filter-control="select">Customer Name</th>
            <th data-field="Location Type" data-sortable="true">Location Type</th>
            <th data-field="Location" data-sortable="true" data-filter-control="select">Location</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>Cap Corp</td>
            <td>Main</td>
            <td>Norwalk CT 06851</td>
        </tr>
        <tr>
            <td></td>
            <td>Cap Corp</td>
            <td>Other</td>
            <td>Norwalk CT 06851</td>
        </tr>
        <tr>
            <td></td>
            <td>Tel</td>
            <td>Main</td>
            <td>Slough SL1 4DX</td>
        </tr>
        <tr>
            <td></td>
            <td>Tel</td>
            <td>Other</td>
            <td>London W1B 5HQ</td>
        </tr>
    </tbody> …
Run Code Online (Sandbox Code Playgroud)

javascript jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-table

Mat*_*att
2015 09-10
5
推荐指数
1
解决办法
1万
查看次数

如何在Bootstrap表中的选定/选中行中删除文本,

我有一个Bootstrap表

<table id="tblTodaysNews"
..
data-click-to-select="true"
data-response-handler="responseHandler">
<thead>
    <tr>
    <th data-field="Select" data-checkbox="true" data-align="center" valign-align="middle" data-width="5px"></th>
    <th data-field="ID" data-visible="false"></th>
    <th data-field="Title" data-title="Title" data-align="left" valign-align="middle" data-width="auto"></th>
    <th data-field="Description" data-title="Message" data-align="left" valign-align="middle" data-width="70%"></th>
    ...
Run Code Online (Sandbox Code Playgroud)

我想要做的是,当用户选中任何复选框时,在"选择"数据字段中,标题和描述会更改其外观,例如,删除/斜体.我想使用这个"复选框"向用户提供一个可视指示,一旦用户点击,这些行将从数据库中删除,单独的"删除"按钮.

提前致谢.

bootstrap-table

vee*_*eru
lucky-day
5
推荐指数
2
解决办法
1万
查看次数

如何使用 bootstrap-table 导出扩展

我有一张我想要导出的表。我在http://bootstrap-table.wenzhixin.net.cn/偶然发现了 bootstrap-table并认为它很棒，所以我开始使用一些东西。分页，搜索，其他东西工作，太棒了！但我不知道如何让该死的导出扩展工作！我已经在这方面研究了很长时间，在 github 上搜索论坛、博客和文档。无论如何，这就是我所在的位置。

我跑了 

npm install bootstrap-table
Run Code Online (Sandbox Code Playgroud)

然后我在我的标题中添加了几行，并从这个例子中添加了一个脚本到我的正文：http : //issues.wenzhixin.net.cn/bootstrap-table/#extensions/export.html现在我的 index.html.erb 看起来像这个：

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
<link rel="stylesheet" href="../assets/examples.css">
<script src="../assets/jquery.min.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
<script src="../assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>
<script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="../ga.js"></script>
</head>
<body>


<div class="container">

    <div id="toolbar">
        <select class="form-control">
            <option value="">Export Basic</option>
            <option value="all">Export All</option>
            <option value="selected">Export Selected</option>
        </select>
    </div>
<div class="booyah-box">
<table id="table" 
       data-toggle="table"
       data-show-export="true"
       data-pagination="true"
       data-click-to-select="true"
       data-toolbar="#toolbar"
       data-url="../json/data1.json"
       data-page-list="[10, 25, 50, 100, ALL]"
       data-search="true"
       data-show-pagination-switch="true"
       data-show-columns="true"
       data-minimum-count-columns="2"
> …
Run Code Online (Sandbox Code Playgroud)

javascript ruby-on-rails bootstrap-table

bwa*_*n30
2018 09-06
5
推荐指数
1
解决办法
2万
查看次数

如何替换分页中的文本“行”

在分页示例中，如何将底部的文本“行”替换为另一个单词，例如“产品”？

显示 800 行中的 1 到 10 行

变成

显示 800 个产品中的 1 到 10 个

移植自问题跟踪器上的第 882 期bootstrap-table。

bootstrap-table

jtr*_*ull
lucky-day
4
推荐指数
1
解决办法
6075
查看次数

在Flask中使用动态元素构建Bootstrap表

我正在与Flask一起构建一个从SQLAlchemy数据库中获取的人员列表中的Bootstrap表.但是,我想要放在表格中的信息出现在它上面.

这是有问题的代码:

<!DOCTYPE html>

{% extends "base.html" %}

{% block page_content %}
<div class="page-header">
    <h1>componentes familiares</h1>
        <table class="table">
            <thead>
                <th>name</th>
                <th>age</th>
                <th>option</th>
            </thead>
            <tbody>
                {% for person in people %}
                    <tr>{{ person.name }}</tr>
                    <tr>{{ person.age }}</tr>
                    <tr>{{ person.option }}</tr>
                {% endblock %}
            </tbody>
        </table>
{% endblock %}
Run Code Online (Sandbox Code Playgroud)

(这已经是一个精简版本了,因为我一直在关闭它以确定它是否能解决问题.)

但是,假设我的数据库中有两个人,Alice和Bob.爱丽丝30岁,鲍勃40岁,爱丽丝选择1,鲍勃2岁.这就是我得到的:

在此输入图像描述

信息在那里,但它在表格上方呈现.在它下面是表头和一个空表行.

链接

我发现关于瓶引导表另一个问题在这里,但它并没有真正解决我的问题.我的数据完全按照我的要求传递到html页面,我只想把它放在一个表中.

我还发现了Flask-Table,它是用Python构建表然后使用它的扩展.它可能最终成为一个解决方案,但我仍然没有看到我的代码有什么问题.

在Bootstrap文档中找不到任何有用的东西.

任何帮助非常感谢!

python sqlalchemy flask twitter-bootstrap bootstrap-table

Luc*_*nho
2017 05-23
4
推荐指数
1
解决办法
9733
查看次数

bootstrap-table (wenzhixin) --&gt; Ajax 数据

我想使用 wenzhixin ( http://bootstrap-table.wenzhixin.net.cn/ ) 的 bootstrap-table 库，但我的技能似乎不够好，无法运行脚本。

我希望通过 ajax 向该表提供数据。

这是有效的代码（来自源页面的示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SL Time</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Table -->
    <link href="css/bootstrap-table.css" rel="stylesheet">

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script> …
Run Code Online (Sandbox Code Playgroud)

ajax json bootstrap-table

Dan*_*ein
lucky-day
4
推荐指数
1
解决办法
2万
查看次数

Bootstrap-Table：如何隐藏一列而不从 DOM 中删除它？

我在使用 Bootstrap-Table 插件时遇到问题：https : //github.com/wenzhixin/bootstrap-table

我需要隐藏的表中有一个隐藏的 ID 列。但我做不到

<th data-field="id" data-visible="false">ID</th>
Run Code Online (Sandbox Code Playgroud)

因为这会将它从 DOM 中删除。我需要将 ID 保留在 DOM 中，因为它用于表单提交。它只需要隐藏。

这也不起作用，我的样式丢失并且该列不存在：

<th data-field="id" style="display:none;>ID</th>
Run Code Online (Sandbox Code Playgroud)

我什至不能使用 jQuery 手动隐藏列！换句话说，我在 onPostBody 之后尝试了以下操作，但它也从未触发过！

<table id="delegateTable"  data-toggle="table" data-url="delegates.action"
 data-response-handler="delegatesResponseHandler">
   <thead>
        <tr>
           <th data-field="id">ID</th>
           <th data-field="delegate" style="width:10%">Delegate</th>
   </thead>
</table>
Run Code Online (Sandbox Code Playgroud)

jQuery 文档 OnReady：

$(document).ready(function() {

    // Hide column
    $('#delegateTable').bootstrapTable({
        onPostBody : function() {
            $('#delegateTable td:nth-child(0), th:nth-child(0)').hide();
            alert('column hidden');                 
        }
    });
Run Code Online (Sandbox Code Playgroud)

它甚至从未达到过 onPostBody。

jquery bootstrap-table

gen*_* b.
lucky-day
4
推荐指数
1
解决办法
7340
查看次数

如何使 bootstrap-table-filter-control 与 Flask、Jinja 和 Dataframe 一起使用

我正在使用 python Flask render_template 返回一个 html 页面作为我的 python 应用程序的路径，并且在 html 中我想使用 bootstrap-table-filter-control，如此处的 bootstrap 示例中所述。然而，给出的示例似乎使用本地 json 文件中的表。这是示例中给出的代码：

<link href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>

<table
  id="table"
  data-url="json/data1.json"   ## this looks like the code to get the table's data
  data-filter-control="true"
  data-show-search-clear-button="true">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name" data-filter-control="input">Item Name</th>
      <th data-field="price" data-filter-control="select">Item Price</th>
    </tr>
  </thead>
</table>

<script>
  $(function() {
    $('#table').bootstrapTable()
  })
</script>
Run Code Online (Sandbox Code Playgroud)

我该如何更换

数据url =“json/data1.json”

使用从 main.py 应用程序传递的 python 数据框中的我自己的表？我在我的 html 中尝试了以下方法，但它不起作用：

        {% for table in tables %}
            <table id="table" …
Run Code Online (Sandbox Code Playgroud)

html python jinja2 flask bootstrap-table

Mn2*_*n2C
2020 06-16
4
推荐指数
1
解决办法
1万
查看次数

标签 统计

bootstrap-table ×10

jquery ×3

twitter-bootstrap ×3

flask ×2

javascript ×2

python ×2

twitter-bootstrap-3 ×2

ajax ×1

css ×1

html ×1

jinja2 ×1

json ×1

radio-button ×1

ruby-on-rails ×1

sqlalchemy ×1

tablefilter ×1