bootstrap 模态框modal 传值问题

• 后台管理的项目常会使用到bootstrap里面的模态框modal，因此编辑的时候就需要将页面上的值传到模态框里面并显示，如：
• html代码：触发模态框

<a href="#updateDeptMd" data-toggle="modal" class="btn btn-success btn-xs" data-orderId="需要传递的值">修改</a>
 

• 模态框

<!--修改部门的模态框-->
<div class="modal" id="updateDeptMd">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">修改部门信息</h3>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="updateDeptFom">
                    <div class="form-group">
                        <label for="updateId" class="control-label col-md-2">Id</label>
                        <div class="col-md-10">
                            <input class="form-control" type="text" id="updateDeptId" name="id" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="updateName" class="control-label col-md-2">部门名称</label>
                        <div class="col-md-10">
                            <input class="form-control" type="text" id="updateDeptName" name="name" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="updateDeptBtn">修改</button>
            </div>
        </div>
    </div>
</div>

 

• js代码如下：

 /*初始化修改部门列表*/
    function updateDpet() {
        // 初始化部门修改信息下拉列表
        $('#updateDeptMd').on('show.bs.modal',function (e) {
            var id = $(e.relatedTarget).data('orderid'); //根据上面a标签中传递的data-orderid取值,这里也可以通过data-id取值
            //var data =  $('#updateDeptMd').data(); 也可以直接取data对象再取值
            console.log(id);
            // 到后台获取部门信息
            $.ajax({
                url:'/dept/queryId',
                type:'POST',
                data:{id:id},
                dataType:'json',
                success:function (data) {
                    console.log(data);
                    /*查询empId*/
                    $('#updateDeptId').val(data.id);
                    $("#updateDeptName").val(data.name);
                },
                error:function () {
                    // alert('出错了');
                }
            });
        });

 

• 主要是通过event.relatedTarget获取触发事件的按钮,然后通过设置的data-orderId或者data-id等获取值。