pc端bootstrap列表总结

最新推荐文章于 2022-08-19 08:56:44 发布

wt5264

最新推荐文章于 2022-08-19 08:56:44 发布

阅读量420

点赞数 1

分类专栏： java

本文链接：https://blog.csdn.net/wt5264/article/details/95953766

版权

本文总结了在PC端使用Bootstrap构建表格的几个关键步骤，包括初始化表格、刷新表格、实现数据居中、设定表格高度以及在表格列中添加操作按钮和相关事件处理。特别指出，为表格列添加'operate'字段时，window.operateEvents事件处理需要预先定义。

摘要由CSDN通过智能技术生成

1.初始化表格

function initTable(tb) {
        tb.bootstrapTable({
            height: getHeight(),//设置高度
            url: '', //请求后台的URL（*）
            toolbar: '#toolbar', //工具按钮用哪个容器
            striped: true, //是否显示行间隔色
            cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            showToggle: true, //是否显示详细视图和列表视图的切换按钮
            showExport: true,
            detailView: false,
            detailFormatter: false,
            pageSize: 10,
            pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
            showFooter: false,
            minimumCountColumns: 2, //最少允许的列数
            showPaginationSwitch: true,
            pagination: true, //是否显示分页（*）
            uniqueId: "id", //每一行的唯一标识，一般为主键列
            sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
            responseHandler: responseHandler,
            queryParams: queryParams,
            sortable: true, //是否启用排序
            sortOrder: "asc", //排序方式
            sortName: "id",
            search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showRefresh: true, //是否显示刷新按钮
            clickToSelect: true, //是否启用点击选中行
            cardView: false, //是否显示详细视图
            detailView: false, //是否显示父子表
            contentTyp