【问题标题】:Refresh Bootstrap-table刷新引导表
【发布时间】:2016-05-21 01:15:53
【问题描述】:

问题是我无法让表(bootstrap-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">
                            <label class="modal-font-body control-label">Informe o Cargo</label>
                            <input name="titulo" type="text" class="form-control input-sm" id="titulo" data-minlength="4" size="35" value="<?= @$cargo->titulo ?>" data-error="Por favor, preencha este campo corretamente!" required>
                            <input type="hidden" name="id"  value="<?= @$cargo->id ?>">
                            <input type="reset" id="configreset" value="reset" hidden>
                        </div>
                        <div id="mensagemSucesso" class="alert alert-success alerta-sucesso" hidden></div>
                    </fieldset>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    <input type="submit" id="salvar" value="Salvar" name="salvar" class="btn btn-primary">
                </div>
            </form>
        </div>
    </div>
</div> 

<table id="teste" name="teste" class="table table-striped" data-toggle="table" data-search="true" data-show-refresh="true" data-show-columns="true"
    <thead>
        <tr>
            <th class="th-small" data-align="left" data-sortable="true">ID</th>
            <th data-align="left" data-sortable="true">Nome</th>
            <th class="th-small">Ações</th>
        </tr>
    </thead>
    <tbody>
        <?php
        foreach ($cargo as $key => $v) {
        ?>
            <tr>
                <td><?= $v->id ?></td>
                <td><?= $v->titulo ?></td>
                <td>
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="submit" data-toggle="dropdown">... <span class="caret"></span></button>
                        <ul class="table-modal dropdown-menu">
                            <li><a data-remote="Cargo/page/visualizar/<?= $v->id ?>" role="button" data-toggle="modal" data-target="#select-modal">Visualizar</a></li>
                            <li><a data-remote="Cargo/page/alterar/<?= $v->id ?>" data-toggle="modal" data-target="#editarIdade">Editar</a></li>
                        </ul>
                    </div>  
                </td>
            </tr>
        <?php } ?>
    </tbody>        
</table>

【问题讨论】:

  • 请更新此线程,接受答案或通过评论提供详细信息或编辑为什么它不回答您的问题

标签: javascript json twitter-bootstrap twitter-bootstrap-3 bootstrap-table


【解决方案1】:

当然它不能刷新,你没有按照文档或示例使用可以刷新的数据源。

http://bootstrap-table.wenzhixin.net.cn/documentation/

http://issues.wenzhixin.net.cn/bootstrap-table/

http://issues.wenzhixin.net.cn/bootstrap-table/#methods/refresh.html

您使用的是data from html 类型的方法,而不是data-url

当您第一次请求页面时使用 php 打印到页面,您希望表格如何知道从哪里获取刷新的数据?

更容易解决您创建表格的方式,这样您仍然有下拉菜单等。

查看上面的示例和文档链接,然后:

  1. 使用formatter 列选项创建下拉列表
  2. data-url 从数据源加载,格式见doco
  3. 只需使用 html 定义 TH,使用这 2 个新选项来处理 tbody 内容



表格选项

https://bootstrap-table.com/docs/api/table-options/

表#url

https://bootstrap-table.com/docs/api/table-options/#url

  • 属性: data-url

  • 类型:字符串

  • 详情:

    从远程站点请求数据的 URL。

    请注意,所需的服务器响应格式因是否指定了“sidePagination”选项而异。请参阅以下示例:

    • 没有服务器端分页
    • 使用服务器端分页
  • 默认:未定义

  • 示例:来自网址


table#rowStyle(用于设置所有正文列的样式)

https://bootstrap-table.com/docs/api/table-options/#rowstyle

  • 属性:数据行样式

  • 类型:功能

  • 详情:

    行样式格式化函数,有两个参数:

    • row:行记录数据。
    • index:行索引。

    支持类或 css。

  • 默认值: {}

  • 示例:行样式


column#formatter(每列选项)

https://bootstrap-table.com/docs/api/column-options/#formatter

  • 属性:数据格式化程序

  • 类型:功能

  • 详情:

    上下文(this)是列对象。

    单元格格式化函数,取三个参数:

    • value:字段值。
    • row:行记录数据。
    • index:行索引。
    • field:行字段。
  • 默认:未定义

【讨论】:

    【解决方案2】:

    1) 在名为data-url的表格上填写html标签

    2) 需要刷新时调用js函数$('#teste').bootstrapTable('refresh')

    【讨论】:

      猜你喜欢
      • 2017-06-25
      • 2015-01-26
      • 2020-06-01
      • 1970-01-01
      • 1970-01-01
      • 2017-04-13
      • 1970-01-01
      • 2018-12-30
      • 2015-11-14
      相关资源
      最近更新 更多