jsp bootstrap 模态框数据回显

模态框：

<%--修改模态框--%>
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <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="myModalLabel">修改角色</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">角色名称</label>
                        <div class="col-sm-10">
                            <input id="updateInput"  class="form-control"  placeholder="请输入角色名称">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updateData()">提交</button>
            </div>
        </div>
    </div>
</div>

点击事件：

$.each(data, function (i, e) {
            /*console.log(i)
            console.log(e)*/
            content +=
                '<tr>
' +
                '    <td>' + (i + 1) + '</td>
' +
                '    <td><input type="checkbox"></td>
' +
                '    <td >' + (e.name) + '</td>
' +
                '    <td>
' +
                '        <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>
' +
                '        <button type="button" class="btn btn-primary btn-xs" onclick="showUpdateDataModal('+JSON.stringify(e).replace(/"/g, '&quot;')+')" ><i class=" glyphicon glyphicon-pencil"></i></button>
' +
                '        <button type="button" class="btn btn-danger  btn-xs" onclick="deleteData('+e.id+')"><i class=" glyphicon glyphicon-remove"></i></button>
' +
                '    </td>
' +
                '</tr>'
        })

点击：showUpdateDataModal传递json 对象

 

js代码：

/*打开修改模态框*/
   function showUpdateDataModal(a){
        console.log(a)
       //给模态框赋值回显
       $("#updateInput").val(a.name)
       //打开模态框
       $("#updateModal").modal({
           show:true,
           keyboard:true,
           backdrop:true
       })

   }

页面效果