bootstrapTable插件：行内编辑，冻结列，导出，汇总行，列筛选

木子-李

行走在数据分析路上的小白

还是接着上一篇文章的代码

1、行内编辑插件

x-editable下载地址： https:// github.com/vitalets/x-e ditable

引用行内编辑插件的相关文件

{#    行内编辑插件#}
<link href="{% static 'bootstrapTable/x-editable-develop/dist/bootstrap3-editable/css/bootstrap-editable.css' %}"rel="stylesheet"/>
<script src="{% static 'bootstrapTable/x-editable-develop/dist/bootstrap3-editable/js/bootstrap-editable.min.js' %}"></script>
// JS代码重新定义bootstrapTable
var url = 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data';
    $("#table").bootstrapTable({
        toolbar: '#toolbar',                //自定义工具按钮
        url: url,                           //请求后台的URL（*）
        method: 'get',                      //请求方式（*）
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [10, 20, 50, 100, 'unlimited'], //可供选择的每页的行数（*）
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                      //初始化加载第一页，默认第一页
        columns: [
                field: 'id',
                title: 'ID',
                field: 'name',
                title: '姓名',
                formatter: function (value, row, index) {
                    return '<a href="#" data-pk="' + row.Id + '">' + value + '</a>';
                field: 'price',
                title: '价格'
        ],                   //列参数
        // 单击事件
        onClickRow: function (row, $element) {
            curRow = row;
        //渲染事件
        onLoadSuccess: function () {
            $("#table a").editable({
                {#type: "text",                //编辑框的类型。支持text|textarea|select|date|checklist等#}
                {#title: "用户名",              //编辑框的标题#}
                type: "select",              //编辑框的类型。支持text|textarea|select|date|checklist等
                source: [{value: 1, text: "开发部"}, {value: 2, text: "销售部"}, {value: 3, text: "行政部"}],
                title: "选择部门",           //编辑框的标题
                disabled: false,             //是否禁用编辑
                emptytext: "空文本",          //空值的默认文本
                mode: "inline",              //编辑框的模式：支持popup和inline两种模式，默认是popup
                validate: function (value) { //字段验证
                    if (!$.trim(value)) {
                        return '不能为空';
    });

在表格中给需要编辑的列添加a标签

formatter: function (value, row, index) {
                    return '<a href="#" data-pk="' + row.Id + '">' + value + '</a>';
                }

然后对a标签做x-editable的初始化

onLoadSuccess: function () {
            $("#table a").editable({
                {#type: "text",                //编辑框的类型。支持text|textarea|select|date|checklist等#}
                {#title: "用户名",              //编辑框的标题#}
                type: "select",              //编辑框的类型。支持text|textarea|select|date|checklist等
                source: [{value: 1, text: "开发部"}, {value: 2, text: "销售部"}, {value: 3, text: "行政部"}],
                title: "选择部门",           //编辑框的标题
                disabled: false,             //是否禁用编辑
                emptytext: "空文本",          //空值的默认文本
                mode: "inline",              //编辑框的模式：支持popup和inline两种模式，默认是popup
                validate: function (value) { //字段验证
                    if (!$.trim(value)) {
                        return '不能为空';

效果如下

冻结列插件

引用行内编辑插件的相关文件

{#    冻结列插件#}
<link href="{% static 'bootstrapTable/bootstrap-table-master/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css' %}"
      rel="stylesheet"/>
<script src="{% static 'bootstrapTable/bootstrap-table-master/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js' %}"></script>
// JS代码重新定义bootstrapTable
data = [
            "col-1": '每格内数据的对齐方式,每格内数据的对齐方式',
            "col-2": '每格内数据的对齐方式,每格内数据的对齐方式',
            "col-3": '每格内数据的对齐方式,每格内数据的对齐方式',
            "col-4": '每格内数据的对齐方式,每格内数据的对齐方式',
            "col-5": '每格内数据的对齐方式,每格内数据的对齐方式',
            "col-6": '每格内数据的对齐方式,每格内数据的对齐方式',
            "col-1": '每格内数据的对齐方式,每格内数据的对齐方式',
            "col-2": '每格内数据的对齐方式,每格内数据的对齐方式',
            "col-3": '每格内数据的对齐方式,每格内数据的对齐方式',
            "col-4": '每格内数据的对齐方式,每格内数据的对齐方式',
            "col-5": '每格内数据的对齐方式,每格内数据的对齐方式',
            "col-6": '每格内数据的对齐方式,每格内数据的对齐方式',
    $("#table").bootstrapTable({
        toolbar: '#toolbar',                //自定义工具按钮
        data: data,                         //获取数据
        fixedColumns: true,                 //是否开启冻结列
        fixedNumber: 2,                     //需要冻结的列数
        columns: [
                field: 'col-1',
                title: 'col-1',
                field: 'col-2',
                title: 'col-2',
                field: 'col-3',
                title: 'col-3',
                field: 'col-4',
                title: 'col-4',
                field: 'col-5',
                title: 'col-5',
                field: 'col-6',
                title: 'col-6',
        ],                   //列参数
    });

效果如下：

导出插件

tableExport下载地址： hhurz/tableExport.jquery.plugin

{#    导出按钮插件#}
<script src="{% static 'bootstrapTable/bootstrap-table-master/dist/extensions/export/bootstrap-table-export.min.js' %}"></script>
<script src="{% static 'bootstrapTable/tableExport/tableExport.min.js' %}"></script>
// JS代码
var url = 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data';
    $("#table").bootstrapTable({
        url: url,
        method: 'get',                  //请求方式（*）
        cache: false,                   //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,               //是否显示分页（*）
        pageSize: 10,                   //每页的记录行数（*）
        pageList: [10, 20, 50, 100,],   //可供选择的每页的行数（*）
        showExport: true,               //显示导出按钮
        exportDataType: 'basic',          //'basic':当前页的数据, 'all':全部的数据, 'selected':选中的数据
        exportTypes: ['csv', 'excel'],  //导出文件类型，[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf']
        columns: columns,
    });

效果如下：

汇总行

var url = 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data';
    $("#table").bootstrapTable({
        url: url,
        method: 'get',                  //请求方式（*）
        cache: false,                   //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,               //是否显示分页（*）
        pageSize: 10,                   //每页的记录行数（*）
        pageList: [10, 20, 50, 100,],   //可供选择的每页的行数（*）
        showFooter: true,               //显示页脚
        columns: [
                field: 'id',
                title: 'ID',
                footerFormatter: "总计："
                field: 'name',
                title: '姓名',
                footerFormatter: function (rows) {
                    return rows.length //行数
                field: 'price',
                title: '价格',
                footerFormatter: function (rows) {
                    var field = this.field;
                    return '$' + rows.map(function (row) {
                        return +row[field].substring(1)
                    }).reduce(function (sum, i) {
                        return sum + i
                    }, 0)
    });

不需要引用额外的插件

在初始化的时候显示页脚，每列通过footerFormatter定义页脚格式

showFooter: true,               //显示页脚

效果如下：

列筛选

引用列筛选插件的相关文件

{#    列筛选插件#}
<script src="{% static 'bootstrapTable/bootstrap-table-master/dist/extensions/filter-control/bootstrap-table-filter-control.min.css' %}"></script>
<script src="{% static 'bootstrapTable/bootstrap-table-master/dist/extensions/filter-control/bootstrap-table-filter-control.min.js' %}"></script>
var url = 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data';
    $("#table").bootstrapTable({
        url: url,
        method: 'get',                  //请求方式（*）
        cache: false,                   //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,               //是否显示分页（*）
        pageSize: 10,                   //每页的记录行数（*）
        pageList: [10, 20, 50, 100,],   //可供选择的每页的行数（*）
        filterControl: true,            //显示列筛选
        columns: [
                field: 'id',
                title: 'ID',
                field: 'name',
                title: '姓名',
                filterControl: "select",