您的位置：首页 > Web前端 > BootStrap

bootstrap-table插件

2020-04-23 13:01 986 查看

bootstrap是一个仅仅依靠一些css类就能实现页面布局的css框架，还有很多实用的组件，比如模态对话框，表单，表格等。不管是哪一个框架，table表格都是必不可少的，bootstrap表格虽然强大而且美观，但是用它来做的话，需要自己实现分页布局、单选，多选，传参，加载前加载后的处理等都需要考虑到，控制起来还是相当麻烦的，这时候就有了bootstrap table这个插件。用过easyui的同学，必然知道easyui的datagrid，如果你知道的话，那么bootstrap table的用法跟easyui的datagrid如出一辙，学起来就轻松方便多了，不过即便不知道什么easyui的datagrid，也丝毫没有影响，因为我已经把最常用的格式贴在了下面，有了这个认识，如果还不能满足你的需求的话，可以参考官网的更多配置。

先看下整体效果：

html代码：

[code]<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/resources/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/resources/bootstrap/css/bootstrap-table.min.css">
    <script src="/resources/jquery-1.12.4.min.js" ></script>
    <script src="/resources/bootstrap/js/bootstrap.min.js" ></script>
    <script src="/resources/bootstrap/js/bootstrap-table.min.js" ></script>
    <script src="/resources/bootstrap/js/bootstrap-table-zh-CN.min.js" ></script>
<title>bootstrap-table</title>
<style>
.cont{
padding-top:15px
}
.lspace{
margin-left:6px;
}
</style>
</head>
<body>
 	<div class="container-fluid">
 		<section class="cont">
 		<table id="table"></table>
 		</section>
 		<div id="toolbar" class="btn-group">
     <button id="btn_query" type="button" class="btn btn-default" >
         <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>查询
     </button>
 </div>
 	</div>
</body>
</html>

js代码：

[code]<script type="text/javascript">
$("#btn_query").click(function(){
$('#table').bootstrapTable('refresh',{query:{
online_date:">2017-10-01"
}});
});
$('#table').bootstrapTable({ 
    sortable: true, 
    //默认传入后台的排序字段,相当于给queryParams属性的回调函数的参数params.sort赋值
    sortName : 'sortnum',
    sortOrder : 'asc',
    method: 'post',
    contentType: "application/x-www-form-urlencoded",
    dataType: "json",
    pagination: true,  //分页
    sidePagination: "server", //服务端处理分页
    pageNum:1,//默认显示第1页
    pageSize:7,//页面默认显示多少条
    pageList:[5,7,10],//可供选择的页面条数下拉框
    singleSelect: false,//可以多选
    striped: true,//斑马线效果
    showRefresh:true,//刷新按钮
    showColumns:true,//可以勾选隐藏或显示特定列
    clickToSelect: true,//是否启用点击选中行
    toolbar:'#toolbar',//自定义工具栏
      /*每次调用bootstrapTable('refresh',{query:{键值对,会覆盖queryParams的回调函数中指定的同键参数}});
都会去请求url属性指定的地址，并传入这里面的参数*/
   	queryParams:function queryParams(params){
        return {
           limit: params.limit,//即：pageSize
           offset:params.offset,//即:(pageNumber-1)*pageSize,可用于分页
           otherparam:'其他参数的值',//传入后台的其他参数可在此设置
           sortOrder: params.order,//排序
           sortName:params.sort//排序字段
        };
    },
    url: 'getAdvers',//后台地址
    columns: [{
             title:'全选',
             field:'ck',
             checkbox:true,
             width:25,
             align:'center',
             valign:'middle'
         }, {
        field: 'name',
        title: '广告名称',
        sortable:true  //点击排序按钮传入后台对应的sortName和sortOrder,此处传入name和asc/desc
    },{
        field: 'jump_link',
        title: '跳转链接',
       formatter:function(v,row,i){
    	   return "<a href='"+v+"' target='_blank'>打开链接</a>";
       }
    },{
        field: 'online_date',
        title: '上线日期'
    },{
        field: 'ad_status',
        title: '状态',
       formatter:function(v,row,i){
    	   if(v=="4"){
    		   return "已下线";
    	   }else{
    		  return "上线";
    	   }
       }
    },{
        field: 'xx',
        title: '操作',
       formatter:function(v,row,i){
    	   return "<a href='#'>编辑</a><a href='#'  class='lspace'>删除</a>";
       }
    }],
   onLoadSuccess:function(){
  console.log("表格数据渲染成功");
   }
});
</script>

好的，上边这些写好就大功告成了。

下面是几个参数的请求截图。

页面初始加载时传递的参数：