bootstrap table使用总结 - wdcwy

wdcwy

bootstrap table使用总结

使用bootstrap table可以很方便的开发后台表格，对数据进行异步更新，编辑。下面就来介绍一下bootstrap table的详细使用方法：

因为之前在官网也找了很久的教程，源码感觉隐藏的比较隐秘，其他扩展功能也很难找到，其实都在：http://issues.wenzhixin.net.cn/bootstrap-table/index.html这里面，点击上面的tab可以找到具体的功能实现（特别是extension和issues，之前以为issues不是教程，结果点进去才知道）：

最简单的异步表单

1.html中加入如下代码：

<table id="table"></table>
  • 1

2.javascript

/*bootstrap table*/
$(\'#table\').bootstrapTable({
    url:"/wadmin/permission/doRuleList",//请求数据url
    queryParams: function (params) {
        return {
            offset: params.offset,  //页码
            limit: params.limit,   //页面大小
            search : params.search, //搜索
            order : params.order, //排序
            ordername : params.sort, //排序
        };
    },
    showHeader : true,
    showColumns : true,
    showRefresh : true,
    pagination: true,//分页
    sidePagination : \'server\',//服务器端分页
    pageNumber : 1,
    pageList: [5, 10, 20, 50],//分页步进值
    search: true,//显示搜索框
    //表格的列
    columns: [
        {
            field: \'id\',//域值
            title: \'规则ID\',//标题
            visible: true,//false表示不显示
            sortable: true,//启用排序
            width : \'5%\',
        },
        {
            field: \'name\',//域值
            title: \'唯一英文标识\',//标题
            visible: true,//false表示不显示
            sortable: true,//启用排序
            width : \'30%\',
            editable:true,
        },
        {
            field: \'title\',//域值
            title: \'中文描述\',//内容
            visible: true,//false表示不显示
            sortable: true,//启用排序
            width : \'35%\',
            editable:true,
        },
        {
            field: \'status\',//域值
            title: \'状态\',//内容
            visible: true,//false表示不显示
            sortable: true,//启用排序
            width : \'20%\',
            formatter : function (value, row, index) {
                if (row[\'status\'] === 1) {
                    return \'正常\';
                }
                if (row[\'status\'] === 0) {
                    return \'禁用\';
                }
                return value;
            }
        }
    ]
});

 

上面代码中，除了url和下面的column需要动态变之外，其他的基本上都是固定的，可以复制粘贴到处使用。因为规则的固定，所以后台的规则也是比较固定的。

3.thinkPHP5.0实现后台（主要是返回total和rows）

controller

public function doRoleRuleList() {
    $id = input("id");
    if (!$id) return "";

    $limit = input("limit");
    $offset = input("offset");
    $search = input("search");
    $order = input("order", "desc");
    $ordername = input("ordername");
    if (!$ordername) {
        $ordername = \'id\';
        $order = \'desc\';
    }

    $perModel = new PermissionModel();
    $rs = $perModel->doRoleRuleList($id, $offset, $limit, $search, $order, $ordername);

    return json($rs);
}

model

public function doRoleRuleList($id, $offset, $limit, $search, $order, $ordername) {
    $total = Db::connect("dbUser")->table("auth_rule")->where([\'status\'=>[\'<>\', 0]])->count();
    $auth_group = Db::connect("dbUser")->table("auth_group")->field("id,rules")->where("id", $id)->find();
    $rules ="-1";
    if ($auth_group && $auth_group[\'rules\']) $rules = $auth_group[\'rules\'];

    $rows = Db::connect("dbUser")->table("auth_rule")
        ->field([\'id\',\'name\',\'title\',"if(id in ({$rules}), 1, 0)"=>\'selected\'])
        ->where([
            \'status\'=>[\'<>\', 0],
//                \'name|title\' => [\'like\', "%{$search}%"]
        ])
        ->order($ordername." ".$order)
        ->select();


    return [\'total\'=>$total,\'rows\'=>$rows];
}

说明图：
这里写图片描述

复杂表格（行内编辑（编辑文字，下拉选择），样式改变，自定义图标，文件上传），因为js比较复杂，这里先列出代码功能的说明：

1.显示详情使用如下代码：
表格参数中添加代码

detailView : true,
detailFormatter : function (index, row) {
   var image = \'<div class="photos">\'
        +\'<a target="_blank" href="\'+row[\'jumpUrl\']+\'"><img alt="image" class="feed-photo" src="\'+row[\'picUrl\']+\'"></a>\'
        +\'</div>\';
    return image;
}

可以在detailFormatter进行代码的格式化，以字符串的形式返回即可，实现效果如下：

detailView

2.表格列内容的格式化
列参数中添加代码

formatter : function (value, row, index) {
    return "<img style=\'width: 50px;height: 50px;\' src=\'"+value+"\' alt=\'\'>"
}

效果如下：
这里写图片描述

3 . 表格的样式自定义
列参数中添加带代码

cellStyle : function (value, row, index) {
    return {
        css: {
            "max-width": "300px",
            "word-wrap": "break-word",
            "word-break": "normal"
        }
    };
}

4 . 新增数据
在js文件中添加如下代码：

$("#btn_add").click(function () {
  $.ajax({
      type : "POST",
      url : "/wadmin/ad/addAd",
      dataType : \'JSON\',
      success : function (data) {
          if (data.result != 0) {
              toastr.info("info", data.message);
              return ;
          }
          toastr.success("success", \'标签\');
          $("#table").bootstrapTable(\'insertRow\', {index:0, row:data.data});
      }
  });

});

绑定的按钮是toolbar里面的，点击如果进行ajax请求，再根据请求的结果自行判断添加

这里写图片描述

5.表格中列格式化成图标并监听事件
6.文件上传（基于5）

列参数中添加如下代码

{
    field: \'operate\',
    title: \'操作\',
    align: \'center\',
    events: operateEvents,
    width : \'25%\',
    formatter: operateFormatter
}

operateFormatter（这里注意需要添加a标签包住图标，并添加class）

function operateFormatter(value, row, index) {
    return [
        \'<a class="using" href="javascript:void(0)" title="Remove">\',
        \'<i class="fa fa-check"></i>\',
        \'</a>&nbsp;&nbsp;&nbsp;&nbsp;\',
        \'<a class="upload" style="cursor: pointer" href="javascript:void(0)" title="Upload">\',
        \'<label style="cursor: pointer" for="\'+row[\'adId\']+\'">\',
        \'<i class="fa fa-upload"></i>\',
        \'<input type="file" name="adUpload" style="display: none;" class="adUpload" id="\'+row[\'adId\']+\'" >\',
        \'</label>\',
        \'</a>&nbsp;&nbsp;&nbsp;&nbsp;\',
        \'<a class="remove" href="javascript:void(0)" title="Using">\',
        \'<i class="fa fa-times"></i>\',
        \'</a>\',
    ].join(\'\');
}

operateEvents（监听事件，注意这里是window.operateEvents）

window.operateEvents = {
    \'click .remove\': function (e, value, row, index) {
        $.ajax({
            type : "POST",
            url : "/wadmin/ad/deleteAd",
            data : {
                adId : row[\'adId\']
            },
            dataType : \'JSON\',
            success : function (data) {
                if (data.result != 0) {
                    toastr.info("info", data.message);
                    return ;
                }
                toastr.success("success", \'删除成功\');
                $("#table").bootstrapTable(\'remove\', {
                    field: \'adId\',
                    values: [row[\'adId\']]
                });
            }
        });

        return false;
    },
    \'click .using\': function (e, value, row, index) {
        $.ajax({
            type : "POST",
            url : "/wadmin/ad/usingAd",
            data : {
                adId : row[\'adId\']
            },
            dataType : \'JSON\',
            success : function (data) {
                if (data.result != 0) {
                    toastr.info("info", data.message);
                    return ;
                }
                toastr.success("success", \'使用该广告\');
                $("#table").bootstrapTable(\'refresh\');
            }
        });

        return false;
    },
    \'click .upload\': function (e, value, row, index) {
        $(\'.adUpload\').fileupload({
            url : \'/wadmin/ad/adUpload/adId/\'+row[\'adId\'],
            dataType: \'json\',
            add: function (e, data) {
                data.submit();
            },
            done: function (e, data) {
                var response = data.result;
                if (response.result != 0) {
                    toastr.error(response.message);
                    return false;
                }
                toastr.success("上传成功");
                $("#table").bootstrapTable(\'refresh\');
            }
        });

        return false;
    }
};

实现的效果如下：

这里写图片描述

7.行内编辑
普通的编辑只需要在列参数中设置即可：
列参数中添加代码

editable : true,
  • 1

需要下拉编辑的，使用如下代码：

editable: {
   type: \'select\',
   source: [ //0->无广告，1->静态不可点击，2->静态可点击，3->动态不可点击，4->动态可点击
       {value: 0, text: \'无广告\'},
       {value: 1, text: \'静态不可点击\'},
       {value: 2, text: \'静态可点击\'},
       {value: 3, text: \'动态不可点击\'},
       {value: 4, text: \'动态可点击\'},
   ]
}

这里还有一些行内编辑的样式是需要导入第三方lib的，比如说如果要实现行内时间的编辑，需要下载导入combodate.js ，然后添加如下代码（这些js文件后面会给出的，也可以去官网下载最新版）：

editable: {
    type: \'combodate\',
    viewformat: \'YYYY-MM-DD HH:mm:ss\',
    template: \'YYYY-MM-DD HH:mm:ss\',
    format: \'YYYY-MM-DD HH:mm:ss\',
    combodate: {
        minuteStep: 1,
        secondStep: 1,
        maxYear: 5000,
        minYear: 2016,
    }
}

然后再表格参数中添加如下代码监听事件：

onEditableSave: function (field, row, oldValue, $el) {
   $.ajax({
        type: "post",
        url: "/wadmin/ad/updateAdInfo",
        dataType : \'json\',
        data: row,
        success: function (data, status) {
            if (status == "success" && data.result == 0) {
                toastr.success(\'更新成功\');
                if (field == \'jumpUrl\') {
                    $(\'#table\').bootstrapTable("refresh");
                }
                return true;
            } else {
                toastr.info(data.message);
                $(\'#table\').bootstrapTable("refresh");
            }
        },
        error: function () {
            alert("Error");
        },
        complete: function () {

        }

    });
}

实现的效果如下：
这里写图片描述

这里写图片描述

这里写图片描述

其中，调用bootstraptable的一些方法可以动态更新表格（增删改等），用法如下：

$("#table").bootstrapTable(\'insertRow\', {index:0, row:data.data});
$("#table").bootstrapTable(\'remove\', {
    field: \'adId\',
    values: [row[\'adId\']]
});
$("#table").bootstrapTable(\'refresh\');
$("#table").bootstrapTable(\'updateCell\', {
    index : index,
    field: \'status\',
    value: row[\'status\'] ? 0 : 1
});

因为引入的js和css库有点多，而且需要实现行内编辑的话需要需要引入的js文件比较难找，下面给出下载地址（密码：jjdk）：

http://pan.baidu.com/s/1bpiRObt

完整代码

html

<div id="toolbar" class="btn-group">
    <button id="btn_add" type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增广告
    </button>
</div>
<table id="table"></table>

javascript

/**
 * Created by raid on 2016/12/28.
 */
$(function () {
    window.operateEvents = {
        \'click .remove\': function (e, value, row, index) {
            $.ajax({
                type : "POST",
                url : "/wadmin/ad/deleteAd",
                data : {
                    adId : row[\'adId\']
                },
                dataType : \'JSON\',
                success : function (data) {
                    if (data.result != 0) {
                        toastr.info("info", data.message);
                        return ;
                    }
                    toastr.success("success", \'删除成功\');
                    $("#table").bootstrapTable(\'remove\', {
                        field: \'adId\',
                        values: [row[\'adId\']]
                    });
                }
            });

            return false;
        },
        \'click .using\': function (e, value, row, index) {
            $.ajax({
                type : "POST",
                url : "/wadmin/ad/usingAd",
                data : {
                    adId : row[\'adId\']
                },
                dataType : \'JSON\',
                success : function (data) {
                    if (data.result != 0) {
                        toastr.info("info", data.message);
                        return ;
                    }
                    toastr.success("success", \'使用该广告\');
                    $("#table").bootstrapTable(\'refresh\');
                }
            });

            return false;
        },
        \'click .upload\': function (e, value, row, index) {
            $(\'.adUpload\').fileupload({
                url : \'/wadmin/ad/adUpload/adId/\'+row[\'adId\'],
                dataType: \'json\',
                add: function (e, data) {
                    data.submit();
                },
                done: function (e, data) {
                    var response = data.result;
                    if (response.result != 0) {
                        toastr.error(response.message);
                        return false;
                    }
                    toastr.success("上传成功");
                    $("#table").bootstrapTable(\'refresh\');
                }
            });

            return false;
        }
    };


    /*bootstrap table*/
    $(\'#table\').bootstrapTable({
        url:"/wadmin/ad/doAdList",//请求数据url
        toolbar : "#toolbar",
        // toolbarAlign : "right",
        queryParams: function (params) {
            return {
                offset: params.offset,  //页码
                limit: params.limit,   //页面大小
                search : params.search, //搜索
                order : params.order, //排序
                ordername : params.sort, //排序
            };
        },
        detailView : true,
        detailFormatter : function (index, row) {
            var image = \'<div class="photos">\'
                +\'<a target="_blank" href="\'+row[\'jumpUrl\']+\'"><img alt="image" class="feed-photo" src="\'+row[\'picUrl\']+\'"></a>\'
                +\'</div>\';
            return image;
        },
        showHeader : true,
        showColumns : true,
        showRefresh : true,
        pagination: true,//分页
        sidePagination : \'server\',//服务器端分页
        pageNumber : 1,
        pageList: [5, 10, 20, 50],//分页步进值
        search: true,//显示搜索框
        //表格的列
        columns: [
            {
                field: \'adId\',//域值
                title: \'广告ID\',//标题
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : \'5%\',
            },
            {
                field: \'picUrl\',//域值
                title: \'图片\',//标题
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : \'15%\',
                formatter : function (value, row, index) {
                    return "<img style=\'width: 50px;height: 50px;\' src=\'"+value+"\' alt=\'\'>"
                }
            },
            {
                field: \'jumpUrl\',//域值
                title: \'跳转链接\',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : \'10%\',
                editable : true,
                cellStyle : function (value, row, index) {
                    return {
                        css: {
                            "max-width": "300px",
                            "word-wrap": "break-word",
                            "word-break": "normal"
                        }
                    };
                }
            },
            {
                field: \'adDesc\',//域值
                title: \'描述\',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : \'10%\',
                editable : true,
            },
            {
                field: \'displayType\',//域值
                title: \'表现形式\',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : \'10%\',
                editable: {
                    type: \'select\',
                    source: [ //0->无广告，1->静态不可点击，2->静态可点击，3->动态不可点击，4->动态可点击
                        {value: 0, text: \'无广告\'},
                        {value: 1, text: \'静态不可点击\'},
                        {value: 2, text: \'静态可点击\'},
                        {value: 3, text: \'动态不可点击\'},
                        {value: 4, text: \'动态可点击\'},
                    ]
                }
            },
            {
                field: \'displaySeconds\',//域值
                title: \'时间\',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : \'5%\',
                editable : true,
            },
            {
                field: \'scope\',//域值
                title: \'影响范围\',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : \'10%\',
                editable: {
                    type: \'select\',
                    source: [ //0->全国
                        {value: 0, text: \'全国\'},
                    ]
                }
            },
            {
                field: \'userType\',//域值
                title: \'影响群体\',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : \'5%\',
                editable: {
                    type: \'select\',
                    source: [ //0->全部
                        {value: 0, text: \'全部\'},
                    ]
                }
            },
            {
                field: \'status\',//域值
                title: \'状态\',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : \'10%\',
                formatter : function (value, row, index) {
                    return value==1||value==\'1\' ? \'正在使用\' : \'没有使用\';
                }
            },
            {
                field: \'addTime\',//域值
                title: \'时间\',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : \'10%\',
            }
            ,{
                field: \'operate\',
                title: \'操作\',
                align: \'center\',
                events: operateEvents,
                width : \'25%\',
                formatter: operateFormatter
            }
        ],
        onEditableSave: function (field, row, oldValue, $el) {
            $.ajax({
                type: "post",
                url: "/wadmin/ad/updateAdInfo",
                dataType : \'json\',
                data: row,
                success: function (data, status) {
                    if (status == "success" && data.result == 0) {
                        toastr.success(\'更新成功\');
                        if (field == \'jumpUrl\') {
                            $(\'#table\').bootstrapTable("refresh");
                        }
                        return true;
                    } else {
                        toastr.info(data.message);
                        $(\'#table\').bootstrapTable("refresh");
                    }
                },
                error: function () {
                    alert("Error");
                },
                complete: function () {

                }

            });
        }
    });

    $("#btn_add").click(function () {
        $.ajax({
            type : "POST",
            url : "/wadmin/ad/addAd",
            dataType : \'JSON\',
            success : function (data) {
                if (data.result != 0) {
                    toastr.info("info", data.message);
                    return ;
                }
                toastr.success("success", \'标签\');
                $("#table").bootstrapTable(\'insertRow\', {index:0, row:data.data});
            }
        });

    });

    function operateFormatter(value, row, index) {
        return [
            \'<a class="using" href="javascript:void(0)" title="Remove">\',
            \'<i class="fa fa-check"></i>\',
            \'</a>&nbsp;&nbsp;&nbsp;&nbsp;\',
            \'<a class="upload" style="cursor: pointer" href="javascript:void(0)" title="Upload">\',
            \'<label style="cursor: pointer" for="\'+row[\'adId\']+\'">\',
            \'<i class="fa fa-upload"></i>\',
            \'<input type="file" name="adUpload" style="display: none;" class="adUpload" id="\'+row[\'adId\']+\'" >\',
            \'</label>\',
            \'</a>&nbsp;&nbsp;&nbsp;&nbsp;\',
            \'<a class="remove" href="javascript:void(0)" title="Using">\',
            \'<i class="fa fa-times"></i>\',
            \'</a>\',
        ].join(\'\');
    }
});

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode