boostrap table的使用

╰+哭是因爲堅強的太久メ 2023-02-20 02:35 10阅读 0赞

## boostrapTable的使用 ##

#### 通过js ####

#### html ####

#### js ####

$('#table').bootstrapTable({ 
      height: window.innerHeight - 260,
    	pageSize:"10",  //页面显示条数 需要和pagination共同使用,不然相当于pagination:false,不生效
    	pagination: true, // 是否分页
    	paginationLoop:false,	//分页是否循环
    	pageList:[10,20],   //设置每页显示条数,可以设置为all或者unlimited,设置这两个则表示显示全部数据
    	paginationHAlign:"right",  //分页按钮位置，相对于measureTable得宽度
    	paginationVAlign:"bottom",		//分页按钮位置,相对于table,值有 "top","bottom","both",both为上下各一个分页
    	paginationDetailHAlign:"left",		//分页信息详情位置,相对于measureTable的宽度
    	paginationPreText:"<",		//分页按钮左边箭头的图标
    	paginationNextText:">" ,   //分页按钮右边箭头的图标
    	paginationSuccessivelySize:10,		//分页连续最大页数,默认是5
    	paginationPagesBySide:2,		//分页右边显示页数,默认是1页,值最小可以设置为0
    	paginationUseIntermediate:false,		//为true时自动计算页码的长度,并显示中间页码
    	showPaginationSwitch:false,  //为false时将不显示分页按钮,为true时显示分页按钮
    
    	search:false,	//显示搜索框,在table顶部
    	searchOnEnterKey:false,		//搜索框搜索的方式,为true时必须点击键盘上的enter键才能进行搜索
    	strictSearch:false,		//启用严格搜索。禁用比较检查
    	showSearchButton:false,	//设置true 为在搜索输入后面显示搜索按钮。仅在按下按钮时才会执行搜索（例如，以防止交通或加载时间）。
    	showSearchClearButton:false,		//设置true为在搜索输入后面显示一个清除按钮，该按钮将清除搜索输入（还包括来自过滤器控件的所有过滤器（如果启用））。
    	trimOnSearch:true,		//清除搜索中空格,默认为true
    	searchAlign:"left",		//搜索框的位置,默认是right
    	searchTimeOut:100,		//搜索数据延迟,默认是500
    	searchText:"",		//设置搜索属性后，初始化搜索文本
    	showHeader:true,		//为false时将隐藏 标题栏
    	showFooter:false,	//设置true 为显示摘要页脚行。
    
    	showColumns:false,	//为true时会在measureTable的右边出现一个图标,下拉图标,下拉选项中有每列的属性名,选中的则显示,不选择则不显示
    	showColumnsToggleAll:false,		//设置切换显示全部,需要和showColumns:true共用,不然无法生效
    	showRefresh:false,		//是否显示刷新按钮
    	showToggle:false,		//设置true显示切换按钮以切换表格/卡片视图, 每一行中的列都没有表格.但是可以区分行和行之间的数据
    	showFullscreen:false, //设置true显示全屏按钮, 点击全屏按钮table会变大,直到table的宽度撑爆屏幕会回到原来的大小,点击才没有变化
    	detailView:false,		//设置true为显示详细视图表。
    	detailViewIcon:true,		//设置true为显示详细信息视图列（加/减图标）。与detailView:true共用
    	detailViewByClick:false,		//设置true单击以设置切换细节视图。
    	detailFormatter:function(index, row, element){ return '' },		//当格式化您的详细信息视图detailView 设置为 true。返回一个String，它将被附加到详细信息视图单元格中，可以选择使用第三个参数直接渲染该元素，该参数是目标单元格的jQuery元素。
    	detailFilter:function(index, row){ return true},	//当启用每行扩展detailView 设置到 true。返回true，将启用该行进行扩展，返回false，并且将禁用该行的扩展。默认函数返回true以启用所有行的扩展。
    	
    
    	
    	
    
    
    	footerStyle:function(column){ 
    		return{ 
    		      css:{ 'font-weight':'normal'},
    		      classes:'my-class'
    		 }
    	}
    
    
    	url:"XXX.json",    //数据data的json文件引入
    	 
    	
    
      columns: [
      	{ 
      	checkbox：true,  //显示多选框
      	}，
    	{     //thead中的数据
        field: 'id',
        title: 'id',
       	sortable:true,   //排序
      }, { 
        field: 'name',
        title: '名称'
      }, { 
        field: 'num',
        title: '数量'
      },{ 
      	field:"action",
      	title:"操作",
      	cellStyle:function(val,row,index,field){ 
    		return val
    	},
      	formatter: function (val,row,index,field) { 
    	      return '<button class="btn btn-success" οnclick="modifyUserData(this)">修改</button>' +
    	              '<button class="btn btn-danger"οnclick="deleteUserData(this)">删除</button>' +
    	              '<button class="btn btn-warning"οnclick="resetPassword(this)">密码重置</button>';
          },],
    
      data: [{   //tbody中的数据
        id: 1,
        name: '情感',
        num: '23'
      }, { 
        id: 2,
        name: '幻想',
        num: '22'
      }]
    })