< % @ page language = "java" contentType = "text/html; charset=UTF-8" pageEncoding = "UTF-8" % >
< % @ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" % >
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http - equiv = "Content-Type" content = "text/html; charset=UTF-8" >
<meta http - equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" >
<meta http - equiv = "Access-Control-Allow-Origin" content = "*" >
<meta name = "renderer" content = "webkit" >
<meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" >
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" >
<meta name = "apple-mobile-web-app-capable" content = "yes" >
<meta name = "format-detection" content = "telephone=no" >
< %
String path = request.getContextPath();
String rootPath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ "/" ;
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path;
request.setAttribute( "basePath" , basePath);
request.setAttribute( "rootPath" , rootPath);
pageContext.setAttribute( "newLineChar" , "\n" );
% >
<link rel = "stylesheet" href = "${basePath}/static/layui/css/layui.css" media = "all" / >
<link rel = "stylesheet" href = "//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media = "all" / >
<link rel = "stylesheet" href = "${basePath}/static/css/tasks.css" media = "all" / >
< / head>
<body class = "childrenBody" >
<blockquote class = "layui-elem-quote tasks_search layui-form" >
< input id = "checkids" type = "hidden" >
<div class = "layui-inline" >
<div class = "layui-input-inline" >
< input type = "text" placeholder = "請輸入關鍵字" class = "layui-input search_input" >
< / div>
<div class = "layui-input-inline" >
<select lay - verify = "required" class = "search_select" >
<option value = "">請選擇任務狀態< / option>
<option value = "0" >未執行< / option>
<option value = "1" >執行成功< / option>
<option value = "2" >執行失敗< / option>
< / select>
< / div>
<a class = "layui-btn search_btn" id = "search" >查詢< / a>
< / div>
<div class = "layui-inline" >
<a class = "layui-btn layui-btn-normal tasksAdd_btn" style = "background-color:#5FB878" >添加任務< / a>
< / div>
<div class = "layui-inline" >
<a class = "layui-btn tasksEdit_btn" >編輯任務< / a>
< / div>
<div class = "layui-inline" >
<a class = "layui-btn layui-btn-warm tasksDel_btn" >選擇刪除< / a>
< / div>
<div class = "layui-inline" >
<a class = "layui-btn layui-btn-danger tasksBatchDel_btn" >批量刪除< / a>
< / div>
< / blockquote>
<div class = "layui-form tasks_list" >
<table class = "layui-table" >
<colgroup>
<col width = "50" >
<col width = "10%" >
<col>
<col width = "7%" >
<col width = "25%" >
<col width = "8%" >
<col width = "15%" >
<col width = "15%" >
< / colgroup>
<thead>
<tr>
<th>< input type = "checkbox" lay - skin = "primary" lay - filter = "allChoose" id = "allChoose" >< / th>
<th>名稱< / th>
<th>簡述< / th>
<th>狀態< / th>
<th>進度< / th>
<th>創建者< / th>
<th>創建時間< / th>
<th>操作< / th>
< / tr>
< / thead>
<tbody class = "tasks_content" >< / tbody>
< / table>
< / div>
<div id = "page" >< / div>
<script type = "text/javascript" src = "${basePath}/static/js/jquery.js" >< / script>
<script type = "text/javascript" src = "${basePath}/static/layui/layui.js" >< / script>
<script type = "text/javascript" >
$(function(){
/ / 初始化列表及分頁
submit();
/ / 點擊查詢時觸發
$( "#search" ).click(function(){
/ / 當點擊搜索的時候,起始搜索值爲 0 - 10 ,且當前頁回到第一頁
startPage = 0 ;
currentPage = 1 ;
submit();
})
});
/ / 分頁參數設置 這些全局變量關係到分頁的功能
var startPage = 0 ;
var limitNum = 10 ;
var currentPage = 1 ;
var totalPage = 0 ;
/ / ajax請求後臺數據
function submit(){
var selectName = $( ".search_input" ).val()
var selectStatus = $( ".search_select" ).val()
$.ajax({
type : "post" ,
async:false,
url: "${basePath}/task/taskListByPage.htm" ,
data:{start:startPage, limit:limitNum,selectName:selectName,selectStatus:selectStatus},
success:function(data,status){
data = eval ( "(" + data + ")" ); / / 轉爲對象
startPage = data.currentIndex; / / 當前頁數(後臺返回)
totalPage = data.totalPage; / / 總頁數(後臺返回)
toPage(data.dataList);
}
});
}
/ / 看看參數有的是否爲空(data:後臺數據)
function toPage(data){
layui.use([ 'form' , 'layer' , 'layedit' , 'laydate' , 'laypage' , 'element' ], function() {
var form = layui.form(),
layer = layui.layer,
layedit = layui.layedit,
laydate = layui.laydate,
laypage = layui.laypage,
element = layui.element();
/ / 調用分頁
laypage({
cont: 'page'
,pages: totalPage
,curr: currentPage
,skip: true
,jump: function(obj, first){
currentPage = obj.curr;
startPage = (obj.curr - 1 ) * limitNum;
getBacktasks(data); / / 渲染數據
if (!first){ / / 加此判斷,避免初始時會無限刷新
submit(); / / 一定要把翻頁的ajax請求放到這裏,不然會請求兩次。
}
element.init();
form.render();
}
});
/ / 全選
form.on( 'checkbox(allChoose)' , function (data) {
var checkvals = "";
var child = $(data.elem).parents( 'table' ).find( 'tbody input[type="checkbox"]:not([name="show"])' );
child.each(function (index, item) {
item.checked = data.elem.checked;
if (item.checked){
checkvals + = "," + item.value;
}
});
/ / 捕捉被選記錄個數及 id
$( "#checkids" ).attr( "valength" ,checkvals.split( "," ).length - 1 );
$( "#checkids" ).val(checkvals);
form.render( 'checkbox' );
});
/ / 通過判斷文章是否全部選中來確定全選按鈕是否選中
form.on( "checkbox(choose)" , function (data) {
var checkvals = "";
var child = $(data.elem).parents( 'table' ).find( 'tbody input[type="checkbox"]:not([name="show"])' );
var childChecked = $(data.elem).parents( 'table' ).find( 'tbody input[type="checkbox"]:not([name="show"]):checked' )
if (childChecked.length = = child.length) {
$(data.elem).parents( 'table' ).find( 'thead input#allChoose' ).get( 0 ).checked = true;
} else {
$(data.elem).parents( 'table' ).find( 'thead input#allChoose' ).get( 0 ).checked = false;
}
/ / 遍歷被選中的記錄
for (var i = 0 ;i<childChecked.length;i + + ){
checkvals + = "," + childChecked[i].value;
}
/ / 捕捉被選記錄個數及 id
$( "#checkids" ).attr( "valength" ,childChecked.length);
$( "#checkids" ).val(checkvals);
form.render( 'checkbox' );
})
/ / 處理進度條(n:後臺獲取;timer:循環index; id :任務 id ;start:點擊啓動時記錄任務對象)
var n = 0 , timer = 0 , id , start;
var DISABLED = 'layui-btn-disabled' ;
var active = {
loading: function(othis){
start = othis;
if (othis.hasClass(DISABLED)) return ;
/ / 初始化n
n = parseInt(othis.context.lang);
/ / loading
timer = setInterval(function(){
n = n + Math.random() * 10 | 0 ;
if (n> 100 ){
n = 100 ;
clearInterval(timer);
othis.removeClass(DISABLED);
/ / 記錄到數據庫
taskSchedule( 100 ,othis.context.name);
}
element.progress(othis.context. id , n + '%' );
}, 300 + Math.random() * 1000 );
othis.addClass(DISABLED);
},stop: function(othis){
/ / 記錄進度
start.context.lang = n;
/ / 停止循環
clearInterval(timer);
/ / 去除disabled標記
start.removeClass(DISABLED);
/ / 記錄到數據庫
taskSchedule(n,othis.context.name);
}
};
$( '.taskProgress' ).on( 'click' , function(){
var othis = $(this), type = $(this).data( 'type' );
active[ type ] ? active[ type ].call(this, othis) : '';
});
});
};
/ / 遍歷裝載數據
function getBacktasks(data){
var htmlStr = "";
$.each(data,function(v,o){
htmlStr + = "<tr><td><input type=\"checkbox\" lay-skin=\"primary\" class='cd_checkbox' value=\"" + o. id + "\" lay-filter=\"choose\"></td>" ;
htmlStr + = '<td>' + o.tName + '</td>' ;
htmlStr + = '<td>' + o.tDesc + '</td>' ;
htmlStr + = '<td>' ;
if ( 0 = = o.tStatus){
htmlStr + = '<i class=\"layui-icon\" style=\"font-size: 30px; color: #FFB800;\"></i>'
} else if ( 1 = = o.tStatus){
htmlStr + = '<i class=\"layui-icon\" style=\"font-size: 30px; color: #5FB878\"></i>'
} else {
htmlStr + = '<i class=\"layui-icon\" style=\"font-size: 30px; color: #FF5722;\">ဆ</i>'
}
htmlStr + = '</td>' ;
htmlStr + = '<td>' ;
htmlStr + = '<div class=\"layui-progress layui-progress-big\" lay-showpercent=\"true\" lay-filter=\"task_' + o. id + '\">' ;
htmlStr + = ' <div class=\"layui-progress-bar layui-bg-green\" lay-percent=\"' + o.tSchedule + '%\"></div>' ;
htmlStr + = '</div>' ;
htmlStr + = '</td>' ;
htmlStr + = '<td>' + o.creater + '</td>' ;
htmlStr + = '<td>' + o.createDate + '</td>' ;
htmlStr + = '<td>' ;
htmlStr + = '<a class=\"layui-btn layui-btn-mini taskProgress\" data-type=\"loading\" id=\"task_' + o. id + '\" name=\"' + o. id + '\" lang=\"' + o.tSchedule + '\"><i class=\"iconfont icon-edit\"></i>啓動</a>' ;
htmlStr + = '<a class=\"layui-btn layui-btn-danger layui-btn-mini taskProgress\" data-type=\"stop\" name=\"' + o. id + '\"><i class=\"layui-icon\"></i>停止</a>' ;
htmlStr + = '</td></tr>' ;
});
if (data.length> 0 ){
$( "#page" ).show();
$( ".tasks_content" ).html(htmlStr);
} else {
$( "#page" ).hide();
$( ".tasks_content" ).html( "<tr><td colspan='9'>暫無數據</td></tr>" );
}
/ / 清空checkids(checkbox記錄)
$( "#checkids" ).attr( "valength" , 0 );
$( "#checkids" ).val("");
}
/ / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = 點擊事件 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
$(window).one( "resize" ,function(){
$( ".tasksAdd_btn" ).click(function(){
var index = layui.layer. open ({
title : "添加任務" ,
type : 2 , anim: 2 ,
content : "${basePath}/task/modifyPage.htm" ,
success : function(layero, index){
setTimeout(function(){
layui.layer.tips( '點擊此處返回數據源列表' , '.layui-layer-setwin .layui-layer-close' , {
tips: 3
});
}, 500 )
}
})
layui.layer.full(index);
});
$( ".tasksEdit_btn" ).click(function(){
if ($( "#checkids" ).attr( "valength" ) = = 1 ){
task_edit($( "#checkids" ).val().substring( 1 ));
} else {
layui.layer.alert( '友情提示:請選擇一條記錄進行編輯' , {
skin: 'layui-layer-molv'
,closeBtn: 0
});
}
});
$( ".tasksDel_btn" ).click(function(){
if ($( "#checkids" ).attr( "valength" ) = = 1 ){
task_del($( "#checkids" ).val().substring( 1 ));
} else {
layui.layer.alert( '友情提示:請選擇一條記錄進行刪除' , {
skin: 'layui-layer-molv'
,closeBtn: 0
});
}
});
$( ".tasksBatchDel_btn" ).click(function(){
if ($( "#checkids" ).attr( "valength" )> = 1 ){
task_del($( "#checkids" ).val().substring( 1 ));
} else {
layui.layer.alert( '友情提示:至少選擇一條記錄進行刪除' , {
skin: 'layui-layer-molv'
,closeBtn: 0
});
}
});
}).resize();
function task_edit( id ){
var index = layui.layer. open ({
title : "編輯任務" ,
type : 2 , anim: 2 ,
content : "${basePath}/task/modifyPage.htm?id=" + id ,
success : function(layero, index){
setTimeout(function(){
layui.layer.tips( '點擊此處返回數據源列表' , '.layui-layer-setwin .layui-layer-close' , {
tips: 3
});
}, 500 )
}
})
layui.layer.full(index);
}
function task_del(ids){
layer.confirm( '友情提示:你確定要刪除該記錄嗎' , {skin: 'layui-layer-molv' }, function(index){
$.ajax({
type : "POST" ,
async : false,
dataType : "JSON" ,
cache : false,
url : "${basePath}/task/delete.htm" ,
data : { "ids" :ids},
success : function(data) {
if (data.flag) {
layer.msg(data.msg, {
icon:data.msgIcon,
time:data.msgTime
}, function(){
submit();
});
} else {
layer.msg(data.msg, {
icon:data.msgIcon,
time:data.msgTime
});
}
}
});
layer.close(index);
});
}
/ / 記錄進度
function taskSchedule(n, id ){
$.ajax({
type : "POST" ,
async : false,
dataType : "JSON" ,
cache : false,
url : "${basePath}/task/remschedule.htm" ,
data : { "schedule" :n, "id" : id },
success : function(data) {}
});
}
< / script>
< / body>
< / html>
|