bootstrap-table官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/
先看一下效果吧
引入文件
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<link href="css/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap/js/bootstrap.min.js"></script>
<script src="js/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="js/bootstrap-table/bootstrap-table.js"></script>
<script src="js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="js/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
页面元素
<div class="container">
<table id="tb_user"></table>
</div>
js代码
<script>
$("#tb_user").bootstrapTable({
columns: [{
checkbox: true,
}, {
field: 'username',
title: '用户名',
width: '10%',
align: 'center',
editable: {
type: 'text',
title: '用户名',
placement: 'right',
emptytext: "空文本",
validate: function(v) {
if (!v) return '用户名不能为空';
}
},
}, {
field: 'password',
title: '密码',
width: '10%',
align: 'center',
editable: {
type: 'text',
title: '修改密码',
placement: 'right',
validate: function(v) {
if (!v) return '密码不能为空';
}
},
}, {
field: 'power',
title: '权限',
align: 'center',
editable: {
type: 'select2',
title: '修改权限',
placement: 'left',
mode: "inline",
inputclass: 'input-large',
select2: {
multiple: true,
tags: true,
data: [{
id: 'bsb',
text: '篮球'
}, {
id: 'ftb',
text: '足球'
}, {
id: 'wsm',
text: '游泳'
}],
},
}
}],
striped: true, //隔行变色
url: 'json/data1.json',
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: false, //是否启用排序
// sortOrder: "asc", //排序方式
sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: false,
showColumns: false, //是否显示所有的列
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: false, //是否启用点击选中行
// height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "id", //每一行的唯一标识,一般为主键列
showToggle: false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
onLoadSuccess: function() {}
});
</script>
详细请看官网api
网友评论