任务管理系统 - 任务列表 - 常规

<!DOCTYPE html>
<html>
<head>
    <title>任务列表</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
<pre><code>    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
    }

    button {
        width: 100px;
        height: 30px;
        background-color: #4CAF50;
        color: white;
        border: none;
        cursor: pointer;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
<div>
<pre><code>&lt;h1&gt;任务列表&lt;/h1&gt;
&lt;table id=&quot;data-table&quot;&gt;
    &lt;tr&gt;
        &lt;th&gt;任务id&lt;/th&gt;
        &lt;th&gt;任务名称&lt;/th&gt;
        &lt;th&gt;任务组名&lt;/th&gt;
        &lt;th&gt;调用目标字符串&lt;/th&gt;
        &lt;th&gt;执行表达式&lt;/th&gt;
        &lt;th&gt;任务状态&lt;/th&gt;
        &lt;th&gt;任务描述&lt;/th&gt;
        &lt;th&gt;操作&lt;/th&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>
</div>
<p></p>
<p></p>
<div >
    <button><a href="http://localhost:8086/quartz/insert" style="color: #fff;">插入任务</a></button>
</div>
<script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost:8086/quartz/list', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            var table = document.getElementById('data-table');

            for (var i = 0; i < data.length; i++) {
                var row = table.insertRow(i + 1);
                var taskIdCell = row.insertCell(0);
                var taskNameCell = row.insertCell(1);
                var taskGroupNameCell = row.insertCell(2);
                var targetStringCell = row.insertCell(3);
                var executionExpressionCell = row.insertCell(4);
                var taskStatusCell = row.insertCell(5);
                var taskDescCell = row.insertCell(6);
                var actionCell = row.insertCell(7);

                taskIdCell.innerHTML = data[i].jobId;
                taskNameCell.innerHTML = data[i].jobName;
                taskGroupNameCell.innerHTML = data[i].jobGroup;
                targetStringCell.innerHTML = data[i].invokeTarget;
                executionExpressionCell.innerHTML = data[i].cronExpression;
                taskStatusCell.innerHTML = data[i].status;
                taskDescCell.innerHTML = data[i].remark;

                var editButton = document.createElement('button');
                editButton.innerHTML = '修改';
                editButton.setAttribute('jobId', data[i].jobId);
                editButton.addEventListener('click', function() {
                    var jobId = this.getAttribute('jobId');
                    window.open('edit-job.html?id=' + jobId, '_blank');
                });
                actionCell.appendChild(editButton);

                var deleteButton = document.createElement('button');
                deleteButton.innerHTML = '删除';
                deleteButton.setAttribute('jobId', data[i].jobId);
                deleteButton.addEventListener('click', function() {
                    var jobId = this.getAttribute('jobId');
                    var xhr = new XMLHttpRequest();
                    xhr.open('DELETE', 'http://localhost:8086/quartz/deleteJobById?id=' + jobId, true);
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            alert('任务删除成功');
                            location.reload();
                        }
                    };
                    xhr.send();
                });
                actionCell.appendChild(deleteButton);
            }
        }
    };
    xhr.send();
</script>
</body>
</html>