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: '操作',
'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>