bootstrap-table 工具栏颜色、图标更换

2021/5/24 18:55:54

编程Tag： 按钮 table bootstrap 样式 params 工具栏 true 是否 btn

本文主要是介绍bootstrap-table 工具栏颜色、图标更换，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

修改bootstrap-table的默认按钮颜色以及图标
更改颜色：在js文件中的添加buttonsPrefix属性然后更换对应的样式未自己的样式
更改图标：在js文件中添加icons属性，然后更换对应的样式为自己的样式

$("#table").bootstrapTable('destroy').bootstrapTable({
    toolbar: "#toolbar",
    url: "yoururl",                         // 请求后台的URL（*）
    method: "GET",                          // 请求方式（*）
    buttonsPrefix: 'btn btn-primary',		// 修改工具栏按钮样式
    icons: {
    		refresh: 'fa-sync',
    		toggleOff: 'fa-toggle-off'
    },

对应的html中仅用声明一个表格就行了
html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>BootStrap Table使用</title>
    <!-- css引用 -->
    <link href="XXXXX/bootstrap.css" rel="stylesheet" />
    <link href="XXXXX/bootstrap-table.css" rel="stylesheet" />
    <!-- script引用（注意引用顺序不能乱） -->
    <script src="XXXXX/jquery-1.10.2.js"></script>
    <script src="XXXXX/bootstrap.js"></script>
    <script src="XXXXX/bootstrap-table.js"></script>
    <script src="XXXXX/bootstrap-table-zh-CN.js"></script>
    
</head>
<body>
    <div id="table">
    </div>
</body>
</html>

此处为详细的bootstrap配置的js文件
js

$("#table").bootstrapTable('destroy').bootstrapTable({
    toolbar: "#toolbar",
    url: "yoururl",                         // 请求后台的URL（*）
    method: "GET",                          // 请求方式（*）
    striped: true,                          // 是否显示行间隔色
    cache: false,                           //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    // sortable: true,                      // 是否排序
    // sortOrder: 'asc',                    // 排序方式
    pagination: true,                       // 是否显示分页（*）
    sidePagination: "server",               // 分页方式：client客户端分页，server服务端分页（*）
    pageNumber: 1,                          // 初始化加载第一页，默认第一页,并记录
    pageSize: 15,                           //每页的记录行数（*）
    pageList: [10, 25, 50, 100],            // 可供选择的每页的行数（*）
    search: true,                           // 是否显示表格搜索
    showColumns: true,                      // 是否显示所有的列（选择显示的列）
    showRefresh: true,                      // 是否显示刷新按钮
    minimumCountColumns: 2,                 // 最少允许的列数
    clickToSelect: true,                    // 是否启用点击选中行
    showToggle: true,                       // 是否显示详细视图和列表视图的切换按钮
    cardView: false,                        // 是否显示详细视图
    dataView: false,                        // 是否显示父子表
    showExport: true,                       // 是否显示导出选项
    exportDataType: 'all',                  // 导出选项
    height: 650,
    buttonsPrefix: 'btn btn-primary',		// 修改工具栏按钮样式
    icons: {
    		refresh: 'fa-sync',
    		toggleOff: 'fa-toggle-off'
    },

    // 得到查询参数
    queryParams: function (params) {
        // 这里键的名字和控制其的变量名必需一致，这边改动，控制器也要改成一样
        return {
            pageSize: params.limit,
            page: (params.offset / params.limit) + 1,
        }
    },
	columns: [
        {
            field: 'Num',
            title: "序号",
        },
        {
            field: 'Name',
            title: "名称",
        },
    ]
})

这篇关于bootstrap-table 工具栏颜色、图标更换的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

bootstrap-table 工具栏颜色、图标更换

相关编程文章