python测试开发django-146.bootstrap-table列属性设置（Column）

2022-10-05 21:08:20

前言

Bootstrap Table Column的相关列属性和设置例如field、title、titleTooltip、width、class等属性，要使用Bootstrap Table首先要定义列

基本设置

先准备数据源，包含"total" 和 "rows"

{
        "total": 22, 
        "rows": [
                {
                        "id": 1, 
                        "name": "悠悠老师", 
                        "age": 20, 
                        "tel": "12313231", 
                        "is_delete": "0"
                }, 
                {
                        "id": 2, 
                        "name": "张三老师", 
                        "age": 22, 
                        "tel": "21122121", 
                        "is_delete": "0"
                }, 
                {
                        "id": 3, 
                        "name": "李四老师", 
                        "age": 22, 
                        "tel": "1121212", 
                        "is_delete": "0"
                }

        ]
}

html页面代码

<body>
<div class="container-fluid">
    <h1>bootstrapTable实例</h1>
    <table id="table" data-toolbar="#toolbar"></table>
</div>
</body>

bootstrapTable配置参数

<script>
    var url = '/teacher/info';
    var columns = [
        {
            checkbox: true,
            visible: true                  //是否显示复选框
        },
        {
            field: 'id',
            title: 'ID'

        }, {
            field: 'name',
            title: '姓名'
        }, {
            field: 'age',
            title: '年龄'
        },
         {
            field: 'tel',
            title: '电话'
        },
         {
            field: 'is_delete',
            title: '状态'
        }
    ];
    $("#table").bootstrapTable({
        url: url,                           //请求后台的URL（*）
        method: 'get',                      //请求方式（*）
        columns: columns                 //列参数

    });

</script>

页面显示效果

自定义显示列内容

上面看到is_delete字段内容显示0或1这种，这是接口返回过来的值，但是我们在页面上需要自己转成 "正常" 或者 "禁用" 这种文字。
可以用到 formatter 自定义显示内容,格式参考如下

value 是该字段原始的值（如is_delete字段返回的0或1）
item 是返回的整个一行内容：{"id": 1, "name": "悠悠老师", "age": 20, "tel": "12313231", "is_delete": "0"}
index 是列表中是索引值

 formatter: function(value, item, index) {
        if (value==0) {
            return '正常';
        }
        else if (value==1) {
           return '禁用';
        }
    }

修改后完整内容

<script>
    var url = '/teacher/info';
    var columns = [
        {
            checkbox: true,
            visible: true                  //是否显示复选框
        },
        {
            field: 'id',
            title: 'ID'

        }, {
            field: 'name',
            title: '姓名'
        }, {
            field: 'age',
            title: '年龄'
        },
         {
            field: 'tel',
            title: '电话'
        },
         {
             field: 'is_delete',
             title: '状态',
             formatter: function(value, item, index) {
                 if (value==0) {
                    return '正常';
                 }
                 else if (value==1) {
                   return '禁用';
                 }
    }

    }];
    $("#table").bootstrapTable({
        url: url,                           //请求后台的URL（*）
        method: 'get',                      //请求方式（*）
        columns: columns                 //列参数

    });

</script>

页面显示效果

新增其它字段

我们也可以在表格中添加其它字段，比如添加一个主页地址，主页地址根据id字段拼接，格式:/teacher/{id}

     {
             field: 'home',
             title: '首页',
             formatter: function(value, item, index) {
               return '<a href="/teacher/' + item.id  +'" >主页</a>'
             }
    }

添加操作按钮

在列表中添加操作按钮

参考这篇 https://www.cnblogs.com/yoyoketang/p/15245059.html

属性列表

以下重要或非常有用的属性用√进行了标记

列属性名称	html属性	说明
field	data-field	√设置该列要绑定显示的字段如field:"id"
title	data-title	√设置该列显示的文字标题，比如你绑定了num字段，你好显示num吧，设置title:"库存" 用户一看就明白了
titleTooltip	data-titleTooltip	titleTooltip:"本月销售剩余库存"，鼠标移动到列头上就会出现提示文字“本月销售剩余库存”
class	data-class	对某列设置单独的样式
width	data-width	√width:200",该列的宽度为200 ，注意这里是数字类型不带单位px或者%
widthUnit	data-widthUnit	widthUnit:"px" 列的宽度的单位如px或%
rowspan	data-rowspan	rowspan:2 合两2行
colspan	data-colspan	colspan:2 合并两列
halign	data-halign	表格头部列名对齐方式 'left', 'right', 'center'
align	data-align	表格数据的对齐方式 'left', 'right', 'center'
falign	data-falign	表格底部列对齐方式 'left', 'right', 'center'
valign	data-valign	垂直方向对齐方式 'top', 'middle', 'bottom'
cellStyle	data-cellStyle	自定义函数，单元格自定义样式function(value, row, index){ return "样式类名";}
radio	data-radio	radio:true 表示该列为单选选择列
checkbox	data-checkbox	√checkbox:true 表示该列为复选框选择列
checkboxEnabled	data-checkboxEnabled	checkboxEnabled:false 禁用复选框列
clickToSelect	data-clickToSelect	√{field:"name",clickToSelect:false}表示点击name这列时不会触发选中事件。
showSelectTitle	data-showSelectTitle	showSelectTitle:"操作"，在选择列的列头显示的名称
sortable	data-sortable	sortable:true把该列设置为排序列，这时列头就会出现上下两个排序箭头
sortname	data-sortname	指定按那列进行排序，例如`<th data-field="name" data-sortable="true" data-sort-name="id" data-sort-order="desc">Item Name</th>` 表示用户点击name这列的排序事件按id字段进行倒序进行排序
order	data-order	排序方式 order:"asc"或者 order:"desc" 顺序或倒序进行排序
visible	data-visible	visible:false 或者 true 隐藏或显示列
switchable	data-switchable	true/false 当开启了列刷选时，switchable可以控制当前列是否可被刷选，默认为true
cardVisible	data-cardVisible	true/false 当开启卡片模式时，设置该列是否在卡片中显示，默认true
searchable	data-searchable	true/false 设置当前列数据是否可以被搜索，这里说的搜索是前端查询匹配非服务器端。
footerFormatter	data-footerFormatter	√列底部格式化函数，可以用来做合计等功能 `function nameFormatter(data) { return data.length }`
formatter	data-formatter	√自定义函数，比如状态字段在数据库中是0，1 可以通过formatter转换成启用/停用这样的文字显示而不是显示0或者1这样的数字， formatter: function(value, item, index) { if (value `==` 0) { return '正常'; } else if (value `==` 1) { return '禁用'; } }

参考教程https://www.itxst.com/Bootstrap-Table/jn3ienrr.html

码农公寓

前言

基本设置

自定义显示列内容

新增其它字段

添加操作按钮

属性列表

相关文章