bootstrap模态框实现弹出窗口修改表格数据_模态框修改数据

模态框分三层，分别是header、body、footer。在body内写上对应的代码即可

1、模态框的html

<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
    <div class="modal-dialog modal-max" role="document">	<!-- class modal-max 是我自定义调整模态框大小，官方有modal-lg -->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="updateModalLabel">修改个人信息</h4>
            </div>
            <div class="modal-body">
                <form id="personForm" class="form-horizontal fontBig" style="padding:10px 30px">
                 	...
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="personSubmit">确认修改</button>
            </div>
        </div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2、模态框的激活和数据填充

function editZzPerson(person, index){
    //填充数据到修改模态框
    $("#rowIndex").val(index);
    $("#personForm [name='id']").val(person.id);
    $("#personForm [name='idcard']").val(person.idcard);
    $("#personForm [name='name']").val(person.name);
    $("#personForm [name='sex']").val(person.sex);
    // 弹出修改模态框
    $('#updateModal').modal('show')
    // 调整模态框位置，使其垂直居中
    $('.modal').each(function(i) {
        var $clone = $(this).clone().css('display', 'block').appendTo('body');
        var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
        top = top > 50 ? top : 0;
        $clone.remove();
        $(this).find('.modal-content').css("margin-top", top - 50);
    });
    // 暂存未修改时数据
    var dataformInit = $("#personForm").serializeArray();
    jsonTextInit = JSON.stringify({ dataform: dataformInit });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3、模态框关闭事件

$('#updateModal').on('hidden.bs.modal', function () {
    // 清空表单
    $('#personForm')[0].reset();
    $("#personForm [name='id']").val("");
    $("#rowIndex").val("");
});
1
2
3
4
5
6

4、提交时检查是否经过修改

$("#personSubmit").click(function () {
	// 判断是否修改
	var dataform = $("#personForm").serializeArray();
	var jsonText = JSON.stringify({ dataform: dataform });
	if(jsonText == jsonTextInit) {
	   $("#updateModal").modal('hide');
	   return;
	}
	$("#personForm").ajaxSubmit({
	     url: "",
	     type: "POST",
	     dataType: "JSON",
	     success: function (data) {});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

参考文章

jquery判断表单值是否改变
操作栏点击编辑按钮弹出模态框修改数据
bootstrap table 第一弹：实现模态框弹出编辑