<!DOCTYPE html> {% load staticfiles%} <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>显示所有记录信息</title> <link rel="stylesheet" href="{% static 'bootstrap3/css/bootstrap.min.css'%}"> </head> <body> <div class="container"> <h1 class="page-header">Django-Bootstrap</h1> <h2>显示所有记录信息</h2> <form action="/query_one_by_id" method="get" role="form"> <div class="form-inline"> <label class="control-label">用户编号： </label> <input class="form-control" type="text" name="id" placeholder="Enter ID"> <input class="btn btn-default" type="submit" id="query_by_id" value="查询"> <!--<a href="/index.html" class="btn btn-primary" type="button">添加</a>--> <a class="btn btn-primary" type="button" data-toggle="modal" data-target="#add_one_record_modal">添加</a> <a class="btn btn-danger" onclick="GetCkboxValues()">批量删除</a> </div> </form> <br> <table class="table table-bordered form-inline" align="center"> <caption>基于Python下的Django框架，结合Bootstrap 3 实现常见的数据管理操作</caption> <thead> <tr> <th> <div class="checkbox"><label><input type="checkbox" id="check_all" value=""></label></div> </th> <th>用户编号</th> <th>用户姓名</th> <th>用户年龄</th> <th>用户性别</th> <th>常用操作</th> </tr> </thead> <tbody> {% for d in all_students %} <!--显示不同背景--> <tr {% if forloop.counter|divisibleby:"2" %} class="active" {%else%} class="success" {%endif%}> <td><input type="checkbox" name="subBox" value="{{d.id}}"></td> <td>{{d.id}}</td> <td>{{d.name}}</td> <td>{{d.age}}</td> <td>{{d.gender}}</td> <td> <a href="/delete_one_by_id?id={{d.id}}" class="text-danger">删除</a> | <!--<a href="/update_one_by_id?id={{d.id}}">修改</a>--> <!--<a data-target="#update_one_record_modal" data-toggle="modal" class="text-info">更新</a>--> <a href="javascript:void(0)" onclick="get_update_record(this);">更新</a> </td> </tr> {% endfor %} </tbody> </table> <p> {% if all_students.has_previous %} <a href="?page={{all_students.previous_page_number}}">上一页</a> {% endif %} {# all_students.paginator.number_pages 返回总页数 #} 第{{all_students.number}}页 | 共{{all_students.num_pages}}页 {% if all_students.has_next %} <a href="?page={{all_students.next_page_number}}">下一页</a> {% endif %} </p> <!--增加记录对话框--> <div class="modal fade" id="add_one_record_modal" role="dialog" aria-describedby="add_one_record_modal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button" data-dismiss="modal" aria-label="Close">×</button> <h4 class="modal-title">增加一条记录</h4> </div> <div class="modal-body"> <form id="add_one_record_form" action="/add_one" method="post" role="form" data-remote="true"> <input class="form-control" type="text" id="name" placeholder="姓名" name="name"> <input class="form-control" type="number" id="age" placeholder="年龄" name="age"> <input class="form-control" type="text" id="gender" placeholder="性别" name="gender"> </form> </div> <div class="modal-footer"> <button class="btn btn-default" type="button" data-dismiss="modal">关闭</button> <a class="btn btn-primary" id="submit_add_one_record_modal" href="#">保存</a> </div> </div> </div> </div> <!--更新记录对话框--> <div class="modal fade" id="update_one_record_modal" role="dialog" aria-describedby="update_one_record_modal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button" data-dismiss="modal" aria-label="Close">×</button> <h4 class="modal-title">更新一条记录</h4> </div> <div class="modal-body"> <form id="update_one_record_form" action="/update_one_by_id" method="post" role="form" data-remote="true"> <input class="form-control" type="text" id="update_id_input" placeholder="编号" name="id"> <input class="form-control" type="text" id="update_name_input" placeholder="姓名" name="name"> <input class="form-control" type="number" id="update_age_input" placeholder="年龄" name="age"> <input class="form-control" type="text" id="update_gender_input" placeholder="性别" name="gender"> </form> </div> <div class="modal-footer"> <button class="btn btn-default" type="button" data-dismiss="modal">关闭</button> <a class="btn btn-primary" id="submit_update_one_record_modal" href="#">更新</a> </div> </div> </div> </div> </div> <script type="text/javascript" src="{% static 'bootstrap3/js/jquery-2.2.1.min.js' %}"></script> <script type="text/javascript" src="{% static 'bootstrap3/js/bootstrap.min.js' %}"></script> <script> function GetCkboxValues(){ var array = new Array() // 通过数组列表保存所有的用户ID，实现批量删除功能 $("input:checkbox:checked").each(function(){ array.push($(this).val()) }) if(array==""){ // 没有选择任何数据，则弹出提示框 alert("请选择至少一条数据！") } $.ajax({ //ajax实现GET方式动态加载，为啥POST不行？ type: "GET", url: "/delSelect", data: "array="+array, success:function(msg){ //通过模拟点击查询按钮，刷新当前页面 $("#queryById").click() } }); }; // 选择所有复选框 $(function(){ $("#check_all").click(function( $('input [name="subBox"]').attr("checked", this.checked); )); }); // 方法一 // $('#submit_add_one_record_modal').click(function(e){ // $(this).parents('form').submit(); // }); //方法二 // $('#submit_add_one_record_modal').click(function(e){ // $("#submit_add_one_record_form").click(); // $("#add_one_record_form").submit; // }); // 方法3：使用JQuery // $(function(){ // $("#add_one_record_form").on('submit', function(e){ // e.preventDefault(); // $.post('http://127.0.0.1:8000/add_one',$("add_one_record_form").serialize(),function(){}) // }); // }); // $("#add_one_record_modal").on('show.bs.modal', function(e){ // var link = $(e.relatedTarget); // $(this).find('modal-body').load(link.attr('href')) // }); $("#submit_add_one_record_modal").on('click', function(e){ // 提交“添加”模态框中的数据 e.preventDefault(); $("#add_one_record_form").submit(); }); function get_update_record(obj){ //获取要更新的记录信息, *** eq 从1 开始 *** var tr = $(obj).parent().parent().find('td'); $("#update_id_input").val(tr.eq(1).text()) $("#update_name_input").val(tr.eq(2).text()); $("#update_age_input").val(tr.eq(3).text()); $("#update_gender_input").val(tr.eq(4).text()); $("#update_one_record_modal").modal('show'); }; $("#submit_update_one_record_modal").on('click', function(e){ e.preventDefault(); $("#update_one_record_form").submit(); }); </script> </body> </html>
重点代码：
function get_update_record(obj){
//获取要更新的记录信息, *** eq 从1 开始 ***
var tr = $(obj).parent().parent().find('td');
$("#update_id_input").val(tr.eq(1).text())
$("#update_name_input").val(tr.eq(2).text());
$("#update_age_input").val(tr.eq(3).text());
$("#update_gender_input").val(tr.eq(4).text());
$("#update_one_record_modal").modal('show');
};
Bootstrap： 3.3.5
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
