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>\n' +
                '    <td>' + (i + 1) + '</td>\n' +
                '    <td><input type="checkbox"></td>\n' +
                '    <td >' + (e.name) + '</td>\n' +
                '    <td>\n' +
                '        <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>\n' +
                '        <button type="button" class="btn btn-primary btn-xs" onclick="showUpdateDataModal('+JSON.stringify(e).replace(/"/g, '&quot;')+')" ><i class=" glyphicon glyphicon-pencil"></i></button>\n' +
                '        <button type="button" class="btn btn-danger  btn-xs" onclick="deleteData('+e.id+')"><i class=" glyphicon glyphicon-remove"></i></button>\n' +
                '    </td>\n' +
                '</tr>'
        })

點擊：showUpdateDataModal傳遞json 對象

 

 

 

 

js代碼：

/*打開修改模態框*/
   function showUpdateDataModal(a){
        console.log(a)
       //給模態框賦值回顯
       $("#updateInput").val(a.name)
       //打開模態框
       $("#updateModal").modal({
           show:true,
           keyboard:true,
           backdrop:true
       })

   }

頁面效果