本人已参与「新人创作礼」活动，一起开启掘金创作之路。
全部带演示！！功能如下图所示，前后台数据链路已打通： 如果有需要后台代码的可以私聊我！
首先概览图：
顺便附上echarts复杂图表：每位成员一段时间内最高最低值、每天平均值、组员均值
长文预警！！
添加功能演示：
核心代码：
form.on('submit(add)',function(data) {
console.log($(".zbmc").val(),$(".zbmc").val());
console.log($("#test1").val(),$("#test1").val());
if ( $(".zbmc").val()==undefined || $("#test1").val()==undefined){
top.layer.msg("请完善内容", {
icon: 0,
title:'任务单管理',
time:2000
})
return false
}
var source=data.field//表单数据
console.log(source)
//发异步，把数据提交给php
top.layer.msg("正在添加任务单", {
icon: 16,
title:'任务单管理'
},
function() {
//调用接口传递数据添加
var data = {
yycj:source.yycj
,ywlb:source.ywlb
,zbbh: source.zbbh
,zbmc: source.zbmc
,zrr: source.zrr
,lszrr: source.lszrr
,zbccbm:source.zbccbm
,scdwsb:source.scdwsb
,dwszbmxb:source.dwszbmxb
,dwszbhzb:source.dwszbhzb
,adszbb:source.adszbb
,zbmxbm:source.zbmxbm
,sfwc:source.sfwc
,wcrq: source.wcrq
,sfydd: source.sfydd
,lsqk: source.lsqk
,kzlmc: source.kzlmc
,zbylxy: source.zbylxy
}
console.log(data);
$.ajax({
url: '/TaskMana/addTask',
data: JSON.stringify(data),
type: 'post',
dataType: 'text',
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
processData: false,
cache: false,
success: function (msg) {
top.layer.msg('添加成功', {icon: 1});
//子页面调用父页面方法，把新增的值传过去，那边
window.parent.location.reload();//修改成功后刷新父界面
// 获得frame索引
var index = parent.layer.getFrameIndex(window.name);//关闭当前frame
parent.layer.close(index); //再执行关闭
},
error: function () {
top.layer.msg('添加失败,请重试', {icon: 2});
}
})
});
return false;
});
快速添加一行和快速编辑演示：
功能代码和上面一样，只是参数稍有变动，如果需要添加有默认值可以直接填写：
//快捷添加
$("#addOne").click(function () {
layui.use(['layer', 'table'], function () {
})
top.layer.msg("正在插入...", {
icon: 16,
title:'任务单管理'
},
function() {
//调用接口传递数据添加 默认数据
var data = {
yycj:""
,ywlb:""
,zbbh: ""
,zbmc: ""
,zrr: ""
,lszrr:""
,zbccbm:""
,scdwsb:""
,dwszbmxb:""
,dwszbhzb:""
,adszbb:""
,zbmxbm:""
,sfwc:""
,wcrq:""
,sfydd:""
,lsqk:""
,kzlmc:""
,zbylxy:""
}
console.log(data);
$.ajax({
url: '/TaskMana/addTask',
data: JSON.stringify(data),
type: 'post',
dataType: 'text',
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
processData: false,
cache: false,
success: function (msg) {
top.layer.msg('添加成功,请在表单内编辑', {icon: 1});
//子页面调用父页面方法，把新增的值传过去，那边
// window.location.reload();//修改成功后刷新父界面
layui.table.reload('table1')
},
error: function () {
top.layer.msg('添加失败', {icon: 2});
}
})
});
return false;
})
删除一行或多行演示
核心功能代码，如果只有一条数据直接删除，多条循环调用后端接口删除：
function taskdel(tableBox) {
layui.use('table', function () {
var table = layui.table;
var table1 = table.checkStatus(tableBox).data; //idTest 即为基础参数 id 对应的值
if (table1.length>0){
top.layer.confirm('确定删除选中的数据？', {icon: 3, title: '提示信息'}, function (index) {
console.log("确认删除")
if (table1.length > 1) {
console.log("走if")
for(var i = 0; i<table1.length;i++){
$.getJSON('/TaskMana/delTask?xh='+table1[i].xh,function (data) {
top.layer.close(index);
top.layer.msg('删除成功', {icon: 1,time: 2000});
location.reload();
table.reload(tableBox)
})
}
}else{
console.log("走else")
$.getJSON('/TaskMana/delTask?xh='+table1[0].xh,function (data) {
// console.log("删除成功+"+i)
top.layer.close(index);
top.layer.msg('删除成功', {icon: 1,time: 2000});
location.reload();
table.reload(tableBox)
})
}
})
}else{
top.layer.msg("请选择需要删除的行");
}
console.log(table1);
})
}
导出演示
核心代码：
$('.out-excel').on('click',function () {
var $ = layui.jquery
var layer = layui.layer
var excel = layui.excel
// 模拟从后端接口读取需要导出的数据
$.ajax({
url: "/TaskMana/export"
, dataType: 'json'
, success: function (res) {
var data = res
for(var i = 0; i < data.length; i++)
{
delete data[i].num
}
console.log(data);
// 重点2！！！一般都需要加一个表头，表头的键名顺序需要与最终导出的数据一致
data.unshift({
xh:"序号",
// num:"数字",
yycj: '应用场景',
ywlb: '业务类别',
zbbh :'指标编号',
zbmc :'指标名称',
zrr :'责任人',
lszrr :'历史责任人',
zbccbm :'指标存储表名',
zbmxbm :'指标模型表名' ,
sfwc :'是否完成',
wcrq :'脚本完成时间',
sfydd :'是否已调度',
scdwsb :'数仓dws层表',
dwszbmxb:'DWS层指标明细表',
dwszbhzb:'DWS层指标汇总表',
adszbb :'ADS层指标表',
lsqk :'历史情况',
kzlmc :'控制流名称',
zbylxy :'指标依赖血缘'
})
var timestart = Date.now()
excel.exportExcel({
sheet1: data
}, '任务单汇总数据.xlsx', 'xlsx')
// var timeend = Date.now()
// var spent = (timeend - timestart) / 1000
// layer.alert('单纯导出耗时 ' + spent + ' s')
}
, error: function () {
layer.alert('获取数据失败，请检查是否部署在本地服务器环境下')
}
})
});
导入演示
核心代码
layui.use('upload', function() {
var $ = layui.jquery
, upload = layui.upload;
//多文件列表示例
var demoListView = $('#demoList')
,uploadListIns = upload.render({
elem: '#test8'
,url: '/TaskMana/a' //改成您自己的上传接口
// ,url: 'https://httpbin.org/post' //改成您自己的上传接口
,exts: 'xlsx'//设置可上传文件
,accept: 'file'
,multiple: true
,auto: false
,bindAction: '#test9'
,done: function(res, index, upload){
top.layer.msg('添加成功！', {icon: 1,time: 3000});
setTimeout(function () {
window.parent.location.reload();//修改成功后刷新父界面
// 获得frame索引
var index = parent.layer.getFrameIndex(window.name);//关闭当前frame
parent.layer.close(index); //再执行关闭
},2000);
}
,error: function(index, upload){
console.log(index,upload);
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
})
关键字搜索演示
核心代码，后台sql语句把需要搜索的字段都like一下：
function taskSearch() {
top.layer.msg("正在查询", {
icon: 16,
title:'任务单管理'
},
function() {
console.log($("#world").val());
var world=$("#world").val();
// $.getJSON("/TaskMana/findTaskManaByWorld?word="+world,function (data) {
// console.log(data);
// })
//上述方法等价于
layui.use('table', function () {
var table = layui.table;
layui.table.reload('table1', {
url: "/TaskMana/findTaskManaByWorld"
,where: {
word: world
}
,page: true
,limit:10
});
})
}
)
// return false
}
编辑页面
前面已经说了单元格编辑，这里不再讲编辑页面，其实就是带主键去编辑页面显示数据，再进行修改 根据主键更新！
上面的demo已经实现前后端交互，希望和大佬们交流探讨，以上。