前言
bootstrap-table勾選需要修改的表格內容，點修改按鈕
彈出模態框修改表格數據后ajax提交請求
模態框的html內容
整個body內容如下,模態框設置id屬性id="myModal"
修改按鈕的id屬性id="btn_edit"
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/
<body>
<div class="container">
<h1>bootstrapTable實例</h1>
<hr/>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除
</button>
</div>
{# //點編輯按鈕，彈出模態框#}
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal">
<div class="modal-dialog modal-lg" 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">×</span></button>
<h4 class="modal-title" id="myModalLabel">編輯老師信息</h4>
</div>
<div class="modal-body">
<form action="" class="form-horizontal" id="model-form">
<div class="form-group">
<div class="col-sm-9">
<input type="hidden" name="id" class="form-control" id="modal_id" >
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-9">
<input type="text" name="name" class="form-control" id="modal_name">
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">年齡</label>
<div class="col-sm-9">
<input type="text" name="age" class="form-control" id="modal_age">
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label" >電話</label>
<div class="col-sm-9">
<input type="text" name="tel" class="form-control" id="modal_tel">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="sava-edit-btn">保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<table id="table" class="table table-striped" data-toolbar="#toolbar"></table>
</div>
</body>
點編輯彈出模態框
table表格處理
<script>
var url = '/teacher/info';
var columns = [
{
checkbox: true,
visible: true //是否顯示復選框
},
{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年齡',
sortable: true
},
{
field: 'tel',
title: '電話'
},
{
field:'ID',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter
}
];
$("#table").bootstrapTable({
toolbar: '#toolbar', //自定義工具按鈕
url: url, //請求后台的URL（*）
method: 'get', //請求方式（*）
cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 20, 50, 100, 'All'], //可供選擇的每頁的行數（*）
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber: 1, //初始化加載第一頁，默認第一頁
search: true, //是否顯示表格搜索
{# singleSelect: true,#}
clickToSelect: true,
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數
//height: 500, //行高，如果沒有設置height屬性，表格自動根據記錄條數決定表格高度
showToggle: true, //是否顯示詳細視圖和列表視圖的切換按鈕
columns: columns, //列參數
//detailView: true, //是否顯示父子表
//得到查詢的參數，會在url后面拼接，如：?rows=5&page=2&sortOrder=asc&search_kw=&_=1564105760651
queryParams: function (params) {
//這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
var temp = {
page: (params.offset / params.limit) + 1, //頁碼, //頁碼
size: params.limit, //頁面大小
//查詢框中的參數傳遞給后台
//search_kw: $('#search-keyword').val(), // 請求時向服務端傳遞的參數
};
return temp;
}
});
//操作欄的格式化
function actionFormatter(value, row, index) {
var id = value;
var result = "";
result += '<a href="javascript:;" class="btn btn-xs btn-success" style="margin:5px" onclick="EditViewById(\'undefined\', view=\'view\')" title="查看">';
result += '<span class="glyphicon glyphicon-search"></span></a>';
result += '<a href="javascript:;" class="btn btn-xs btn-info" style="margin:5px" onclick="EditViewById(\'undefined\')" title="編輯">';
result += '<span class="glyphicon glyphicon-pencil"></span></a>';
result += '<a href="javascript:;" class="btn btn-xs btn-danger" style="margin:5px" onclick="DeleteByIds(\'undefined\')" title="刪除">';
result += '<span class="glyphicon glyphicon-remove"></span></a>';
return result;
}
</script>
js操作模態框代碼如下
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/
var $editbtn = $("#btn_edit");
$(function () {
$editbtn.click(function () {
var rows = $("#table").bootstrapTable('getSelections');
alert(JSON.stringify(rows));
if (rows.length == 2 || rows.length == 0 ) {
alert("請選擇單個數據編輯修改!");
}
else {
$("#modal_id").val(rows[0].id);
$("#modal_name").val(rows[0].name);
$("#modal_age").val(rows[0].age);
$("#modal_tel").val(rows[0].tel);
$("#myModal").modal();
}
});
});
獲取勾選表格的內容rows = $("#table").bootstrapTable('getSelections');
勾選一項后用alert彈出，看得到的選項數據：[{"0":true,"id":1,"name":"上海悠悠老師","age":26,"tel":"12313231","is_delete":"0"}]
通過判斷list長度，修改只能單選，調用$("#myModal").modal()方法彈出模態框，效果如下
保存按鈕
模態框上有2個button，保存和取消
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="sava-edit-btn">保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
定義保存按鈕，發post請求，接口地址:/teacher/info
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/
<script>
$("#sava-edit-btn").click(function(){
$.ajax({
cache: false,
type: "POST", //方法類型
dataType: "json", //預期服務器返回的數據類型
url: "/teacher/info", //url
data: $("#model-form").serialize(),
success: function (data) {
console.log(data);//打印服務端返回的數據(調試用)
if (data.msg == "success") {
{#關閉模態框並清除框內數據，否則下次打開還是上次的數據#}
$('#myModal').modal('hide');
{# 判斷確實正確入庫之后提示#}
console.log('提交數據成功');
{#刷新表格數據#}
$("#table").bootstrapTable('refresh');
}
},
error: function () {
alert('提交失敗');
}
});
});
</script>
提交成功調用$("#table").bootstrapTable('refresh');方法，頁面自動刷新
django視圖
ajax提交數據是異步請求，可以看到頭部請求參數：X-Requested-With：XMLHttpRequest
在視圖函數中通過request.is_ajax()判斷是不是ajax提交過來的請求
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/
class TeahcherForm(forms.ModelForm):
class Meta:
model = Teacher
fields = "__all__"
def teacherInfo(request):
"""
查詢結果必須是json格式:{"total": 2,"rows": [{},{}]
"""
if request.method == "GET":
# search_kw = request.GET.get('search_kw', None)
# 獲取分頁參數用於查詢對應頁面數據，page為第幾頁，size為每頁數據條數
page_num = request.GET.get('page', 1)
size = request.GET.get('size', 10)
# 查詢全部
teachers = Teacher.objects.all()
# 使用分頁器返回查詢的頁數和size
paginator = Paginator(teachers, per_page=size)
page_object = paginator.page(page_num)
# 總數
total = teachers.count()
# 查詢list of dict
rows = [model_to_dict(i) for i in page_object.object_list]
return JsonResponse({'total': total, 'rows': rows})
if request.method == "POST":
if request.is_ajax():
user_obj = Teacher.objects.filter(id=request.POST.get("id")).first()
if not user_obj:
return JsonResponse({"code": 1111, "msg": "id not found"})
form_obj = TeahcherForm(request.POST,instance=user_obj) # 指定哪個對象修改
if form_obj.is_valid():
form_obj.save()
return JsonResponse({"code": 0, "msg": "success"})
else:
# 全局鈎子自定義錯誤提示獲取
# print(form_obj.errors.get('__all__'))
error_msg = form_obj.errors.get('__all__')
return JsonResponse({"code": 0, "msg": error_msg})
這樣整個流程就完整了，細節上關於異常數據的問題還得繼續優化。