bootstraptable自定義編輯
阿新 • • 發佈:2019-01-03
columns:[
{
title: '編輯',
field: 'edit',
align: 'center',
valign: 'middle',
sortable: true,
events:editEvents,
formatter:editFormatter
},
...
]
定義編輯按鈕:
function editFormatter(value,row,index){ return [ '<button class="btn btn-primary" id="edit_btn">編輯</button>' ].join(""); }
點選編輯按鈕開啟的模態框:
<!--編輯節點--> <div class="modal fade" id="editWin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 編輯 </h4> </div> <div class="modal-body"> <div class="form-horizontal"> <div class="form-group"> <label class="col-sm-3 control-label">分類</label> <div class="col-sm-7"> <input type="text" id="category" class="form-control" placeholder="分類" /> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">分類來源</label> <div class="col-sm-7"> <select class="form-control selectpicker" id="categorySource"> <option value="001">111</option> <option value="002">222</option> <option value="003">333</option> </select> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary" id="saveEditBtn">儲存</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal --> </div>
點選編輯開啟模態框和儲存事件:
window.editEvents={ "click #edit_btn":function(e,value,row,index){ $("#category").val('');//開啟模態框前清除之前存在的值 $("#category").val(row.codename); $("#categorySource option:first").prop("selected", 'selected');//預設選中的值為第一個 $("#editWin").modal("show");//開啟模態框 $("#saveEditBtn").unbind('click');//點選儲存前清除之前的點選事件,否則會把之前點選編輯但沒有儲存的行一起儲存 $("#saveEditBtn").click(function(){ var codename=$("#category").val();//獲取分類的值 var targetcode=$("#categorySource").val();//獲取分類來源的值 var targetname=$("#categorySource").find("option:selected").text();//獲取選中值的文字值 $.ajax({ method:"post", url:'update/updateinfo', data:{ codename:codename, id:row.id, targetcode:targetcode, targetname:targetname }, dataType : "jsonp", async:true, success:function (res) { $("#editWin").modal('hide'); //隱藏模態框 $("#table").bootstrapTable('refresh');//儲存成功後重新整理表格 } }); }); } }