最近接触一个NB插件,Bootstrap table?没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真是牛X。
构造方式
1 、HTML
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
<div class
="btn-group hidden-xs"id
"exampleTableEventsToolbar" >
</div
>
<table
data-toggle"table"
data-url"${ctxAdmin}/user/userData?orgId=${orgId}"
data-pagination"true"
data-show-search"true"
data-show-columns//显示columns功能按钮
data-icon-size"outline"
data-mobile-responsive"true"
data-height"500"
id
"tablelist"
data-side-pagination"server"
<thead
>
<tr
<th
data-field"user_id">ID
</th
"username"
data-formatter"usernameFormatter"
data-events"usernameEvents">用户名
"real_name">真实姓名
"tel_num">座机
"mobile">手机
"user_type">用户类型
"operation"
"actionFormatter"
"actionEvents">操作
</tr
</thead
</table
>
2 、 js构造:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
(
function() {
$(
'#tablelist').bootstrapTable({
url:
"${ctxAdmin}/user/userData?orgId=${orgId}",search:
true,
pagination:
//是否分页
showRefresh:
//是否显示刷新功能
showToggle:
'outline',0); box-sizing: border-box;">// toolbar: '#exampleTableEventsToolbar',可以在table上方显示的一条工具栏,
icons: {
refresh:
'glyphicon-repeat',toggle:
'glyphicon-list-alt',columns:
'glyphicon-list'
}
});
结合官网上展示的Table options,Column options,Events,Methods可以完成很多功能。上面的data-formatter ,data-events就是Column options中的选项 。
data-formatter 和 data-events
要实现如下效果,用上面两个option配合使用即可,一个定义格式,一个定义点击的操作。?
直接上js代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
function actionFormatter(value,row,index) {
return '<a class="mod
" >修改</a> ' +
'<a class="delete
">删除</a>';
}
window.actionEvents = {
'click .mod':
(e,value,index) {
},
'click .delete' :
//删除操作
}
}
服务器分页/客户端分页的转换,table刷新
bootstrap默认是客户端分页 ,可通过html标签
1
data-side-pagination:"client"
或者js中的
1
sidePagination: 'server'
指定。注意,这两种后台传过来的json数据格式也不一样?
client : 正常的json array格式 [{},{},{}]?
server: {“total”:0,”rows”:[]} 其中total表示查询的所有数据条数,后面的rows是指当前页面展示的数据量。
有事需要根据情况改变分页方式,就要用到Methods中的?
‘refreshOptions’ //设置更新时候的options?
‘refresh’ //设置更新时的 url,query(往后台传参数)
$("#tablelist").bootstrapTable('refreshOptions',{
sidePagination: 'client'
});
$('refresh',{
url: "${ctxAdmin}/user/getsearchuserinfo",0); box-sizing: border-box;">//重设数据来源
query: {username: $(
'#sea-username').val(),realname: $(
"#sea-realname").val(),mobile: $(
"#sea-mobile").val()}
});