标签: bootstrap-table

这是发生了什么事

我不知道为什么列标题如此出现两次。我在其他页面上有相同的代码，但它没有这样做。

JQUERY

var $table = $('#table-javascript').bootstrapTable({
    method: 'get',
    url: 'bootstrap_database_email_history.php',
    height: 300,
    cache: false,
    striped: true,
    pagination: true,
    search: false,
    pageSize: 20,
    pageList: [20, 40, 60, 100, 200],
    minimumCountColumns: 2,
    clickToSelect: true,
    columns: [{
        field: 'date',
        title: 'Date',
        align: 'left',
        width: '100'
    },{
        field: 'email', 
        title: 'Email',
        align: 'left',
        width: '20'
    },{
        field: 'sent',
        title: 'Sent',
        align: 'center',
        width: '20'
    },{
        field: 'notsent',
        title: 'Not Sent',
        align: 'center',
        width: '20'
    }]
});

的HTML

<table id="table-javascript"></table>

bootstrap_database_email_history.php

<?
include('../includes/connect.php');
$sql …

我正在使用文知新的 bootstrap-table 模块。( http://bootstrap-table.wenzhixin.net.cn/ )

当我用 JSON 加载引导表时，该字段为空，如下所示："MyField": null

我看到一个破折号或连字符 ( - ) 插入到空表格单元格中。关闭此功能的最佳方法是什么？

编辑：这里的例子https://jsfiddle.net/3k6qrswf/1/

    <table id="table" class="table">
  <thead>
    <tr>
      <th data-field="BookTitle">Title</th>
    </tr>
  </thead>             
</table>

    var testData = [
    {"BookTitle": "abc"},
  {"BookTitle": "def"},
  {"BookTitle": null}
];

$('#table').bootstrapTable({
            data: testData
        });

谢谢

我正在使用引导表。如果我在 style 属性中设置颜色，它会被 bootstrap-table 删除，所以我所做的是我添加了一个像“data-rowcolor”这样的属性，然后使用 javascript 来应用颜色：

$('td[data-rowcolor]').attr("style", "background-color:yellow;");

这种方法的问题在于，当我使用搜索框过滤事物时，颜色会消失。任何想法如何能够在不丢失颜色的情况下设置颜色？

也许我应该在 onSearch 回调中设置颜色，但我不确定它是如何工作的。我看过医生。

使用http://bootstrap-table.wenzhixin.net.cn

这是我的组件包含表代码:

var Component = React.createClass({
  render: function() {
    return (
      <div className="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
            <div className="row">
                <ol className="breadcrumb">
                    <li><a href="#"><span className="glyphicon glyphicon-home"></span></a></li>
                    <li className="active">Users</li>
                </ol>
            </div><!--/.row-->

            <div className="row">
                <div className="col-lg-12">
                    <h1 className="page-header">Tables</h1>
                </div>
            </div><!--/.row-->


            <div className="row">
                <div className="col-lg-12">
                    <div className="panel panel-default">
                        <div className="panel-heading">User List</div>
                        <div className="panel-body">
                            <table ref='table' data-toggle="table" data-url='http://localhost:3000/admin/users'  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">
                                <thead>
                                    <tr>
                          <th data-field="firstName">First Name</th>
                          <th data-field="lastName">Last Name</th>
                          <th data-field="level">Level</th>
                          <th data-field="verified">Verified</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div> …

我使用bootstrap 3和bootstrap-table.我想在这个例子中使用'tag'模式.

当我使用select2版本3.4.4(像在x可编辑的示例中)我的代码工作,但当我想使用最新版本4.0.0时,我的代码不起作用.

我收到错误消息:

未捕获错误:没有select2/compat/inputData

我试图用select2.full.js替换select2.js,但在这种情况下,可编辑框为空.

如何使可编辑单元格与最新版本的select2兼容？

HTML

    <table class="table table-striped table-bordered table-hover"  cellspacing="0" id="mainTable" data-click-to-select="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="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 class="tag" data-toggle="manual" data-type="select2" data-value="na, an, sd">na,an,sd</td><td>asd</td></tr>
        <tr><td>ala</td><td>ele</td><td class="tag">na,an,sd</td><td>asd</td></tr>
        <tr><td>ala</td><td>ele</td><td class="tag">na,an,sd</td><td>asd</td></tr>
    </tbody>
</table>

JavaScript的

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

$('table').bootstrapTable({
    editable: true
});

console.log($('.tag'));

var tagCells = $('.tag');
$(tagCells).each(function() {
    var tags = …

我尝试使用bootstrap表可编辑.在我的jsp页面中,我有:

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

      <thead>
        <tr>
         <th data-field="id" data-align="center">id</th>
         <th data-field="type" data-align="center">type</th>
         <th data-field="quantity" data-align="right" data-sortable="true">cost</th> 
        </tr>
      </thead>
  </table>
</div>            

我的桌子很棒.现在我想添加可编辑的方法.我添加了<script src="assets/js/bootstrap-table-editable.js"></script>然后如何？我不清楚(我是新手..),我如何继续..

我使用 bootstrap-table 从数据库中填充数据，但在如何重置表（包括“排序”功能及其图标）方面遇到了问题。我到目前为止使用过：

$('#table').bootstrapTable('resetView');
$('#table').bootstrapTable('refresh');

在http://bootstrap-table.wenzhixin.net.cn/documentation/ 上，但它们都不起作用。我有一个重置按钮，但它不起作用。

$('#resetBtn').on('click', function() {

});

我正在使用 wenzhixin 的 Bootstrap Table。我需要按几列进行过滤。例如，我需要过滤国家，然后过滤城市。

表中的每个字段都有两个选择字段（选择国家/地区和选择城市）。

我现在这样做的方式是在更改选择选项时应用filterBy方法：

    $('#countries-list').on('change', function (evt) {
        var selectedCountry = $('#countries-list').select2('val');
        if (selectedCountry == "all") {
            $tableFilter.bootstrapTable('filterBy');
        } else {
            $tableFilter.bootstrapTable('filterBy', {country: selectedCountry});                
        }
    });

    $('#cities-list').on('change', function (evt) {
        var selectedCity = $('#cities-list').select2('val');
        if (selectedCity == "all") {
            $tableFilter.bootstrapTable('filterBy');
        } else {
            $tableFilter.bootstrapTable('filterBy', {city: selectedCity});              
        }
    });

问题是它们互相覆盖。我将不胜感激有关如何仅将第二个过滤器应用于第一个过滤器的结果而不是整个数据集的建议。

谢谢你！

我想将 2016-09-14T13:46:39+0000 格式化为 DD/MM/YYYY。数据来自 JSON 文件/url 到引导表中。有没有办法使用 bootstrap-table 或 javascript 对其进行格式化？

参见jsfiddle

谢谢，

<table data-toggle="table" 
   data-url="https://api.myjson.com/bins/44564"
   data-row-style="rowStyle">
<thead>
<tr>
    <th data-field="createdAt">Created At</th>
</tr>
</thead>

我正在创建一个带有 html 表格的时间线。我想根据一行中代表的人的寿命对一行中的数据单元格进行着色。也就是说，如果这个人生活在 1835 年到 1910 年之间，那么所有这些列都会被着色。1835 年之前和 1910 年之后的都不会。

我目前只有一个占位符波浪号作为“年份”单元格的内容：

<tr>
      <th scope="row">John Marshall Clemens</th>
      <td>Father</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>

最终效果应该是这样的（假设约翰马歇尔至少在 1794 年到 1797 年期间还活着：