简单知识点实例之三：Bootstrap-Table和后台进行百分百交互的简单实例

最新推荐文章于 2024-05-06 12:56:50 发布

Miss_LL

最新推荐文章于 2024-05-06 12:56:50 发布

阅读量5.7k

点赞数 1

分类专栏： JavaScript 文章标签： javascript bootstrap bootstrap-table

本文链接：https://blog.csdn.net/Miss_LL/article/details/79053488

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这是一个针对前后台交互的例子，可以直接套进项目中通畅运行。第二页之所以数据不对，是因为例子毕竟没有真正的后台，所以数据不对。但是可以套入项目中，就正常了。

重点：

其中bootstrap-table有一个search:truse搜索框的参数我没有使用，而是自己写了一个搜索框，因为那个参数只针对client（客户端数据才有效果，因为客户端数据得到了所有的数据了，但是例子是和后台交互的server服务端例子）
sidePagination:'server'和‘client’区别在于前者是服务端交互数据，后者是客户端得到所有数据后自行进行分页和搜索
responseHandler是处理前期后台传给表格的数据字段的绑定的函数
queryParams是处理一系列操作（如分页、搜索、刷新等）后，发送给后台处理数据的函数

后台传递过来的数据最好是以以下格式：

{
  "total":20,
   "offset":1,
   "limit":10,
  "rows"[
   {
      "id": 0,
      "name": "Item 0"
    },{
      "id": 1,
      "name": "Item 1"
    } 
  ],
}

一、准备json数据存入url/bootstrapTable.json中

{
  "total": 12,
  "offset":1,
  "limit":10,
  "data": [
    {
      "id": 0,
      "name": "Item 0",
      "datetime": 1372751992000
    },{
      "id": 1,
      "name": "Item 1",
      "datetime": 1372751992000
    },{
      "id": 2,
      "name": "Item 2",
      "datetime": 1372751992000
    },{
      "id": 3,
      "name": "Item 3",
      "datetime": 1372751992000
    },{
      "id": 4,
      "name": "Item 4",
      "datetime": 1372751992000
    },{
      "id": 5,
      "name": "Item 5",
      "datetime": 1372751992000
    },{
      "id": 6,
      "name": "Item 6",
      "datetime": 1372751992000
    },{
      "id": 7,
      "name": "Item 7",
      "datetime": 1372751992000
    },{
      "id": 8,
      "name": "Item 8",
      "datetime": 1372751992000
    },{
      "id": 9,
      "name": "Item 9",
      "datetime": 1372751992000
    },{
      "id": 10,
      "name": "Item 10",
      "datetime": 1372751992000
    },{
      "id": 11,
      "name": "Item 11",
      "datetime": 1372751992000
    }
  ]
}

二、具体代码：里面有详细注解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/bootstrap.3.3.7.css" rel="stylesheet">
    <link href="css/bootstrap-theme.css" rel="stylesheet">
    <link href="css/bootstrap-table.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/bootstrap3.3.7.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-table.js"></script>
    <script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript">
        $(function () {
            var $table = $("#table");
            $table.bootstrapTable({
                url:'url/bootstrapTable.json',
                dataType:'json',
                pagination:true,//分页
                paginationPreText:'上一页',
                paginationNextText:'下一页',
                striped:true,//条纹
                height:650,
                showColumns:true,//内容列下拉框
                showRefresh:true,//刷新按钮
                sidePagination:"server",//服务端分页，还有client，不过不认为除非想玩单机版的，基本都是由服务端进行分页
                toolbar:"#toolbar",
                responseHandler:responseHandler,//接受后台传过来的值进行绑定处理的函数
                queryParamsType:"undefined",
                queryParams:queryParams,//一系列操作后向后台发送参数的函数
                columns:[
                    {
                        title:"编码",
                        field:"id",
                        align:'center',
                        valign:"middle"
                    },{
                        title:"名称",
                        field:"name",
                        align:'center',
                        valign:"middle"
                    },{
                        title:"创建时间",
                        field:"datetime",
                        align:'center',
                        formatter:function (value,row,index) {
                            //日期时间戳转换
                            var time = new Date(value);
                            var y = time.getFullYear();//年
                            var m = time.getMonth() + 1;//月
                            var d = time.getDate();//日
                            var h = time.getHours();//时
                            var mm = time.getMinutes();//分
                            var s = time.getSeconds();//秒
                            return y+"-"+m+"-"+d+" "+h+":"+mm+":"+s;
                        }
                    },{
                        title:"操作",
                        align:'center',
                        formatter:function (value,row,index) {
                            var a = "<a href='#' οnclick='method()'>修改</a>";
                            var b = "<a href='#' οnclick='method()'>删除</a>";
                            return a+b;
                        }
                    }
                ]
            });
        });

        function responseHandler(res){
            return{
                'total' : res.total,
                "rows" : res.data,
                "offset" : res.offset,
                "limit" : res.limit
            }
        }

        function queryParams(params){
            //一系列操作后向后台传递的参数，这里可以传搜索框的值
            var searchName = $("#searchName").val();
            return{
                "pageNumber" : params.pageNumber,
                "pageSize" : params.pageSize,
                "searchName" : searchName
            }
        }

        function method() {
            //修改和删除的方法
            alert("修改和删除的方法");
        }
    </script>
</head>
<body>
   <div id="toolbar">
        <form class="form-inline">
            <div class="form-group">
                <label class="control-label">搜索名称</label>
                <input type="text" class="form-control" id="searchName"/>
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
        </form>
    </div>
    <table id="table"></table>
</body>
</html>

三、具体界面

四、具体代码下载：（要用webstrom运行才可看到数据）

http://download.csdn.net/download/miss_ll/10204235

Miss_LL

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
简单知识点实例之三：Bootstrap-Table和后台进行百分百交互的简单实例

这是一个针对前后台交互的例子，可以直接套进项目中通畅运行。第二页之所以数据不对，是因为例子毕竟没有真正的后台，所以数据不对。但是可以套入项目中，就正常了。重点：其中bootstrap-table有一个search:truse搜索框的参数我没有使用，而是自己写了一个搜索框，因为那个参数只针对client（客户端数据才有效果，因为客户端数据得到了所有的数据了，但是例子是和后台交互的se
复制链接

扫一扫

专栏目录