bootstraptable ( bootstrap 中的表格)

使用 bootstraptable创建表格

一、初始化

1、HTML编写
引人css和js

<link rel="stylesheet" href="{% static 'plugins/bootstrap-table/dist/bootstrap-table.min.css' %}">
<script src="{% static 'plugins/bootstrap-table/dist/bootstrap-table.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js' %}"></script>

定义表格,设置固定列宽和自动换行

<!--
    table-layout: fixed;       // 固定列宽，可在columns 设置列宽 width
    word-break:break-all; word-wrap:break-all;   //自动换行
-->
<table class="table table-hover" id="table-request" 
    style="table-layout: fixed;
    word-break:break-all; word-wrap:break-all;">
 </table>

使用js初始化列表

$('#table-request').bootstrapTable({
        url:'/h/SelectRequest',             //请求后台的URL（*）
        method: 'get',                      //请求方式（*）
        toolbar: '#toolbar',                //工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        sortable: true,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        queryParams: 'queryParams',         //传递参数（*）
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber:1,                       //初始化加载第一页，默认第一页
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        smartDisplay:false,
        search: false,                      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
        strictSearch: true,
        showColumns: false,                 //是否显示所有的列
        showRefresh: false,                 //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
        showToggle:false,                   //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        detailView: false,                   //是否显示父子表
        columns: [
            {
                field:'name',
                title:'名称',
            },{
                field:'data',
                title:'参数',
            },
        ],                     //列设置
});

二、参数传递

//请求参数设置
function queryParams(params) {
    return {
            offset: params.offset,      //从数据库第几条记录开始
            limit: params.limit,        //找多少条
            name: $(...).val()   //其他自定义参数，从页面获取
        }
}

三、通过ajax请求数据

$('#table-request').bootstrapTable({
    ajax:function(request){                    //使用ajax请求
        $.ajax({
            type:"GET",
            url:'/h/SelectRequest',
            contentType:'application/json;charset=utf-8',
            dataType:'json',
            data:request.data,
            success:function (res) {
                request.success({
                    row:res.data,
                });
                $('#table-request').bootstrapTable('load', res.data);
            },
                error:function(error){
                    console.log(error);
                }
        })
    },
    toolbar: '#toolbar',                //工具按钮用哪个容器
    striped: true,                      //是否显示行间隔色
    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    pagination: true,                   //是否显示分页（*）
    sortable: true,                     //是否启用排序
    sortOrder: "asc",                   //排序方式
    queryParams: 'queryParams',         //传递参数（*）
    sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
    pageNumber:1,                       //初始化加载第一页，默认第一页
    pageSize: 10,                       //每页的记录行数（*）
    pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
    smartDisplay:false,
    search: false,                      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
    strictSearch: true,
    showColumns: false,                 //是否显示所有的列
    showRefresh: false,                 //是否显示刷新按钮
    minimumCountColumns: 2,             //最少允许的列数
    clickToSelect: true,                //是否启用点击选中行
    height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
    uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
    showToggle:false,                   //是否显示详细视图和列表视图的切换按钮
    cardView: false,                    //是否显示详细视图
    detailView: false,                   //是否显示父子表
    columns: [
        {
            checkbox: true,
            width:60,
        },
        {
            field:'name',
            title:'名称',
            width:120

        },{
            field:'url',
            title:'请求链接',
        },{
            field:'method',
            title:'请求方式',
            width:60,
        },{
            field:'headers',
            title:'请求头',
            class:'W120',
        },{
            field:'data',
            title:'请求参数',
        },{
            field:'action',
            title:'操作',
            width:100,
            events:'operateEvents',
            formatter:'operateFormatter',       //自定义表格内容，字符串内是方法名称
        }
    ],                     //列设置
});

通过$.ajax({})获取请求数据
在通过load方法渲染数据到table中显示

$('#table-request').bootstrapTable('load', res.data);

后台返回的数据格式

四、行内多按钮操作

 columns: [
           {
                field:'action',
                title:'操作',
                width:100,
                events:'operateEvents',
                formatter:'operateFormatter',       //自定义表格内容，字符串内是方法名称
            }
]

// 单元格，自定义设置
// 操作按钮
function operateFormatter(value, row, index) {
     return [
        '<a class="edit ml10" href="javascript:void(0)" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>　',
        '<a class="remove ml10" href="javascript:void(0)" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
    ].join('');
}
// 行内按钮，点击事件
window.operateEvents = {
    'click .edit': function (e, value, row, index) {
         alert("edit");
    },
    'click .remove': function (e, value, row, index) {
         alert("remove");
    },
};

五、行内样式

在初始化时新增参数：rowStyle

{
 ...,
 rowStyle:'rowStyle',
 ...,
}

方法如下

//行内样式
function rowStyle(row, index) {
    //这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
    var strclass = "";
    if (row.method == "POST") {
        strclass = 'success';//还有一个active
    }
    else if (row.method == "GET") {
        strclass = 'info';
    }
    else {
        return {};
    }
    return { classes: strclass }
}

六、自动列的展示样式

在每一列的配置中新增参数：formatter

   {
        field:'url',
        title:'Url',
        align: 'center',
        formatter:'urlFormatter'
    },

自定义展示内容：

function urlFormatter(value, row, index) {
    var regex = /\{\{(.+?)\}\}/g;
    var url = row.url || '';
    if (url != ''){
      var r_l = url.match(regex);
      if (r_l != null) {
          var size = r_l.length;
          for (var i=0; i < size;i++) {
              url = url.replace(r_l[i],'<a href="#" style="color: #d55f42">'+r_l[i]+'</a>');
          }
      }
    }
    return url;
}

效果如下

七、手动搜索数据

$('#btn_search').on('click',function () {
        var pageSize=$('#table-request').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
        var pageNumber=$('#table-request').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
        $.ajax({
                type:"GET",
                url:'/h/SelectRequest',
                contentType:'application/json;charset=utf-8',
                dataType:'json',
                data:{
                    offset: pageNumber,      //页码
                    limit: pageSize,        //每页条数
                    itemId: itemId,
                    name: $('#text_search').val() || null,
                },
                success:function (res) {
                    var data = res.data;
                    if (data.total === 0) {
                        data.total = 1;
                    }
                    $('#table-request').bootstrapTable('load', data);
                }
            })
    });

使用：

$('#table-request').bootstrapTable('load', data);

八、行内编辑

引入css和js
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-table/dist/bootstrap-table.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/x-editable/bootstrap3-editable/css/bootstrap-editable.css' %}">
    <script src="{% static 'plugins/bootstrap-table/dist/bootstrap-table.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js' %}"></script>
    <script src="{% static 'plugins/x-editable/bootstrap3-editable/js/bootstrap-editable.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.js' %}"></script>

初始化新增配置：onEditableSave

 onEditableSave:function (field, row, oldValue, $el) {
            $.ajax({
                type: "POST",
                url: "/h/EditRequest",
                data: row,
                dataType: 'JSON',
                success: function (data) {
                    console.log(data)
                },
                error: function () {
                    alert('编辑失败');
                },
                complete: function () {

                }

            });
        },

在列设置中新增：editable:true或自定义

{
                field:'name',
                title:'Name',
                width:120,
                editable:{
                    type: 'text',
                    title: '名称',
                    validate: function (v) {
                        if (!v) return '名称不能为空';
                    }
                },
            },

效果：