react中使用到的一些bootstrap-table内容
1.bootstrap-table 更新data数据:
$('#table').bootstrapTable('load',that.state.xxx);//这一步 务必要添加。第二参数是需要更新的data内容。
$('#table1').bootstrapTable({
// url: '/Home/GetDepartment', 请求后台的URL
uniqueId: "num", //设置标识,一般为主键
striped: true,
pagination: true,
pageSize: 10,
pageNumber: 1,
columns:that.state.columns,
//每一行的数据
data:that.state.xxx
})
——————————————————————————————————————————————
2.bootstrapTable 中设置单元格中内容或者修改等等。
formatter 属性
————————————————————————————————————————————————————————————————————————
3.bootstrapTable 中设置单元格下拉内容:
detailFormatter 属性:
4.事件
events 属性 2种方式:
1.
2.
events:getProjectName
在window 上绑定全局的 如果这时候你需要用到this.state 可以把window.self = this
____________________________________________________________________________
5.新增一行
$('#table').bootstrapTable('insertRow',{index:0,row:{aname:"",job:"",age:""}}); 这是默认在表格第一行添加
如果在分页的情况下添加一行的话,也需要也可能会用到
$(".xx>.bootstrap-table>.fixed-table-container>.fixed-table-pagination>.pull-right>.pagination>.page-pre").next().click()
这是无论在分页下的第几页点击添加都会跳到第一页。
6.封装一个初始化table数据的方法:
oTableInit : function (columns,that) { columns是穿过来的table配置,that 传来的this
// 获取面板列表数据
tools.getMessageToAjax({ 这是之前封装的ajax的方法 这里就直接用了。
type:'post',
url:'template/findTemplatePage',
data:{
nextPage:0,
pageSize:1000
},
async:true,
success:function(res,code,msg){
for(var i=0;i<res.object.content.length;i++){
if(res.object.content[i].createTime){
res.object.content[i].createTime = date(res.object.content[i].createTime) 这是date处理拿到数据里面的时间的方法,类似与过滤器。
}
}
that.setState({
templateList:res.object.content
},()=>{
console.log('更新数据',that,that.state.templateList) 回调中会处理table的数据
$('#table1').bootstrapTable('load',that.state.templateList)
$('#table1').bootstrapTable({
// url: '/Home/GetDepartment', 请求后台的URL
uniqueId: "num", //设置标识,一般为主键
striped: true,
pagination: true,
pageSize: 10,
pageNumber: 1,
columns:that.state.columns,
//每一行的数据
data:that.state.templateList
})
})
},
})
},
以上是 react中使用到的一些bootstrap-table内容 的全部内容, 来源链接: utcz.com/z/382474.html