标签: bootstrap-table

我正在使用bootstrap绘制一个表,我需要搜索和过滤功能.但添加过滤功能后,搜索功能无法正常工作.当我删除行""时,搜索功能起作用,但是过滤功能消失了,如何同时使用该功能？这是代码:

<div id="filter-bar"></div>
<table id="tbl" data-height="299" data-show-toggle="true" data-show-columns="true" data-show-export="true" data-select-item-name="toolbar1">
    <thead>
    <tr>
        <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
        <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
        <th data-field="price" data-align="" data-sortable="true">Item Price</th>
    </tr>
    </thead>
</table>
  <link rel="stylesheet" href="/static/libs/bootstrap3/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/libs/bootstrap3/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="/static/libs/bootstrap-table-master/src/bootstrap-table.css">
  <link rel="stylesheet" href="/static/libs/jasny-bootstrap/css/jasny-bootstrap.min.css">
  <link rel="stylesheet" href="/static/libs/bootstrap-table-master/src/extensions/filter/bootstrap-table-filter.css">
  <script type="text/javascript" src="/static/libs/jquery2/jquery-2.0.3.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/static/libs/bootstrap-table-master/src/bootstrap-table.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/filter/bootstrap-table-filter1.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/filter/bootstrap-table-filter.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/filter/bs-table.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/export/bootstrap-table-export.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/export/tableExport.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/export/jquery.base64.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#tbl").bootstrapTable({
            url: "tbl_data.json",
            method: …

我正在使用bootstrap-table处理来自我的数据库的数据.

我使用分页功能,只使用limit和offset选项发回用户请求的行数.

我还使用表格控件扩展,以便轻松过滤结果.但是当我使用select控件进行过滤时,data-filter-control ="select"这些条目只是那组结果中返回的条目.

当我应用其他过滤器时,列表将会增长.我想使用API​​并让它从该列表的服务器预加载所有可能项目的列表,以允许通过这些选项进行过滤.

虽然我可以使用每个过滤的结果集发回结果,也许在JSON的单独元素中,但最好在控件本身加载后加载此列表,因为我不经常需要发送该组数据用每个过滤器控制.

这可能吗？我可以使用API​​通过一组值预加载此列表吗？

在github上有一个问题似乎描述了类似的问题,我正在使用https://github.com/wenzhixin/bootstrap-table/issues/904并注意补丁,但我不知道如何实现这一点.

我从maxcdn.bootstrapcdn.com使用bootstrap 3.3.4,我通过cdnjs.cloudflare.com使用bootstrap-table 1.8.1

编辑:在使用FireBug逐行遍历代码以确定是否可以执行此操作后,我已经想到了这一点.

向过滤器提供数据有两种选择.将属性data-filter-data添加到.您可以使用"var"或"url"选项后跟下划线(或其他一些被丢弃的字符),然后在"var"的情况下传递一个对象名称,我的看起来像这样的data-filter-data = "var_OnlineValues"和utlizes我的对象var OnlineValues = {"":"","Started":"Started","Submitted":"Submitted"}.我在服务器上也有一些数据作为JSON返回.data-filter-data ="url_filename.php",返回的对象是键/值对.

我希望这有帮助.

我正在使用下面的库:http://bootstrap-table.wenzhixin.net.cn/documentation/

我将json对象加载到这个表中工作正常,但现在出现了问题.我希望能够对列进行排序.

我的Json布局如下:

[{"Total": 12345.56, "Name": "Monkey1", "TotalFormatted": "$ 12.345,56"},{"Total": 13345.56, "Name": "Monkey3", "TotalFormatted": "$ 13.345,56"},{"Total": 11345.56, "Name": "Monkey2", "TotalFormatted": "$ 11.345,56"}]

  <table id="test" data-page-size="10" data-pagination="true" data-unique-id="true" data-show-footer="false">
                <thead>
                    <tr>
                        <th data-field="Name">Name</th>
                        <th data-field="TotalFormatted" data-sort-name="Total" data-sortable="true" data-align="right">TotalFormatted</th>
                    </tr>
                </thead>
            </table>

我想显示TotalFormatted数据,但我想用Total属性对此列进行排序,因为TotalFormatted不能用于此.在文档中,我看到以下内容:

data-sort-name:提供可自定义的排序名称,而不是标题中的默认排序名称或列的字段名称.例如,列可能会显示"html"的fieldName值,例如" abc ",但要排序的fieldName是"content",其值为"abc".

但是,如果数据没有正确排序,是否有人对此进行过表达或者我误解了某些内容？

我正在使用Wenhixin bootstrap-table.js.我的表应该如下表所示. 创建表的代码如下

<table class="table-bodered" data-classes="table table-hover table-condensed" data-toggle="table" data-url="http://localhost:1337/users" data-pagination="true" data-search="true" data-height="600">
                                                    <thead>
                                                        <tr>
                                                            <th data-field="profile_url">Picture</th>
                                                            <th data-field="fullname">Name</th>
                                                            <th data-field="SerialNo">Phone Number</th>
                                                            <th data-field="username">Login ID</th>
                                                            <th data-field="Image">Action</th>

                                                        </tr>
                                                    </thead>
                                                </table>

但是,如果不将image-url转换为图像,则表格如下所示

为了获得表格中的个人资料图片,我编写了以下代码.

var data;

        $.ajax({
            type: "GET",
            url: "http://localhost:1337/users",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "",
            success: function (data) {
                console.log(data); //This is your result 

                console.log(data[1].profile_url);
                for (var i = 0; i < data.length; i++) {
                    var node = document.createElement("LI");
                    var x = document.createElement("IMG");

                    x.setAttribute("src", data[1].profile_url);
                    x.setAttribute("width", "304");
                    x.setAttribute("width", "228"); …

我将bootstrapTable(https://github.com/wenzhixin/bootstrap-table)包装成一个指令,如下所示:

Vue.directive('bootstraptable', {
    priority: 1000,

    params: ['url', 'resource-name'],

    bind: function () {

        var _self = this;

        $(this.el)
            .bootstrapTable({
                pagination: true,
                pageSize: 15,
                pageList: [],
                sidePagination: 'server',
                url: this.params.url,
                queryParams: function (params) {
                    return params;
                },
                cookie: true,
                cookieExpire: '24h',
                cookieIdTable: this.params.resourceName + '-table',
                locale: 'it-IT'
            }).on('load-success.bs.table', function (e, data) {

                $('[data-toggle="tooltip"]').tooltip();
                _self.vm.$compile(_self.vm.$el);
            });
    },
    update: function (value) {
        $(this.el).val(value)
    },
    unbind: function () {
        $(this.el).off().bootstrapTable('destroy')
    }
});

从服务器返回的JSON包含一个带有v-on指令的按钮,因此我必须重新编译注入的HTML行以使按钮指令正常工作.无论如何,似乎以下代码不起作用:

_self.vm.$compile(_self.vm.$el);

我错过了一些明显的东西吗

问题是我无法bootstrap-table在完成注册后使table()更新数据.我试图通过JS来做,但没有成功.我尝试过以下方法:

JS

$.post($form.attr('action'), $form.serialize(), function (result) {
    if (result.status == "true") {
        $(location).attr('href', result.acao.url);
    } else {
        $('#cargo').formValidation('resetForm', true)
        $('#cadastroCargo').modal('hide')
        //ATTEMPT  REFRESH BOOTSTRAP-TABLE:
        $('#teste').bootstrapTable('refresh')
    }
}, 'json');

HTML/PHP

    <button class="btn btn-primary pull-right btn-import-user btn-sm" data-toggle="modal" data-target="#cadastroCargo">Novo Cadastro</button>

<!-- Modal -->
<div class="modal fade" id="cadastroCargo" tabindex="-1" data-keyboard="false" data-backdrop="static" role="dialog" aria-labelledby="cargoLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="cargo" action="Cargo/inserir" method="POST" enctype="multipart/form-data" autocomplete="off">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="cargoLabel">Cadastrar Cargo</h4>
                </div>
                <div class="modal-body">
                    <fieldset>
                        <div class="form-group"> …

我有一个复选框列,它只能在桌面上显示,而不能在Mobile或Tabs上显示.

文档中没有可用的选项来隐藏/显示基于设计的任何列.

我们可以这样做吗？

我有这个行点击功能：

$("#table").on("click-row.bs.table", function (row, $el, field) {
  if (column != 4) {

  }
});

我可以添加什么条件来排除列中的特定列或单元格？我找不到row, $el or field可以识别前的东西。一个单元格索引。

问题

我正在使用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" ); 
})

例

行为可以在:
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" );     
 }); 

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

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

我跑了

npm install bootstrap-table

然后我在我的标题中添加了几行，并从这个例子中添加了一个脚本到我的正文：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"
> …