刷新Bootstrap-table
Refresh Bootstrap-table
问题是我无法让 table (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">×</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>
当然不能刷新,你没有按照文档或例子使用可以刷新的数据源。
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 打印到页面,您如何期望 table 知道从哪里获取刷新数据?
更容易修复您的创建方式 table,这样您仍然可以使用下拉菜单等。
查看上面的示例和 doco 链接并:
- 使用
formatter
列选项制作下拉菜单
data-url
从数据源加载,格式见doco
- 只需使用 html 定义 TH,使用这 2 个新选项来处理 tbody 内容
Table 选项
https://bootstrap-table.com/docs/api/table-options/
table#url
https://bootstrap-table.com/docs/api/table-options/#url
-
属性:数据-url
-
类型:字符串
-
详情:
A URL 从远程站点请求数据。
请注意,根据是否指定了 'sidePagination' 选项,所需的服务器响应格式会有所不同。请参阅以下示例:
- 没有服务器端分页
- 使用服务器端分页
-
默认:未定义
-
示例: 来自 URL
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:行字段。
-
默认:未定义
1) 在名为 data-url
的 table 上填写 html 标签
2) 需要刷新时调用js函数$('#teste').bootstrapTable('refresh')
问题是我无法让 table (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">×</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>
当然不能刷新,你没有按照文档或例子使用可以刷新的数据源。
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 打印到页面,您如何期望 table 知道从哪里获取刷新数据?
更容易修复您的创建方式 table,这样您仍然可以使用下拉菜单等。
查看上面的示例和 doco 链接并:
- 使用
formatter
列选项制作下拉菜单 data-url
从数据源加载,格式见doco- 只需使用 html 定义 TH,使用这 2 个新选项来处理 tbody 内容
Table 选项
https://bootstrap-table.com/docs/api/table-options/table#url
https://bootstrap-table.com/docs/api/table-options/#url
-
属性:数据-url
-
类型:字符串
-
详情:
A URL 从远程站点请求数据。
请注意,根据是否指定了 'sidePagination' 选项,所需的服务器响应格式会有所不同。请参阅以下示例:
- 没有服务器端分页
- 使用服务器端分页
-
默认:未定义
-
示例: 来自 URL
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:行字段。
-
默认:未定义
1) 在名为 data-url
2) 需要刷新时调用js函数$('#teste').bootstrapTable('refresh')