Bootstrap-Table进阶篇

入门篇讲了渲染数据,是不是觉得很简单,下面来讲一些小技巧

1、比如你要拼接两个字段放在一个td中显示:

columns: [
        { field: '', title: '名称', sortable: true, width: 280, formatter: function (value, row, index){
                return row.name + " [" + row.sex + "]";
            } 
        },
     { field: 'age', title: '年龄', sortable: true, width: 280 },
     { field: 'sex', title: '性别', sortable: true, width: 280 },
  ]

PS:这个时候 fileld 定不定义都会被后面的覆盖掉

效果如图:

2、如果把隐藏列开启了(showColumns: true),但是有的列不想让他被隐藏,设置如下:

    columns: [
        { field: '', title: '名称', sortable: true, width: 280, switchable: false, formatter: function (value, row, index){
                return row.name + " [" + row.sex + "]";
            } 
        },
     { field: 'age', title: '年龄', sortable: true, width: 280 },
     { field: 'sex', title: '性别', sortable: true, width: 280 },
  ]

PS:只要加上 switchable: false 即可

效果如图:

3、在每一行后面加上按钮:

    columns: [
        { field: '', title: '名称', sortable: true, width: 280, switchable: false, formatter: function (value, row, index){
                return row.name + " [" + row.sex + "]";
            } 
        },
     { field: 'age', title: '年龄', sortable: true, width: 280 },
     { field: 'sex', title: '性别', sortable: true, width: 280 },
     { field: 'opt', title: '操作', sortable: false, width: 280, formatter:function(value, row, index){
                return "<button type='button' class='btn btn-default' onclick='Del(" + row.id + ")'>删除</button>";
            }
        },

  ]

PS:和第一个方法相似,可以操作当前行的参数,可以设置多个按钮和其他的元素

效果如图:

完整代码:

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <title>bootstrap-table</title>
        <!--css-->
        <link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7/css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="lib/bootstrap-table-1.12.1/bootstrap-table.min.css"/>
        <!--js-->
        <script src="lib/jquery-3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="lib/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="lib/bootstrap-table-1.12.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //模拟数据
            var tableData = [
                {id:1001,name:"小明",age:"15",sex:""},
                {id:1002,name:"小红",age:"13",sex:""},
                {id:1003,name:"小刚",age:"16",sex:""},
                {id:1004,name:"小鹏",age:"14",sex:""},
                {id:1005,name:"小月",age:"16",sex:""}
            ]
            $(document).ready(function () {
                $('#table').bootstrapTable({
                    data: tableData,
                    uniqueId: "id",
                    locale: "zh-CN",            // 语言
                    toolbar: "#toolbar",        // 工具栏
                    search: true,               // 显示搜索
                    height: document.documentElement.clientHeight,//根据页面高度定义表格高度
                    showColumns: true,          //隐藏列
                    striped: true,              // 是否显示行间隔色
                    showRefresh: false,         // 是否显示刷新按钮
                    clickToSelect: false,       // 是否启用点击选中行
                    showToggle: false,          // 是否显示详细视图和列表视图的切换按钮
                    cardView: false,            // 是否显示详细视图javascript:void(0)
                    sortable: false,            // 是否启用排序
                    sortOrder: "asc",           // 排序方式
                    pagination: true,           // 是否显示分页
                    sidePagination: "client",   // 分页方式:client客户端分页,server服务端分页
                    columns: [
                        { field: '', title: '名称', sortable: true, width: 280, switchable: false, formatter: function (value, row, index){
                                return row.name + " [" + row.sex + "]";
                                } 
                            },
                         { field: 'age', title: '年龄', sortable: true, width: 280 },
                         { field: 'sex', title: '性别', sortable: true, width: 280 },
                         { field: 'opt', title: '操作', sortable: false, width: 280, formatter:function(value, row, index){
                                return "<button type='button' class='btn btn-default' onclick='Del(" + row.id + ")'>删除</button>";
                                }
                            },
                      ]
                });
            });
        </script>
    </head>
    <body>
        <div id="toolbar"></div><!--工具栏-->
        <table id="table"></table><!--表格-->
    </body>
</html>
View Code

 

博主使用到的小技巧都会更新上来,下期更精彩。

 

posted @ 2019-06-28 11:21  沐宇  阅读(513)  评论(0编辑  收藏