bootstrap开发管理后台之二：列表绑定接口动态数据

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">&nbsp;</li>
        <li>性别：<input type="text" name="sex" style="width: 50px">&nbsp;</li>
        <li id="search_bar"><a href="#"><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</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 的具体分页实现逻辑，还在探索中。。