用jQuery、ajax和bootstrap写一个部门管理的修改信息功能
时间: 2024-02-25 19:58:41 浏览: 20
好的,我可以为你提供一个具体的实现方案,代码如下:
HTML代码:
```
<!-- 表格 -->
<table class="table">
<thead>
<tr>
<th>部门编号</th>
<th>部门名称</th>
<th>部门负责人</th>
<th>操作</th>
</tr>
</thead>
<tbody id="table-body">
<!-- 动态生成表格行 -->
</tbody>
</table>
<!-- 模态框 -->
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="edit-modal-label">编辑部门信息</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="edit-form">
<input type="hidden" name="department_id" id="department-id">
<div class="form-group">
<label for="department-name">部门名称</label>
<input type="text" class="form-control" name="department_name" id="department-name">
</div>
<div class="form-group">
<label for="manager">部门负责人</label>
<input type="text" class="form-control" name="manager" id="manager">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="save-btn">保存</button>
</div>
</div>
</div>
</div>
```
JS代码:
```
// 页面加载完成后,获取部门信息并展示到表格中
$(function() {
$.ajax({
url: "获取数据接口的URL",
type: "GET",
dataType: "json",
success: function(data) {
$.each(data, function(index, item) {
var tr = $("<tr></tr>");
var td1 = $("<td></td>").text(item.department_id);
var td2 = $("<td></td>").text(item.department_name);
var td3 = $("<td></td>").text(item.manager);
var editBtn = $("<button></button>").addClass("btn btn-primary").text("编辑");
editBtn.click(function() {
// 点击编辑按钮后的处理逻辑
$("#department-id").val(item.department_id);
$("#department-name").val(item.department_name);
$("#manager").val(item.manager);
$("#edit-modal").modal("show");
});
var td4 = $("<td></td>").append(editBtn);
tr.append(td1, td2, td3, td4);
$("#table-body").append(tr);
});
},
error: function(xhr, status, error) {
console.log("获取数据失败");
}
});
// 点击保存按钮后,将修改后的信息提交到后端保存
$("#save-btn").click(function() {
var data = $("#edit-form").serializeArray();
$.ajax({
url: "提交数据接口的URL",
type: "POST",
dataType: "json",
data: data,
success: function(data) {
console.log("数据提交成功");
$("#edit-modal").modal("hide");
},
error: function(xhr, status, error) {
console.log("数据提交失败");
}
});
});
});
```
以上代码实现了使用jQuery、ajax和Bootstrap编写部门管理的修改信息功能。具体实现还需要根据你的具体需求进行修改和完善。