python在表格中编辑携带Id的写法

最新推荐文章于 2024-10-07 19:39:47 发布

猪猪女536

最新推荐文章于 2024-10-07 19:39:47 发布

阅读量172

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_65322976/article/details/130846288

版权

这是一个使用Django框架构建的网页示例，包含HTML模板、Bootstrap样式和JavaScript脚本。页面展示了带有导航栏的布局，包括部门管理和用户登录/退出功能。用户可以编辑部门信息，表单提交后将与后台的视图进行交互处理。

摘要由CSDN通过智能技术生成

代码完整代码

html文件

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
    <style>
        .navbar {
        border-radius :0
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">中国故事</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">部门管理 <span class="sr-only">(current)</span></a></li>
<!--        <li><a href="#">中国</a></li>-->
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">登录</a></li>
        <li><a href="#">退出</a></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">小小 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">个人资料 </a></li>
            <li><a href="#">我的信息</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">注销</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div>
  <div class="container">
    <div style="margin-bottom:10px">
      <a class="btn btn-success" href="/depart/add">
        <span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>新建部门</a>
    </div>
    <div>
      <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>部门列表</div>
      <!-- Table -->
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>ID</th>
            <th>部门名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
           {% for obj in depart_list %}
          <tr>
            <td>{{obj.id}}</td>
            <td>{{obj.title}}</td>
            <td>
              <a href="/depart/edit/?nid={{obj.id}}" class="btn btn-info  btn-xs">编辑</a>
              <a href="/depart/delete?nid={{obj.id}}" class="btn btn-danger  btn-xs">删除</a>
          </tr>
            {% endfor %}
        </tbody>
      </table>
    </div>
    </div>
  </div>
</div>
</body>
</html>

views.py,文件

编辑的html文件

完整代码

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
    <style>
        .navbar {
        border-radius :0
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">中国故事</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">部门管理 <span class="sr-only">(current)</span></a></li>
<!--        <li><a href="#">中国</a></li>-->
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">登录</a></li>
        <li><a href="#">退出</a></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">小小 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">个人资料 </a></li>
            <li><a href="#">我的信息</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">注销</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                <form method="post" >
                    {% csrf_token %}
<!--                    <h1>{{obj.title}}</h1>-->
                    <div class="form-group">
                        <label>部门名称</label>
              {% for obj in row_obj %}
                        <input type="text" class="form-control" name='title' placeholder="部门名称" value="{{obj.title}}">
                {% endfor %}

                    </div>
                    <button type="submit" class="btn btn-default">保 存</button>
                </form>
            </div>
    </div>
    </div>

  <h1>{{obj.title}}</h1>

</div>
</body>
</html>