37.bootstrapTable参数配置

　　window.operateEvents = {
　　　　'click .use': function (e, value, row, index) {
　　　　　　console.log('useClick')
　　　　},
　　　　'click .remove': function (e, value, row, index) {

　　　　　　console.log(removeClick)

　　　　}

　　};

　　function operateFormatter(value, row, index) {

　　　　return [

　　　　　　'<a class="use" href="javascript:void(0)" title="使用" style="display:inline-block;height:20px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">',
　　　　　　'使用',
　　　　　　'</a> ',
　　　　　　'<a class="remove" href="javascript:void(0)" title="拒绝" style="display:inline-block;height:20px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap">',
　　　　　　'删除',
　　　　　　'</a>'
　　　　　　].join('');
　　}

　　$('#playerDetail_table').bootstrapTable({
      //url:'../../json/data1.json',//请求后台的URL（*）
      data:this.state.data,//data 数组[{key:value},{key:value}]
      //method: 'get',//请求方式（*）
      classes:'',
      //toolbar: '#toolbar',//工具按钮用哪个容器
      striped:false,//是否显示行间隔色
      cache:false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
      pagination:true,//是否显示分页（*）
      //sortable:true,//是否启用排序
      //silentSort:true,
      //sortName:"startTime",
      //sortStable:true,
      //showPaginationSwitch:false,
      sortOrder: "asc",//排序方式
      sidePagination: "client",//分页方式：client客户端分页，server服务端分页（*）
      pageNumber:1,//初始化加载第一页，默认第一页
      pageSize: 15,//每页的记录行数（*）
      pageList: [10, 25, 50],//可供选择的每页的行数（*）
      search:false,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
      strictSearch:false,
      //showColumns:true,//是否显示所有的列
      showRefresh:false,//是否显示刷新按钮
      minimumCountColumns: 2,//最少允许的列数
      clickToSelect:false,//是否启用点击选中行
//     height: 500,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
      //uniqueId: "ID",//每一行的唯一标识，一般为主键列
      showToggle:false,//是否显示详细视图和列表视图的切换按钮
      cardView:false,//是否显示详细视图
      detailView:false,//是否显示父子表
      columns: [
        　　　　{

　　　　　　　　　　　　field: 'operate',
　　　　　　　　　　　　title: '操作',
　　　　　　　　　　　　width:'400px',
　　　　　　　　　　　　align: 'center',
　　　　　　　　　　　　events: operateEvents,
　　　　　　　　　　　　class: 'operate',
　　　　　　　　　　　　formatter:operateFormatter
　　　　　　　　　　},

                {
        
                  field:'startTime',
        
                  title:'用户ID',
                     
                  sortable:true,
                     
                  valign:"middle",
                 
                  align:"center",
                     
        
                    }  ]
       });

 HTML

<table class="table" id="tableInfoList">
</table>

依赖

<link rel="stylesheet" type="text/css" href="bootstrap-table.css"/>
<script src="jquery.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js" type="text/javascript" charset="utf-8"></script>
    

 

转载于:https://www.cnblogs.com/famLiu/p/7411787.html