react中使用到的一些bootstrap-table内容

react

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

回到顶部