用jQuery、ajax和bootstrap写一个部门管理的修改信息

好的，我可以为你提供一个大致的实现思路，具体的代码需要根据你的具体需求和环境进行编写。

1. 页面布局

首先，需要使用Bootstrap进行页面的布局，包括表格、表单等元素的样式。可以使用Bootstrap提供的组件，如表格组件`<table>`、表单组件`<form>`、输入框组件`<input>`、下拉框组件`<select>`等。

2. 数据获取

使用jQuery的ajax方法获取后端提供的部门信息数据，可以使用GET请求。

$.ajax({
    url: "获取数据接口的URL",
    type: "GET",
    dataType: "json",
    success: function(data) {
        // 数据获取成功后的处理逻辑
    },
    error: function(xhr, status, error) {
        // 数据获取失败后的处理逻辑
    }
});

3. 数据展示

将获取到的部门信息数据展示到页面上的表格中。可以使用jQuery的DOM操作方法动态生成表格行和表格单元格。

$.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);
    tr.append(td1, td2, td3);
    $("#table-body").append(tr);
});

在表格中添加“编辑”按钮，在点击按钮时触发修改部门信息的操作。

var editBtn = $("<button></button>").addClass("btn btn-primary").text("编辑");
editBtn.click(function() {
    // 点击编辑按钮后的处理逻辑
});
var td4 = $("<td></td>").append(editBtn);
tr.append(td1, td2, td3, td4);

4. 表单填写

在点击“编辑”按钮后，弹出一个模态框，展示当前部门的信息，并提供一个表单供用户修改信息。可以使用Bootstrap提供的模态框组件`<div class="modal"></div>`，并将表单放在模态框中。

var modal = $("<div></div>").addClass("modal fade").attr("tabindex", "-1").attr("role", "dialog");
var modalDialog = $("<div></div>").addClass("modal-dialog").attr("role", "document");
var modalContent = $("<div></div>").addClass("modal-content");
var modalHeader = $("<div></div>").addClass("modal-header").append($("<h5></h5>").addClass("modal-title").text("编辑部门信息"));
var modalBody = $("<div></div>").addClass("modal-body");
var modalFooter = $("<div></div>").addClass("modal-footer");
var saveBtn = $("<button></button>").addClass("btn btn-primary").text("保存");
var cancelBtn = $("<button></button>").addClass("btn btn-secondary").text("取消");
modalFooter.append(saveBtn, cancelBtn);
modalContent.append(modalHeader, modalBody, modalFooter);
modalDialog.append(modalContent);
modal.append(modalDialog);
$("body").append(modal);

在模态框的表单中展示当前部门的信息，可以使用jQuery的val方法将值填充到输入框中。

$("#department-id").val(item.department_id);
$("#department-name").val(item.department_name);
$("#manager").val(item.manager);

5. 数据提交

在用户修改部门信息后，点击“保存”按钮，将修改后的信息提交到后端保存。可以使用jQuery的ajax方法发起POST请求。需要注意的是，需要将表单中的数据序列化为JSON格式发送到后端。

saveBtn.click(function() {
    var data = {
        department_id: $("#department-id").val(),
        department_name: $("#department-name").val(),
        manager: $("#manager").val()
    };
    $.ajax({
        url: "提交数据接口的URL",
        type: "POST",
        dataType: "json",
        data: JSON.stringify(data),
        success: function(data) {
            // 数据提交成功后的处理逻辑
            modal.modal("hide");
        },
        error: function(xhr, status, error) {
            // 数据提交失败后的处理逻辑
        }
    });
});

这样，就完成了部门管理的修改信息功能的实现。当然，具体的代码还需要根据你的具体需求进行编写和调试。