一个简单的bootstrap- table例子,直接使用网络资源和和浏览器+文本就可以书写出来的实例。
<!-- 引入bootstrap样式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap-table样式 -->
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- bootstrap-table.min.js -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<!--
我们使用网络上通用的链接文件,这样就可以不下载对应的文件了-->
使用bootstrap就必须使用jQuery的包,因为bootstrap是基于jQuery的一个js库。
写一个承载列表和调用jq的表单或者块
<div>
<!--<table data-toggle="table" data-url="data1.json">-->
<table id="table">
<!--<thead>-->
<!--<tr>-->
<!--<th data-field="id">序号</th>-->
<!--<th data-field="name">名称</th>-->
<!--<th data-field="price">价格</th>-->
<!--</tr>-->
<!--</thead>-->
</table>
</div>
定义一个id,这样就可以调用jq写的bootstrap实现table的数据传输。
<script>
$("#table").bootstrapTable({ // 对应table标签的id
url: "/*", // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
method: "get",
striped: true, //表格显示条纹,默认为false
pagination: true, // 在表格底部显示分页组件,默认false
pageList: [10, 20], // 设置页面可以显示的数据条数
pageSize: 10, // 页面数据条数
pageNumber: 1, // 首页页码
sidePagination: 'server', // 设置为服务器端分页
sortName: 'id', // 要排序的字段
sortOrder: 'desc', // 排序规则
queryParams: function (params) { // 请求服务器数据时发送的参数,可以在这里添加额外的查询参数,返回false则终止请求
return {
pageSize: params.limit, // 每页要显示的数据条数
offset: params.offset, // 每页显示数据的开始行号
sort: params.sort, // 要排序的字段
sortOrder: params.order, // 排序规则
dataId: $("#dataId").val() // 额外添加的参数
}
},
columns: [
{
checkbox: true, // 显示一个勾选框
align: 'center' // 居中显示
}, {
field: 'code', // 返回json数据中的name
title: '编号', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle' // 上下居中
}, {
field: 'name',
title: '名称',
align: 'center',
valign: 'middle'
}, {
field: 'calcMode',
title: '计算方式',
align: 'center',
valign: 'middle',
formatter: function (value, row, index) { // 单元格格式化函数
var text = '-';
if (value == 1) {
text = "方式一";
} else if (value == 2) {
text = "方式二";
} else if (value == 3) {
text = "方式三";
} else if (value == 4) {
text = "方式四";
}
return text;
}
}, {
title: "操作",
align: 'center',
valign: 'middle',
width: 160, // 定义列的宽度,单位为像素px
formatter: function (value, row, index) {
return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.stdId + '\')">删除</button>';
}
}
],
data: [//测试数据,实际开发使用后台或者数据库传输数据
{
code: '1',
name: 'leung',
calcMode: '1'
}, {
code: '2',
name: 'leung',
calcMode: '2'
}]
})
</script>
代码:https://download.csdn.net/download/mathew_leung/10872830