bootstrap开发管理后台之二：列表绑定接口动态数据
2017-07-11 本文已影响1277人
ccup区块链
bootstrap开发管理后台之二：列表绑定接口动态数据
bootstrap官网有入门教程，但是对于完全的web小白也是很吃力，很难找到项目中实质用的东西，这一篇主要讲，运营管理后台表格如何动态的绑定请求接口的数据。
使用的bootstrap-table插件，页面最上方需要引入如下内容,在上一篇head下面接续引入即可
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
此处请参考上一篇开发之一布局代码
在上一篇布局中的核心区域的div标签，替换下面代码,此处代码时表格样式，即表格区域的按钮布局
<!--核心区-->
<div class="page_main" >
<!--面包导航-->
<ol class="breadcrumb" id="nav_option">
<li>姓名：<input type="text" name="name" style="width: 50px"> </li>
<li>性别：<input type="text" name="sex" style="width: 50px"> </li>
<li id="search_bar"><a href="#"><span class="glyphicon glyphicon-search"></span> 搜索</a></li>
</ol>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">用户信息</div>
<div class="panel-body table-responsive">
<!--一个简单的操作按钮，可以通过onclik事件实现删除操作-->
<div class="toolbar">
<button id="delete" class="btn btn-default" style="background-color: palevioletred">删除</button>
</div>
<!--此处table是核心区，即要显示的表格的最上方title，可以根据自己的需要填写，data-field 的字段是请求接口时的响应json中对应的字段key-->
<table id="users" data-show-columns="true" data-sort-order="desc" data-single-select="true" data-toolbar=".toolbar">
<thead>
<tr>
<th data-sortable="true" data-field="userId">userId</th>
<th data-field="id">id</th>
<th data-field="nickname">昵称</th>
<th data-field="realname">真实姓名</th>
<th data-field="sex">性别</th>
<th data-sortable="true" data-field="createTime">注册时间</th>
</tr>
</thead>
</table>
<!--分页 此处分页只是个样式，还没实现动态载入-->
<nav aria-label="Page navigation" class="pull-right">
<ul class="pagination" style="margin-top: 5px">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">上一页</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">下一页</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
此时想绑定接口数据，此处调用的java接口，js代码如下：
$(document).ready(function(){//加载页面同时调接口请求数据
$ (function () {
var data=getRequestData();//拼装请求接口的请求对象
$.ajax({
url: "/user/list",
type: "POST",
dataType: 'json',
data: JSON.stringify(data),
contentType:'application/json',
async: false,
success:function(msg){//msg是接口响应json,根据自己的接口数据做处理
if(msg.code==200){
// todo 将响应参数中的数组提取出来，加载到table中
const arr = msg.data;
$(function(){
//普通的绑定数据
／* $("#users").bootstrapTable({//对应表单中的id名称users
data:arr
});
*／
//想让列表中的数据能够被选中，然后获取相应的选中行的信息，要使用如下两端jquery
$("#users").bootstrapTable('destroy').bootstrapTable({
// columns:columns,
data:arr
});
$("#users").on("click-row.bs.table",function(e,row,ele){
$(".danger").removeClass("danger");
$(ele).addClass("danger");
});
});
}else{
alert(msg.message);
}
}
})
})
});
getRequestData：
function getRequestData() {
var page ,rows, searchKey,startDate,endDate,uniqueId,role,startSize;
var data={
page:1,
rows:20,
searchKey : $("#searcheKey").val(),
uniqueId :$("#uniqueId").val(),
startDate:$("startDate").val(),
endDate:$("endDate").val()
}
return data;
}
有了上面的代码，想要获取选中行数据的方法：
/*获取选中行对象*/
function getContent(){ //此处于上文table的id对应users
var index = $("#users").find("tr.danger").data("index");
return $("#users").bootstrapTable('getData')[index];
}
验证：可以使用
alert("获取用户昵称：" + getContent().nickname);
对应的表格title的data-field的字段即可获取
关于bootstrap-table 的具体分页实现逻辑，还在探索中。。
