加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

bootstrap-table初使用

发布时间:2020-12-17 20:50:55 所属栏目:安全 来源:网络整理
导读:table id="table"/table $(‘#table‘ ).bootstrapTable({ url: ‘json/data1.json‘, // 请求后台的URL(*) method: ‘get‘, // 请求方式(*) toolbar: ‘#toolbar‘, // 工具按钮用哪个容器 striped: true , // 是否显示行间隔色 cache: false , // 是
<table id="table"></table>
$(‘#table‘).bootstrapTable({
                        url: ‘json/data1.json‘,//请求后台的URL(*)
                        method: ‘get‘,//请求方式(*)
                        toolbar: ‘#toolbar‘,//工具按钮用哪个容器
                        striped: true,//是否显示行间隔色
                        cache: false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                        pagination: true,//是否显示分页(*)
                        sortable: true,//是否启用排序
                        sortOrder: "asc",//排序方式
                        queryParams: oTableInit.queryParams,//传递参数(*)
                        // sidePagination: "server",//分页方式:client客户端分页,server服务端分页(*)
                        pageNumber:1,//初始化加载第一页,默认第一页
                        pageSize: 10,//每页的记录行数(*)
                        pageList: [10,25,50,100],//可供选择的每页的行数(*)
                        search: false,//是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
                        strictSearch: false,showColumns: true,//是否显示所有的列
                        showRefresh: true,//是否显示刷新按钮
                        minimumCountColumns: 2,//最少允许的列数
                        clickToSelect: true,//是否启用点击选中行
                        // height: 500,//行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
                        uniqueId: "ID",//每一行的唯一标识,一般为主键列
                        showToggle:false,//是否显示详细视图和列表视图的切换按钮
                        cardView: false,//是否显示详细视图
                        detailView: false,//是否显示父子表
                        columns: [{
                            checkbox: true
                        },{
                            field: ‘id‘,title: ‘ID‘,width: ‘10%‘
                        },{
                            field: ‘firstName‘,title: ‘名称‘
                        },{
                            field: ‘updateTime‘,title: ‘时间‘
                        }]
                    });

API文档可参考:https://blog.csdn.net/S_clifftop/article/details/77937356?locationNum=3&fps=1

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读