场景:在一个内容比较多的列表页面中,使用bootstrap table的搜索功能后,选择某列,点击此列中一个按钮,跳转到详情页,当我们从详情页返回到table列表页面中,由于内容较多,我们希望第一次输入搜索的值保存在搜索框中,该怎么解决呢?
<table class="table-striped" data-toggle="table" id="tbData" data-search="true" data-pagination="true" data-show-columns="true">
<thead>
<tr>
<th data-sortable="true" data-halign="left">供应商</th>
<th data-sortable="true">起源地</th>
<th data-sortable="true">单价</th>
<th data-sortable="true">询价时间</th>
<th data-sortable="true">有效期</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>供应商名称3</td>
<td>起源地名称</td>
<td>6000</td>
<td>2018-8-1</td>
<td>2018-8-9</td>
<td style="">
<button class="btn btn-danger btn-xs" type="button"><i class="fa fa-remove"></i> 删除</button>
</td>
</tr>
<tr>
<td>供应商名称3</td>
<td>起源地名称</td>
<td>9000</td>
<td>2018-8-1</td>
<td>2018-8-9</td>
<td style="">
<button class="btn btn-danger btn-xs" type="button" onclick="showInputVal()">链接</button>
</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
var height = $(window).height() - 190;
$('#tbData').bootstrapTable('resetView', { height: height });
window.onresize = function() {
var height = $(window).height() - 190;
$('#tbData').bootstrapTable('resetView', { height: height });
}
//$('#myModa1').modal('show');
$(".fixed-table-container").css("padding-bottom", "40px");
$(window).resize(function() {
setTimeout(function() { $(".fixed-table-container").css("padding-bottom", "40px") }, 200);
$('#tableTest1').bootstrapTable('resetView');
$('#tableTest2').bootstrapTable('resetView');
});
var sessionStorageVal = sessionStorage.getItem("inputValue")
console.log(sessionStorageVal)
if (sessionStorageVal != "") {
//setTimeout(function(){
// $(".search").find("input").focus()
// $(".search").find("input").val(localStorageVal);
//},1000)
$('#tbData').bootstrapTable('resetSearch', sessionStorageVal);
}
});
</script>
<script type="text/javascript">
function showInputVal() {
var inputValue = $(".search").find("input").val();
console.log(inputValue)
sessionStorage.setItem("inputValue", inputValue)
location.href = "导入.html"
}
</script>
主要用到sessionStorage对象的存储
和bootstrap Table 的 resetSearch 方法 $('#tbData').bootstrapTable('resetSearch', sessionStorageVal)
微信公众号:前端之攻略