1.文件引入
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap-table.css">
<link rel="stylesheet" href="bootstrap3-editable/css/bootstrap-editable.css">
<script src="jquery2.1.4.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-editable.js"></script>
<script src="bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>
2.内容代码
<table id="table"></table>
<script>
$("#table").bootstrapTable({
toolbar: "#toolbar",
striped: true, //是否显示行间隔色
height:300,
sortable: false,//是否排序
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
strictSearch: true, //是否显示刷新
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
columns: [{
field: 'id',
title: 'Item ID',
editable: true //可编辑列
}, {
field: 'name',
title: 'Item Name',
editable: true //可编辑列
}, {
field: 'price',
title: 'Item Price',
editable: true //编辑列
}],
// data可以换成url
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}, {
id: 3,
name: 'Item 3',
price: '$3'
}, {
id: 4,
name: 'Item 4',
price: '$4'
}, {
id: 5,
name: 'Item 5',
price: '$5'
}, {
id: 6,
name: 'Item 6',
price: '$6'
}, {
id: 7,
name: 'Item 7',
price: '$7'
}, {
id: 8,
name: 'Item 8',
price: '$8'
}, {
id: 9,
name: 'Item 9',
price: '$9'
}, {
id: 10,
name: 'Item 10',
price: '$10'
}]
})
</script>
效果展示
3.下载地址
bootstrap3-editable：https://github.com/vitalets/x-editable