标签：删除 python bootstrap ids django result 按钮 true id
前言
在 table 表格每一项后面添加操作按钮：修改/删除
希望实现效果：
1、点表格后面的修改按钮，能修改对应行的数据
2、点表格后面的删除按钮，删除对应的行
操作栏
先定义操作栏按钮
// 作者-上海悠悠 QQ交流群:717225969
// blog地址 https://www.cnblogs.com/yoyoketang/
<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:'operate',
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, //是否显示表格搜索
showSearchButton: true, //搜索确定按钮
{# showSearchClearButton: true, //清空输入框#}
{# singleSelect: true,#}
clickToSelect: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
//height: 500, //行高，如果没有设置height属性，表格自动根据记录条数决定表格高度
classes: "table table-bordered table-striped",
showToggle: true, //是否显示详细视图和列表视图的切换按钮
columns: columns, //列参数
//detailView: true, //是否显示父子表
//得到查询的参数，会在url后面拼接，如：?rows=5&page=2&sortOrder=asc&search_kw=&_=1564105760651
queryParams: function (params) {
// params对象包含：limit, offset, search, sort, order
//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
var temp;
temp = {
page: (params.offset / params.limit) + 1, //页码, //页码
size: params.limit //页面大小
//查询框中的参数传递给后台
//search_kw: $('#search-keyword').val(), // 请求时向服务端传递的参数
};
return temp;
}
});
//操作栏的格式化
function actionFormatter(value, row, index) {
var result = "";
result += '<a href="javascript:;" class="btn btn-xs btn-success" style="margin:5px" onclick="GetViewById(' + index + ')" 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(' + index+')" title="编辑">';
result += '<span class="glyphicon glyphicon-pencil"></span></a>';
result += '<a href="javascript:;" class="btn btn-xs btn-danger" style="margin:5px" onclick="DeleteByIds(' + row.id + ')" title="删除">';
result += '<span class="glyphicon glyphicon-remove"></span></a>';
return result;
}
</script>
操作栏上的标签点击后分别调用
onclick="EditViewById(' + index +')" title="编辑"
onclick="DeleteByIds(' + row.id + ')" title="删除"
其中index参数是行在当前页面的索引，从0开始
row是当前行的数据，row.id是获取当前行的id，调删除接口的时候，只需知道删除的id项就可以
定义编辑EditViewById
<script>
//定义表格操作编辑按钮 title="编辑"
function EditViewById(index){
alert(index);
{# // 调出modal 框#}
var row = $("#table").bootstrapTable('getData')[index];
$("#modal_id").val(row.id);
$("#modal_name").val(row.name);
$("#modal_age").val(row.age);
$("#modal_tel").val(row.tel);
$("#myModal").modal();
}
</script>
实现效果，当点编辑按钮后，会根据当前行获取到索引index。
根据索引从bootstrapTable('getData')中得到对应行的数据。
定义保存按钮，发 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>
定义删除DeleteByIds
当点确定删除按钮的时候，需从模态框里面得到需要删掉的id值，可以在模态框写一个隐藏的input标签，把id值写进去，后面掉确定删除按钮的时候，就可以直接发请求传到服务端
{# //删除按钮模态框#}
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="delModalLabel">操作提示:</h4>
</div>
<div class="modal-body">
<input type="hidden" id="del_ids" name="ids" value="">
<h5 id="delBody">确定要删除选中的数据？</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="deleteIds">确定删除</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
点删除按钮，需要拿到对应行的id值,调出模态框
<script>
//定义表格操作编辑删除 title="删除"
function DeleteByIds(id){
var ids = [];
ids.push(id);
//alert(JSON.stringify(ids));
//把ids的值给到隐藏输入框
$('#del_ids').val(JSON.stringify(ids));
//调出删除模态框
$("#delModal").modal();
}
</script>
删除接口可以和批量删除接口公用同一个，ids传的值写一个arry数组格式[1]
定义保存按钮，发 DELETE 请求，接口地址: /teacher/info（跟批量删除按钮，公用一个删除接口）
// 作者-上海悠悠 QQ交流群:717225969
// blog地址 https://www.cnblogs.com/yoyoketang/
<script>
// 点确定按钮发delete请求
$("#deleteIds").click(function() {
var del_ids = $('#del_ids').val();
$.ajax({
cache: false,
url: "/teacher/info", //url
type: "DELETE", //方法类型
contentType:"application/json",//设置请求参数类型为json字符串
dataType: "json", //预期服务器返回的数据类型
data: JSON.stringify({ids: del_ids}),
success: function (result) {
//隐藏模态框
$("#delModal").modal('hide');
if (result.msg == "success"){
// 此处可以显示一个toastr消息
alert('删除成功！')
}
else {
alert("删除失败")
}
},
error: function () {
$("#delModal").modal('hide');
// 此处可以显示一个toastr消息
alert("删除失败,服务器异常")
}
});
})
</script>
标签：删除,python,bootstrap,ids,django,result,按钮,true,id 来源： https://www.cnblogs.com/yoyoketang/p/15269640.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。