xxay/Simple_Drawing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加分类功能。

Browse Source
This commit is contained in:
fy3047957834
2021-10-13 22:54:43 +08:00
parent 5c7fb52a32
commit b8eb90ad48
3 changed files with 215 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/page/index.html
+170 -7
View File
@@ -40,11 +40,13 @@
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item NO "><a onclick=ALL()>ALL</a></li>
<li class="layui-nav-item NO "><a onclick=Scatter()>Scatter plot</a></li>
<li class="layui-nav-item NO "><a href="">Line chart</a></li>
<li class="layui-nav-item NO "><a href="">Pie chart</a></li>
<li class="layui-nav-item NO "><a href="">Histogram</a></li>
<li class="layui-nav-item NO "><a href="">Heat map</a></li>
<li class="layui-nav-item NO "><a onclick=Scatter_plot()>Scatter plot</a></li>
<li class="layui-nav-item NO "><a onclick=Line_chart()>Line chart</a></li>
<li class="layui-nav-item NO "><a onclick=Pie_chart()>Pie chart</a></li>
<li class="layui-nav-item NO "><a onclick=Histogram()>Histogram</a></li>
<li class="layui-nav-item NO "><a onclick=Heat_map()>Heat map</a></li>
<li class="layui-nav-item NO "><a onclick=Dot_plot()>Dot plot</a></li>
<li class="layui-nav-item NO "><a onclick=Chord_Diagram()>Chord Diagram</a></li>
</ul>
</div>
@@ -122,9 +124,9 @@
});
function Scatter() {
function Scatter_plot() {
$("#LAY_demo1").empty();
a = "Scatter";
a = "Scatter plot";
layui.use('flow', function () {
var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
var flow = layui.flow;
@@ -149,6 +151,167 @@
});
}
function Line_chart() {
$("#LAY_demo1").empty();
a = "Line chart";
layui.use('flow', function () {
var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
var flow = layui.flow;
flow.load({
elem: '#LAY_demo1' //指定列表容器
, done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
var lis = [];
//以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
$.get('http://127.0.0.1:8000/upload?page=' + page + "&sort=" + a, function (res) {
//假设你的列表返回在data集合中
layui.each(res.data, function (index, item) {
{#lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen">' + item.title + '</div></div></div>');#}
lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen"><img class="img_style" src="' + item.show_chart + '" alt="dd"><br><br>' + '<a href="' + item.url + '"> ' + '<h3 style="text-align:center;">' + item.name + '</h3></a></div></div></div>');
});
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
next(lis.join(''), page < res.pages);
});
}
});
});
}
function Pie_chart() {
$("#LAY_demo1").empty();
a = "Pie chart";
layui.use('flow', function () {
var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
var flow = layui.flow;
flow.load({
elem: '#LAY_demo1' //指定列表容器
, done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
var lis = [];
//以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
$.get('http://127.0.0.1:8000/upload?page=' + page + "&sort=" + a, function (res) {
//假设你的列表返回在data集合中
layui.each(res.data, function (index, item) {
{#lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen">' + item.title + '</div></div></div>');#}
lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen"><img class="img_style" src="' + item.show_chart + '" alt="dd"><br><br>' + '<a href="' + item.url + '"> ' + '<h3 style="text-align:center;">' + item.name + '</h3></a></div></div></div>');
});
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
next(lis.join(''), page < res.pages);
});
}
});
});
}
function Histogram() {
$("#LAY_demo1").empty();
a = "Histogram";
layui.use('flow', function () {
var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
var flow = layui.flow;
flow.load({
elem: '#LAY_demo1' //指定列表容器
, done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
var lis = [];
//以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
$.get('http://127.0.0.1:8000/upload?page=' + page + "&sort=" + a, function (res) {
//假设你的列表返回在data集合中
layui.each(res.data, function (index, item) {
{#lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen">' + item.title + '</div></div></div>');#}
lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen"><img class="img_style" src="' + item.show_chart + '" alt="dd"><br><br>' + '<a href="' + item.url + '"> ' + '<h3 style="text-align:center;">' + item.name + '</h3></a></div></div></div>');
});
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
next(lis.join(''), page < res.pages);
});
}
});
});
}
function Heat_map() {
$("#LAY_demo1").empty();
a = "Heat map";
layui.use('flow', function () {
var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
var flow = layui.flow;
flow.load({
elem: '#LAY_demo1' //指定列表容器
, done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
var lis = [];
//以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
$.get('http://127.0.0.1:8000/upload?page=' + page + "&sort=" + a, function (res) {
//假设你的列表返回在data集合中
layui.each(res.data, function (index, item) {
{#lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen">' + item.title + '</div></div></div>');#}
lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen"><img class="img_style" src="' + item.show_chart + '" alt="dd"><br><br>' + '<a href="' + item.url + '"> ' + '<h3 style="text-align:center;">' + item.name + '</h3></a></div></div></div>');
});
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
next(lis.join(''), page < res.pages);
});
}
});
});
}
function Dot_plot() {
$("#LAY_demo1").empty();
a = "Dot plot";
layui.use('flow', function () {
var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
var flow = layui.flow;
flow.load({
elem: '#LAY_demo1' //指定列表容器
, done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
var lis = [];
//以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
$.get('http://127.0.0.1:8000/upload?page=' + page + "&sort=" + a, function (res) {
//假设你的列表返回在data集合中
layui.each(res.data, function (index, item) {
{#lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen">' + item.title + '</div></div></div>');#}
lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen"><img class="img_style" src="' + item.show_chart + '" alt="dd"><br><br>' + '<a href="' + item.url + '"> ' + '<h3 style="text-align:center;">' + item.name + '</h3></a></div></div></div>');
});
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
next(lis.join(''), page < res.pages);
});
}
});
});
}
function Chord_Diagram() {
$("#LAY_demo1").empty();
a = "Chord Diagram";
layui.use('flow', function () {
var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
var flow = layui.flow;
flow.load({
elem: '#LAY_demo1' //指定列表容器
, done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
var lis = [];
//以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
$.get('http://127.0.0.1:8000/upload?page=' + page + "&sort=" + a, function (res) {
//假设你的列表返回在data集合中
layui.each(res.data, function (index, item) {
{#lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen">' + item.title + '</div></div></div>');#}
lis.push('<div class="layui-col-sm3"><div class="grid-demo"><div class="hen"><img class="img_style" src="' + item.show_chart + '" alt="dd"><br><br>' + '<a href="' + item.url + '"> ' + '<h3 style="text-align:center;">' + item.name + '</h3></a></div></div></div>');
});
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
next(lis.join(''), page < res.pages);
});
}
});
});
}
function ALL() {
$("#LAY_demo1").empty();