盒子
盒子
文章目录
  1. echarts
  2. pagehelper
  3. bootstrap table

echarts+pagehelper+bootstrap+table

echarts

1
<div id="place" style="width: 500px;height: 400px;"></div>
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
function drawAbilityChart(id, list) {
var newList=[];
for(var i = 0; i < list.length; i++){
var jobImg = new Object();
jobImg.name = list[i].label;
jobImg.value = i+201 + 1000;
console.log(jobImg);
newList.push(jobImg);
}
var myChart = echarts.init(document.getElementById(id));
myChart.setOption(
{
title: {
text: "岗位能力需求",
link: '#',
subtext: '牛逼不',
sublink: 'http://hqweay.cn',
},
tooltip: {},
series: [{
type: 'wordCloud',
gridSize: 20,
sizeRange: [12, 50],
rotationRange: [0, 0],
shape: 'circle',
textStyle: {
normal: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: newList //展示数据
}]
}
);

return true;
}

使用方法很简单,只需要在网页上放一个绘制图表的 div(得定好大小),然后调用 echarts 的函数即可。

引入之类的不提。

官网上的示例只给了 Option,复制过来放到 setOption() 即可。

上面是我封装的一个函数,真正需要自己做的其实只有 data(需要为 json 格式,我在上面注释了那一行。)。

pagehelper

一款 Mybatis 分页插件。

Spring Boot 使用。

  • 引入pagehelper-spring-boot-starter
  • yml配置
1
2
3
4
5
pagehelper:
helperDialect: mysql
reasonable: true
supportMethodsArguments: true
params: count=countSql

使用方式是在需要分页查询操作之前执行 PageHelper的方法。

例如。

1
2
PageHelper.startPage(pageNumber,pageSize);
List<JobInfo> pageInfo = jobInfoMapper.selectJobInfo();

PageHelper 设置了查询的页数,该页的数据量。

(PageHelper 还有许多其他的方法来设置查询的方式,上面这个只是一种)

当执行下面的查询操作时,PageHelper 会在查询的 SQL 代码后面添加相应的分页数据。

selectJobInfo() 里的 SQL 语句一般是 select * from 表,PageHelper 就会在该语句后面添加 limit *** 什么什么的…

真正执行的 sql 语句就会是类似于 select * from 表 limit 10.... 之类的。

所以这里出现了一个问题!

在 mybatis 里设置 sql 语句的时候,sql 后面加不加分号都是可以的。

要使用分页插件的话,就必须不能加分号。

毕竟 pagehelper 的工作方式就是在原 sql 后面添加一些值嘛…

如果有分号,实际执行的 sql 就变成了

select * from 表;limit 10....

这样会出错哦。

bootstrap table

前面的分页插件就是为了用来和该插件配合的。

SpringBoot+BootStrapTable+PageHelper用户新增,删除,修改

这个帖子写的好。

核心代码。

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
30
31
32
33
34
35
36
37
38
39
40
  $("#dataGrid").bootstrapTable({  
method:"POST",
//极为重要,缺失无法执行queryParams,传递page参数
contentType : "application/x-www-form-urlencoded",
dataType:"json",
url:'/user/pageInfo',
queryParams:queryParam, //规定取数据的方式
pagination:true,//显示分页条:页码,条数等
striped:true,//隔行变色
pageNumber:1,//首页页码
pageSize:10,//分页,页面数据条数
sidePagination:"server",//在服务器分页
height:tableModel.getHeight(),
toolbar:"#toolbar",//工具栏
columns : [{
checkbox:"true",
field : "box"
}, {
title : "ID",
field : "id",
visible: false
}, {
title : "账户",
field : "account"
}],
search : true,//搜索
searchOnEnterKey : true,
showRefresh : true,//刷新
showToggle : true//

});
function queryParam(params){
var param = {
limit : this.limit, // 页面大小
offset : this.offset, // 页码
pageNumber : this.pageNumber,
pageSize : this.pageSize
};
return param;
}

queryParam() 这个函数比较重要。

这里与 Pagehelper 配合,只向后端传送了 两个数据,pageNumber,pageSize。还可以设置排序方式什么的…

1
sortOrder: 'desc',//排序方式

这些得在 bootstrapTable() 里设置。

发现如果不开启后端分页,下面这种格式的数据就可以解析。

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
[
{
"id": 1,
"username": "shuzheng",
"password": "123456",
"name": "张三",
"sex": 1,
"age": 28,
"phone": 13987654321,
"email": "469741414@qq.com",
"address": "中国 北京",
"remark": "官网:http://www.shuzheng.cn"
},
{
"id": 2,
"username": "shuzheng",
"password": "123456",
"name": "张三",
"sex": 1,
"age": 28,
"phone": 13987654321,
"email": "469741414@qq.com",
"address": "中国 北京",
"remark": "官网:http://www.shuzheng.cn"
}
]

如果开启服务器分页,后端返回数据必须是这种格式。

1
2
result.put("rows",pageInfo);
result.put("total",total);//总的数据量

我在上面贴的那张帖子,获取总数据量(也就是数据库中表的行数)的方式是这样:

1
2
List<User> users =userService.getUserList();  
int total = users.size();

博主的数据量比较小,可以这样,我的数据量太大了,执行这行的时候就一直在运行中…

所以我在 Mapper 里又写了一条获取数据总量的 sql。

1
2
@Select("select count(id) from job_info")
int getCount();

这样要好得多。