介绍
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
移动设备优先是 Bootstrap 3 的最显著的变化。
网格系统
在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用
HTML 和 CSS 的方法。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12
列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类
col-lg一般用于大屏设备，
(min-width:1200px);
col-md一般用于中屏设备，
(min-width：992px);
col-sm一般用于小屏设备，
(min-width：768px);
col-xs用于超小型设备，
(max-width：768px);
后面跟数字是几，也就是占几份,
比如是4，也就是一行可以显示3个;
或者12，就是一行可以显示1个。
BootStrap table
采用bootstrap框架,可自动适应手机、平板、PC 设备，样式美观
参考文档：
https://www.cnblogs.com/wdlhao/p/6694083.html
https://blog.csdn.net/jintingbo/article/details/82924330
https://www.cnblogs.com/landeanfen/p/4976838.html
https://www.cnblogs.com/laowangc/p/8875526.html
等
关于使用，一般设置的话四个属性都用到会比较好，这样就可以在不同屏幕上很好的展示。
比如你有了12个section标签，你想让他们在不同屏幕大小的时候有不同的展示方式，大屏时一行显示6个，中屏时一行显示3个，小屏时一行展示2个，超小屏一行展示1个，你就可以在每一个section标签里面这样写:
1、引入
<!--css样式-->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap/bootstrap-table.css" rel="stylesheet">
<!--js-->
<script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/bootstrap/bootstrap-table.js"></script>
<script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>
2、html
//定义一个table 自己取个id
<table id="my-table" ></table>
3、js请求接口，填充数据
方法1：
$('#my-table').bootstrapTable({
url: 'data.json'
});
方法2
//页面加载完毕自动调用这个函数--不一定要在此处调用 按钮也行 能调用出来就好
$(function () {
//1.初始化Table
var oTable = new TableInit();//调用构造函数
oTable.Init();//使用init方法
//2.初始化Button的点击事件
/* var oButtonInit = new ButtonInit();
oButtonInit.Init(); */
});
//声明构造函数
var TableInit = function () {
var oTableInit = new Object();//这么写的意义是为了返回一个对象 这个对象包括两个方法
//初始化Table的方法
oTableInit.Init = function () {
//此处定位视图层的节点位置
$('#my-table').bootstrapTable({
url: '/VenderManager/TradeList', //请求后台的URL（*）
method: 'get', //请求方式（*） 设置post似乎还要改其他东西
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
//使用分页，server端返回的数据必须包括rows和total
sidePagination: "server", //分页方式：client客户端分页，server服务端分页 （*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 50, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
strictSearch: true,
clickToSelect: true, //是否启用点击选中行
height: 460, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "id", //每一行的唯一标识，一般为主键列
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
field: 'id',
title: '序号'
}, {
field: 'liushuiid',
title: '交易编号'
//此外还可以定义样式以及formatter函数
valign:"middle",
align:"center",
sortable : true， //需要排序的话改这里
formatter:function(value, row, index) {
return xxx;
},
},
},]
});
};
//得到查询的参数 这个似乎不需要和init一样的形式 普通定义即可
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
maxrows: params.limit,
pageindex:params.pageNumber,
//其他查询的东西
portid: $("#portid").val(),
CardNumber: $("#CardNumber").val(),
tradetype:$('input:radio[name="tradetype"]:checked').val(),
success:$('input:radio[name="success"]:checked').val(),
};
return temp;
};
return oTableInit;
};
//静态调用的方式
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
})
我们还可以通过设置来使用远程URL数据url: 'data1.json'。
$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}]
})
您还可以添加pagination，search和sorting表格，如下表所示。
$('#table').bootstrapTable({
url: 'data1.json',
pagination: true,
search: true,
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}]
})
4、服务端返回参数要求
必须返回rows和total字段，由于服务端返回的数据可能包含data、errno等信息，所以可以使用responseHandler。
使用方法：
//1、这个块中增加一个字段
$('#my-table').bootstrapTable({
……
responseHandler: responseHandler,
……
});
//2增加一个函数
var TableInit = function () {
……
function responseHandler(res) {
if (res && res.errno==0) {
/*$('#total').text(res.data.total);
$('#amount').text(res.data.stat.amount);
$('#terminal').text(res.data.stat.terminal);
$('#payment').text(res.data.stat.payment);
$('#offline').text(res.data.stat.offline);
$('#points').text(res.data.stat.points);*/
return {
"rows": res.data.list,
"total": res.data.total,
}
} else {
return {
"rows": [],
"total":0,
}
}
}
……
}
5、补充
搜索功能
1、视图层定义一个button，为了美观，可以将按钮、查询的参数 用一个table包裹取来
<input v-on:click="search" class="xxx" type="button" value="搜索">
2、在vue的method块定义一个函数
search: function() {
//定位到table的节点，然后调用bootstrapTable函数，传参refresh
$('#my_table').bootstrapTable('refresh');
}
3、在function TableInit(){……}中加入函数
function queryParams (params) {
var temp = {
//这几个似乎是系统自带的
size : params.limit, // 每页显示数量
offset : params.offset, // SQL语句起始索引
sort: params.sort,
order: params.order,
//自定义的查询参数写这里
start_time: $('#start_time').val(),
end_time: $('#end_time').val(),
};
return temp;
}
动态改变url、列等
动态改变请求参数：$('#my-table').bootstrapTable('refresh',{url:"xxx"});
动态改变column等属性:
$('#my-table').bootstrapTable("refreshOptions",{url:"xxx",columns: [{
xxx});
或者销毁后重新生成
$('#list').bootstrapTable('destroy').bootstrapTable({
其他需要注意的问题
当list为空 total判断不是最后一页的时候 会循环重复请求后台接口……
扫一扫
471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
