Bootstrap 任务模型管理表格和按钮示例
<!DOCTYPE html>
<html>
<head>
<title>任务模型管理</title>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
</head>
<body>
<div class='container mt-4'>
<h1>任务模型管理</h1>
<hr>
<div class='row'>
<div class='col-md-6'>
<form id='taskForm' class='mb-3'>
<div class='form-group'>
<label for='nodeName'>节点名称</label>
<input type='text' class='form-control' id='nodeName' required>
</div>
<div class='form-group'>
<label for='stage'>阶段</label>
<input type='text' class='form-control' id='stage' required>
</div>
<div class='form-group'>
<label for='taskType'>任务类型</label>
<input type='text' class='form-control' id='taskType' required>
</div>
<div class='form-group'>
<label for='inheritance'>继承关系</label>
<input type='text' class='form-control' id='inheritance' required>
</div>
<div class='form-check'>
<input type='checkbox' class='form-check-input' id='isExit'>
<label class='form-check-label' for='isExit'>是否准出</label>
</div>
<div class='form-check'>
<input type='checkbox' class='form-check-input' id='isProjectTask'>
<label class='form-check-label' for='isProjectTask'>是否课题任务</label>
</div>
<div class='form-group'>
<label for='defaultModel'>默认模型</label>
<input type='text' class='form-control' id='defaultModel' required>
</div>
<button type='submit' class='btn btn-primary'>添加</button>
<button type='button' class='btn btn-secondary' id='updateBtn' disabled>修改</button>
<button type='button' class='btn btn-danger' id='deleteBtn' disabled>删除</button>
</form>
</div>
<div class='col-md-6'>
<table class='table' id='taskTable'>
<thead>
<tr>
<th scope='col'>节点名称</th>
<th scope='col'>阶段</th>
<th scope='col'>任务类型</th>
<th scope='col'>继承关系</th>
<th scope='col'>是否准出</th>
<th scope='col'>是否课题任务</th>
<th scope='col'>默认模型</th>
</tr>
</thead>
<tbody>
<!-- 表格内容将通过JavaScript动态生成 -->
</tbody>
</table>
</div>
</div>
</div>
<pre><code><script src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
<script>
$(document).ready(function() {
// 初始化表格数据
var taskData = [
{ nodeName: '节点1', stage: '阶段1', taskType: '类型1', inheritance: '继承关系1', isExit: true, isProjectTask: false, defaultModel: '模型1' },
{ nodeName: '节点2', stage: '阶段2', taskType: '类型2', inheritance: '继承关系2', isExit: false, isProjectTask: true, defaultModel: '模型2' }
];
loadTaskData();
// 提交表单时添加或更新任务模型
$("#taskForm").submit(function(event) {
event.preventDefault();
var nodeName = $("#nodeName").val();
var stage = $("#stage").val();
var taskType = $("#taskType").val();
var inheritance = $("#inheritance").val();
var isExit = $("#isExit").is(":checked");
var isProjectTask = $("#isProjectTask").is(":checked");
var defaultModel = $("#defaultModel").val();
if ($("#updateBtn").prop("disabled")) {
// 添加任务模型
var taskModel = {
nodeName: nodeName,
stage: stage,
taskType: taskType,
inheritance: inheritance,
isExit: isExit,
isProjectTask: isProjectTask,
defaultModel: defaultModel
};
taskData.push(taskModel);
} else {
// 更新任务模型
var rowIndex = $("#updateBtn").data("rowIndex");
taskData[rowIndex].nodeName = nodeName;
taskData[rowIndex].stage = stage;
taskData[rowIndex].taskType = taskType;
taskData[rowIndex].inheritance = inheritance;
taskData[rowIndex].isExit = isExit;
taskData[rowIndex].isProjectTask = isProjectTask;
taskData[rowIndex].defaultModel = defaultModel;
// 切换回添加按钮
$("#updateBtn").prop("disabled", true);
$("#deleteBtn").prop("disabled", true);
}
loadTaskData();
clearForm();
});
// 点击表格行时选中任务模型并启用修改和删除按钮
$("#taskTable").on("click", "tr", function() {
var rowIndex = $(this).index();
var taskModel = taskData[rowIndex];
$("#nodeName").val(taskModel.nodeName);
$("#stage").val(taskModel.stage);
$("#taskType").val(taskModel.taskType);
$("#inheritance").val(taskModel.inheritance);
$("#isExit").prop("checked", taskModel.isExit);
$("#isProjectTask").prop("checked", taskModel.isProjectTask);
$("#defaultModel").val(taskModel.defaultModel);
$("#updateBtn").prop("disabled", false).data("rowIndex", rowIndex);
$("#deleteBtn").prop("disabled", false);
});
// 点击删除按钮删除任务模型
$("#deleteBtn").click(function() {
var rowIndex = $("#updateBtn").data("rowIndex");
taskData.splice(rowIndex, 1);
loadTaskData();
clearForm();
$("#updateBtn").prop("disabled", true);
$("#deleteBtn").prop("disabled", true);
});
// 加载任务模型到表格
function loadTaskData() {
var tableBody = "";
for (var i = 0; i < taskData.length; i++) {
var taskModel = taskData[i];
tableBody += "<tr>";
tableBody += "<td>" + taskModel.nodeName + "</td>";
tableBody += "<td>" + taskModel.stage + "</td>";
tableBody += "<td>" + taskModel.taskType + "</td>";
tableBody += "<td>" + taskModel.inheritance + "</td>";
tableBody += "<td>" + (taskModel.isExit ? "是" : "否") + "</td>";
tableBody += "<td>" + (taskModel.isProjectTask ? "是" : "否") + "</td>";
tableBody += "<td>" + taskModel.defaultModel + "</td>";
tableBody += "</tr>";
}
$("#taskTable tbody").html(tableBody);
}
// 清除表单内容
function clearForm() {
$("#nodeName").val("");
$("#stage").val("");
$("#taskType").val("");
$("#inheritance").val("");
$("#isExit").prop("checked", false);
$("#isProjectTask").prop("checked", false);
$("#defaultModel").val("");
}
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/qjFP 著作权归作者所有。请勿转载和采集!