boostrap table的使用

boostrapTable的使用

通过js

html

<div class="measureTable">
	<div id="table"></div>
</div>

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'
  }]
})