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

<html>
<head>
    <title>Quartz 任务管理系统 - 任务列表</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>
    <h1>任务列表</h1>
    <table id='data-table'>
        <tr>
            <th>任务id</th>
            <th>任务名称</th>
            <th>任务组名</th>
            <th>调用目标字符串</th>
            <th>执行表达式</th>
            <th>任务状态</th>
            <th>任务描述</th>
            <th>操作</th>
        </tr>
    </table>
</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');
<pre><code>        for (var i = 0; i &lt; 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');
                // 添加修改任务的逻辑
                alert('点击了修改按钮，任务ID为：' + jobId);
            });
            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 &amp;&amp; xhr.status === 200) {
                        alert('任务删除成功');
                    }
                };
                xhr.send();
            });
            actionCell.appendChild(deleteButton);
        }
    }
};
xhr.send();
</code></pre>
</script>
</body>
</html>