django 实战(15): 用户分组1(共用的模板文件）

在第13节我们进行了用户组管理。创建了一系列的用户组。下面就进行分组

1 共用的模板文件

给用户分组、给用户赋予权限、给用户组赋予权限、给url赋予权限（将在自动生成菜单时讲解）在界面上基本一致。只不过是根据不用的视图名称调用不同的模型而已。为此我们模板的界面是分三列。

1. 第一列用来显示主页面（对于分组，显示的Group；对于用户权限；显示的是User模型；对于用户组权限，显示的是Group；对于url权限；显示的是URL的别名）
2. 第二列用来显示组内的用户，只有选择第一列的一个组员时，才显示。（对于分组，显示的组内用户；对于用户权限；显示的是用户已有的权限；对于用户组权限，显示的是用户组已有的权限；；对于url权限；显示的是URL已有的权限）
3. 第三列用来显示组外的用户，只有选择第一列的一个组员时，才显示。（对于分组，显示的组外用户；对于用户权限；显示的是用户尚未拥有的权限；对于用户组权限，显示的是用户组尚未拥有的权限；；对于url权限；显示的是URL尚未拥有的权限）

每一列都由一个查询组件、分页组件。第一列的查询组件定义每页显示的个数，供第二列、第三列共用。

1. 第一列的查询组件users/templetes/users/module_target_query.html
2. 第一列的分页组件users/templetes/users/module_target_pagebar.html
3. 第二列的查询组件users/templetes/users/module_intarget_query.html
4. 第二列的分页组件users/templetes/users/module_intarget_pagebar.html
5. 第三列的查询组件users/templetes/users/module_outtarget_query.html
6. 第三列的分页组件users/templetes/users/module_outtarget_pagebar.html

除此之外，第二列、第三列共用两个弹出组件

1. 加入弹窗 users/templetes/users/module_target_joinModal.html
2. 移出弹窗 users/templetes/users/module_target_removeModal.html

各模板的详细代码如下：

1.1 users/templetes/users/module_target_query.html

<!-- module_target_query.html  在应用users目录下的模板目录templates中的users子目录中

  内  容：以<table>展示查询和模糊查询的结果。

         在<table>最后一列为操作列。设置<checkbox>,一次只能选择一行。

  涉及的变量：

    {{result}}: 含有多条查询结果。

      每一行的key和数据表中的字段名相同。若{{var}}是{{result}}的一行数据，

      那么各列数据分别为：{{var.id}}、{{var.name}}

    {{view_name}}: 视图函数名称, 根据不同的视图函数，显示不同的内容

-->

<table id='table' class="table table-striped">

  <thead>

    <tr>

      <th><h4>ID</h4></th>

      <th><h4>名称</h4></th>

      <th><h4>选择</h4></th>

     </tr>

  </thead>

  <tbody>

    {% for var in result %}

      <tr>

        <td class="id">       <h5>{{var.id}}</h5></td>

        {% if view_name == 'grouping' %}

          <td>                  <h5>{{var.name}}</h5></td>

        {% endif %}

        {% if view_name == 'groupPermission' %}

          <td>                  <h5>{{var.name}}</h5></td>

        {% endif %}

        {% if view_name == 'userPermission' %}

          <td>                  <h5>{{var.username}}</h5></td>

        {% endif %}

        <td><input class="checked" type="checkbox"></td>

      </tr>

    {% endfor %}

  </tbody>

</table>

1.2 users/templetes/users/module_target_pagebar.html

<!-- module_target_pagebar.html 在应用目录users下的模板目录templates中的users子目录中

  因为一个主页面有三列，每一列都有各自的展示组件、分页器

  所以分页器简化了，只保留了总数、页码、上页、下页、第x页、每页记录数。

  其中每页记录数主页面的其他列有效，其他分页器

    module_intarget_pagebar.html 不设置每页记录数

    module_outtarget_pagebar.html不设置每页记录数

  内  容：在该块以行、列的形式设置分页栏，使用了bootstrap4的分页器组件。

  涉及的变量：

      视图函数名称:{{view_name}} 根据不同的视图函数，指向不同的url

      目标id:{{target_id}}                          用于在路由中传值    

      查询集记录总数count:{{count}}    在分页器中显示

      每页记录数：{{per_page}}         在分页器中显示，也用于在路由中传值

      总页数：{{num_pages}},          在分页器中显示

      当前页面数对应的结果：{{result}}    

      当前页面号：{{current_page}}     在分页器中显示，也用于在路由中传值

      当前页面号：{{current_page_in}}                 用于在路由中传值

      当前页面号：{{current_page_out}}                用于在路由中传值

  逻  辑：

    提供设置每页记录数per_page的输入框，监听该框变化，若有变化，按变化后的值重新分页。

    提供到指定页数current_page的输入框，监听该框变化，若有变化，则跳转到变化后的新页面。

    监听分页器内上页、下页的变化，跳转到相应的页面。

-->

<div class="row" id="page_bar">

  <div class="col-4">

    <span>

      总数:{{ count }}

    </span>

    <span>

      页码:{{ current_page }}/{{num_pages}}

    </span>

  </div>

  <!-- bootstrap4的分页组件-->

  <div class="col-2" >

    <ul class="pagination pagination-sm">

      {% if result.has_previous %}

        {% if view_name == 'grouping' %}

          <li class="page-item"><a class="page-link" href={% url "grouping-url" %}{{per_page}}/{{ result.previous_page_number }}/{{ current_page_in }}/{{ current_page_out}}/{{target_id}}/ id="previousPage">《</a></li>

        {% endif %}

        {% if view_name == 'groupPermission' %}

          <li class="page-item"><a class="page-link" href={% url "groupPermission-url" %}{{per_page}}/{{ result.previous_page_number }}/{{ current_page_in }}/{{ current_page_out}}/{{target_id}}/ id="previousPage">《</a></li>

        {% endif %}

        {% if view_name == 'userPermission' %}

          <li class="page-item"><a class="page-link" href={% url "userPermission-url" %}{{per_page}}/{{ result.previous_page_number }}/{{ current_page_in }}/{{ current_page_out}}/{{target_id}}/ id="previousPage">《</a></li>

        {% endif %}

      {% endif %}

      <!--此处是判断是否有后一页 -->

      {% if result.has_next %}

        {% if view_name == 'grouping' %}

          <li class="page-item"><a class="page-link" href={% url "grouping-url" %}{{per_page}}/{{ result.next_page_number }}/{{ current_page_in }}/{{ current_page_out }}/{{target_id}}/ id="nextPage">》</a></li>

        {% endif %}

        {% if view_name == 'groupPermission' %}

          <li class="page-item"><a class="page-link" href={% url "groupPermission-url" %}{{per_page}}/{{ result.next_page_number }}/{{ current_page_in }}/{{ current_page_out }}/{{target_id}}/ id="nextPage">》</a></li>

        {% endif %}

        {% if view_name == 'userPermission' %}

          <li class="page-item"><a class="page-link" href={% url "userPermission-url" %}{{per_page}}/{{ result.next_page_number }}/{{ current_page_in }}/{{ current_page_out }}/{{target_id}}/ id="nextPage">》</a></li>

        {% endif %}

      {% endif %}  

    </ul>

  </div>

  <div class="col-6">

    <form class="form-inline">

      <div class="form-group">

        <label for="current_page">第</label>

        <input type="number" class="form-control"  min='1' size="3" onchange="current_page_URL(this.value)" id="current_page">页

        <!--js修改input框的value、max属性；监听变化，调用函数 -->

        <script type="text/javascript">

          //修改属性

          var box=document.getElementById("current_page");

          box.setAttribute('value',"{{current_page}}");  

          box.setAttribute('max',"{{num_pages}}");

          //input输入框onchange属性调用的函数

          function current_page_URL(value){

            var valueOld = document.getElementById("current_page").getAttribute('value');

            if (value != valueOld) {

              //获取当前路径

              //格式应该为：http://127.0.0.1:8000/users/{{view_name}}/{{current_page}}/{{current_page_in}}/{{current_page_out}}/{{target_id}}/

              var currert_url = window.location.href

              var list= currert_url.split('//')

              var root_path = list[0]+'//'+list[1].split('/')[0]+'/'+list[1].split('/')[1]+'/'

              var url=''

              if('{{view_name}}'=='grouping'){

                url = root_path+"grouping/{{per_page}}/"+value+"/"+"{{current_page_in}}/"+"{{current_page_out}}/{{target_id}}/"

              }

              if('{{view_name}}'=='groupPermission'){

                url = root_path+"groupPermission/{{per_page}}/"+value+"/"+"{{current_page_in}}/"+"{{current_page_out}}/{{target_id}}/"

              }

              if('{{view_name}}'=='userPermission'){

                url = root_path+"userPermission/{{per_page}}/"+value+"/"+"{{current_page_in}}/"+"{{current_page_out}}/{{target_id}}/"

              }

              window.location.href=url

              console.log(url)

            }

          }

        </script>&emsp;

      </div>

      <div class="form-group">

        <label for="per_page">每页</label>

        <input type="number" class="form-control" size="3" min='2' max='10' onchange="per_page_URL(this.value)" id="per_page">数

        <script type="text/javascript">

          //修改属性

          var box=document.getElementById("per_page");

          box.setAttribute('value',"{{per_page}}");  

          //input输入框onchange属性调用的函数

          function per_page_URL(value){

            var valueOld = document.getElementById("per_page").getAttribute('value');

            if (value != valueOld) {

              //获取当前路径

              格式应该为：http://127.0.0.1:8000/users/{{view_name}}/{{current_page}}/{{current_page_in}}/{{current_page_out}}/{{target_id}}/

              var currert_url = window.location.href

              var list= currert_url.split('//')

              var root_path = list[0]+'//'+list[1].split('/')[0]+'/'+list[1].split('/')[1]+'/'

              var url =''

              if('{{view_name}}'=='grouping'){  //如果视图函数名是grouping

                url = root_path+"grouping/"+value+"/1/1/1/{{target_id}}/"

              }

              if('{{view_name}}'=='groupPermission'){ //如果视图函数名是groupPermission

                url = root_path+"groupPermission/"+value+"/1/1/1/{{target_id}}/"

              }

              if('{{view_name}}'=='userPermission'){ //如果视图函数名是userPermission

                url = root_path+"userPermission/"+value+"/1/1/1/{{target_id}}/"

              }

              window.location.href=url

            }

          }

        </script>

      </div>

    </form>

  </div>

</div>

1.3 users/templetes/users/module_intarget_query.html

<!-- module_intarget_query.html  在应用users目录下的模板目录templates中的users子目录中

  内  容：以<table>展示分页查询的结果。

         在<table>第一列设置复选框，用于同时选择多条记录，供 批量移除 用。

         在<table>最后一列为操作列，供单条 移除 用

  涉及的变量：

    {{result_in}}: 含有多条查询结果。

      每一行的key和数据表中的字段名相同。若{{var}}是{{result}}的一行数据，

      那么各列数据分别为：{{var.id}}、{{var.name}}

    {{view_name}}: 视图函数名。根据不同的视图内容展示不同的内容

-->

<table id='table_in' class="table table-striped" >

  <thead>

    <tr>

      <td><input id="allRemoveChecked" type="checkbox"></td>

      <th><h4>ID</h4></th>

      <th><h4>名称</h4></th>

      <th><h4>选择</h4></th>

    </tr>

  </thead>

  <tbody>

    {% for var in result_in %}

      <tr>

        <td><input class="checkedRemove" type="checkbox"></td>

        <td class="id">       <h5>{{var.id}}</h5></td>

        {% if view_name == 'grouping' %}

          <td>                  <h5>{{var.username}}</h5></td>

        {% endif %}

        {% if view_name == 'groupPermission' %}

          <td>                  <h5>{{var.codename}}</h5></td>

        {% endif %}

        {% if view_name == 'userPermission' %}

          <td>                  <h5>{{var.codename}}</h5></td>

        {% endif %}

        <td class="edit">

          <!--移出按钮 启用id为module_target_removeModal的弹窗-->

          <button type="button" class="remove" data-toggle="modal" data-target="#module_target_removeModal" disabled="disabled">

            移出

          </button>

        </td>

      </tr>

    {% endfor %}

  </tbody>

  <!-- 批量移出按钮 启用id为module_target_removeModal的弹窗-->

  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#module_target_removeModal" disabled="disabled" id="removeMore">

    移出

  </button>

</table>

1.4 users/templetes/users/module_intarget_pagebar.html

<!-- module_intarget_pagebar.html 在应用目录users下的模板目录templates中的users子目录中

  因为一个主页面有三列，每一列都有各自的展示组件、分页器

  所以分页器简化了，只保留了总数、页码、上页、下页、第x页、每页记录数。

  其中每页记录数主页面的其他列有效，其他分页器

    module_intarget_pagebar.html 不设置每页记录数

    module_outtarget_pagebar.html不设置每页记录数

  内  容：在该块以行、列的形式设置分页栏，使用了bootstrap4的分页器组件。

  涉及的变量：

      视图函数名称:{{view_name}} 根据不同的视图函数，指向不同的url

      目标id:{{target_id}}                          用于在路由中传值    

      查询集记录总数:{{count_in}}    在分页器中显示

      每页记录数：{{per_page}} 与module_target_pagebar.html一致 用于在路由中传值

      总页数：{{num_pages_in}},        在分页器中显示

      当前页面数对应的结果：{{result_in}}    

      当前页面号：{{current_page}}                  用于在路由中传值

      当前页面号：{{current_page_in}} 在分页器中显示， 用于在路由中传值

      当前页面号：{{current_page_out}}              用于在路由中传值

  逻  辑：

    提供到指定页数current_page_in的输入框，监听该框变化，若有变化，则跳转到变化后的新页面。

    监听分页器内上页、下页的变化，跳转到相应的页面。

-->

<div class="row" id="page_bar">

  <div class="col-4">

    <span>

      总数:{{ count_in }}

    </span>

    <span>

      页码:{{ current_page_in }}/{{num_pages_in}}

    </span>

  </div>

  <!-- bootstrap4的分页组件-->

  <div class="col-5" >

    <ul class="pagination pagination-sm">

       <!--此处是判断是否有前一页 -->

      {% if result_in.has_previous %}

        {% if view_name == 'grouping' %}

          <li class="page-item"><a class="page-link" href={% url "grouping-url" %}{{per_page}}/{{current_page}}/{{result_in.previous_page_number}}/{{current_page_out}}/{{target_id}}/ id="previousPage">《</a></li>

        {% endif %}

        {% if view_name == 'groupPermission' %}

          <li class="page-item"><a class="page-link" href={% url "groupPermission-url" %}{{per_page}}/{{current_page}}/{{result_in.previous_page_number}}/{{current_page_out}}/{{target_id}}/ id="previousPage">《</a></li>

        {% endif %}

        {% if view_name == 'userPermission' %}

          <li class="page-item"><a class="page-link" href={% url "userPermission-url" %}{{per_page}}/{{current_page}}/{{result_in.previous_page_number}}/{{current_page_out}}/{{target_id}}/ id="previousPage">《</a></li>

        {% endif %}

      {% endif %}

      <!--此处是判断是否有后一页 -->

      {% if result_in.has_next %}

        {% if view_name == 'grouping' %}

          <li class="page-item"><a class="page-link" href={% url "grouping-url" %}{{per_page}}/{{current_page}}/{{ result_in.next_page_number }}/{{current_page_out}}/{{target_id}}/ id="nextPage">》</a></li>

        {% endif %}

        {% if view_name == 'groupPermission' %}

          <li class="page-item"><a class="page-link" href={% url "groupPermission-url" %}{{per_page}}/{{current_page}}/{{ result_in.next_page_number }}/{{current_page_out}}/{{target_id}}/ id="nextPage">》</a></li>

        {% endif %}

        {% if view_name == 'userPermission' %}

          <li class="page-item"><a class="page-link" href={% url "userPermission-url" %}{{per_page}}/{{current_page}}/{{ result_in.next_page_number }}/{{current_page_out}}/{{target_id}}/ id="nextPage">》</a></li>

        {% endif %}

      {% endif %}

    </ul>

  </div>

  <div class="col-3 ">

    <form class="form-inline">

      <div class="form-group">

        <label for="current_page_in">第</label>

        <input type="number" class="form-control"  min='1' size="3" onchange="current_page_in_URL(this.value)" id="current_page_in">页

        <!--js修改input框的value、max属性；监听变化，调用函数 -->

        <script type="text/javascript">

          //修改属性

          var box=document.getElementById("current_page_in");

          box.setAttribute('value',"{{current_page_in}}");  

          box.setAttribute('max',"{{num_pages_in}}");

          //input输入框onchange属性调用的函数

          function current_page_in_URL(value){

            var valueOld = document.getElementById("current_page_in").getAttribute('value');

            if (value != valueOld) {

              //获取当前路径

              //格式应该为：http://127.0.0.1:8000/users/{{view_name}}/{{current_page}}/{{current_page_in}}/{{current_page_out}}/{{target_id}}/

              var currert_url = window.location.href

              var list= currert_url.split('//')

              var root_path = list[0]+'//'+list[1].split('/')[0]+'/'+list[1].split('/')[1]+'/'

              var url =''

              if('{{view_name}}'=='grouping'){

                url = root_path+"grouping/{{per_page}}/{{current_page}}/"+value+"/{{current_page_out}}/{{target_id}}/"

              }

              if('{{view_name}}'=='groupPermission'){

                url = root_path+"groupPermission/{{per_page}}/{{current_page}}/"+value+"/{{current_page_out}}/{{target_id}}/"

              }

              if('{{view_name}}'=='userPermission'){

                url = root_path+"userPermission/{{per_page}}/{{current_page}}/"+value+"/{{current_page_out}}/{{target_id}}/"

              }

              window.location.href=url

            }

          }

        </script>&emsp;

      </div>

    </form>

  </div>

</div>

1.5 users/templetes/users/module_outtarget_query.html

<!-- module_outtarget_query.html  在应用users目录下的模板目录templates中的users子目录中

  内  容：以<table>展示分页查询的结果。

         在<table>第一列设置复选框，用于同时选择多条记录，供 批量加入 用。

         在<table>最后一列为操作列，供单条 加入 用

  涉及的变量：

    {{result_out}}: 含有多条查询结果。

      每一行的key和数据表中的字段名相同。若{{var}}是{{result}}的一行数据，

      那么各列数据分别为：{{var.id}}、{{var.name}}

    {{view_name}}: 视图函数名。根据不同的视图内容展示不同的内容

-->

<table id='table_out' class="table table-striped" >

  <thead>

    <tr>

      <td><input id="allJoinChecked" type="checkbox"></td>

      <th><h4>ID</h4></th>

      <th><h4>名称</h4></th>

      <th><h4>操作</h4></th>

    </tr>

  </thead>

  <tbody>

    {% for var in result_out %}

      <tr>

        <td><input class="checkedJoin" type="checkbox"></td>

        <td class="id_join">       <h5>{{var.id}}</h5></td>

        {% if view_name == 'grouping' %}

          <td>                  <h5>{{var.username}}</h5></td>

        {% endif %}

        {% if view_name == 'groupPermission' %}

          <td>                  <h5>{{var.codename}}</h5></td>

        {% endif %}

        {% if view_name == 'userPermission' %}

          <td>                  <h5>{{var.codename}}</h5></td>

        {% endif %}

        <td class="edit">

          <!--加入按钮 启用id为module_target_joinModal的弹窗-->

          <button type="button" class="join" data-toggle="modal" data-target="#module_target_joinModal" disabled="disabled">

            加入

          </button>

        </td>

      </tr>

    {% endfor %}

  </tbody>

  <!-- 批量加入按钮 启用id为module_target_joinModal的弹窗-->

  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#module_target_joinModal" disabled="disabled" id="joinMore">

    加入

  </button>

</table>

1.6 users/templetes/users/module_outtarget_pagebar.html

<!-- module_outtarget_pagebar.html 在应用目录users下的模板目录templates中的users子目录中

  因为一个主页面有三列，每一列都有各自的展示组件、分页器

  所以分页器简化了，只保留了总数、页码、上页、下页、第x页、每页记录数。

  其中每页记录数主页面的其他列有效，其他分页器

    module_intarget_pagebar.html 不设置每页记录数

    module_outtarget_pagebar.html不设置每页记录数

  内  容：在该块以行、列的形式设置分页栏，使用了bootstrap4的分页器组件。

  涉及的变量：

      视图函数名称:{{view_name}} 根据不同的视图函数，指向不同的url

      目标id:{{target_id}}                          用于在路由中传值    

      查询集记录总数:{{count_out}}    在分页器中显示

      每页记录数：{{per_page}} 与module_target_pagebar.html一致 用于在路由中传值

      总页数：{{num_pages_out}},        在分页器中显示

      当前页面数对应的结果：{{result_out}}    

      当前页面号：{{current_page}}                  用于在路由中传值

      当前页面号：{{current_page_in}}               用于在路由中传值

      当前页面号：{{current_page_out}} 在分页器中显示，用于在路由中传值

  逻  辑：

    提供到指定页数current_page_out的输入框，监听该框变化，若有变化，则跳转到变化后的新页面。

    监听分页器内上页、下页的变化，跳转到相应的页面。

-->

<div class="row" id="page_bar">

  <div class="col-4">

    <span>

      总数:{{ count_out }}

    </span>

    <span>

      页码:{{ current_page_out }}/{{num_pages_out}}

    </span>

  </div>

  <!-- bootstrap4的分页组件-->

  <div class="col-5" >

    <ul class="pagination pagination-sm">

       <!--此处是判断是否有前一页 -->

      {% if result_out.has_previous %}

        {% if view_name == 'grouping' %}

          <li class="page-item"><a class="page-link" href={% url "grouping-url" %}{{per_page}}/{{current_page}}/{{current_page_in}}/{{result_out.previous_page_number}}/{{target_id}}/ id="previousPage_out">《</a></li>

        {% endif %}

        {% if view_name == 'groupPermission' %}

          <li class="page-item"><a class="page-link" href={% url "groupPermission-url" %}{{per_page}}/{{current_page}}/{{current_page_in}}/{{result_out.previous_page_number}}/{{target_id}}/ id="previousPage_out">《</a></li>

        {% endif %}

        {% if view_name == 'userPermission' %}

          <li class="page-item"><a class="page-link" href={% url "userPermission-url" %}{{per_page}}/{{current_page}}/{{current_page_in}}/{{result_out.previous_page_number}}/{{target_id}}/ id="previousPage_out">《</a></li>

        {% endif %}

      {% endif %}

      <!--此处是判断是否有后一页 -->

      {% if result_out.has_next %}

        {% if view_name == 'grouping' %}

          <li class="page-item"><a class="page-link" href={% url "grouping-url" %}{{per_page}}/{{current_page}}/{{current_page_in}}/{{ result_out.next_page_number }}/{{target_id}}/ id="nextPage_out">》</a></li>

        {% endif %}

        {% if view_name == 'groupPermission' %}

          <li class="page-item"><a class="page-link" href={% url "groupPermission-url" %}{{per_page}}/{{current_page}}/{{current_page_in}}/{{ result_out.next_page_number }}/{{target_id}}/ id="nextPage_out">》</a></li>

        {% endif %}

        {% if view_name == 'userPermission' %}

          <li class="page-item"><a class="page-link" href={% url "userPermission-url" %}{{per_page}}/{{current_page}}/{{current_page_in}}/{{ result_out.next_page_number }}/{{target_id}}/ id="nextPage_out">》</a></li>

        {% endif %}

      {% endif %}

    </ul>

  </div>

  <div class="col-3 ">

    <form class="form-inline">

      <div class="form-group">

        <label for="current_page_out">第</label>

        <input type="number" class="form-control"  min='1' size="3" onchange="current_page_out_URL(this.value)" id="current_page_out">页

        <!--js修改input框的value、max属性；监听变化，调用函数 -->

        <script type="text/javascript">

          //修改属性

          var box=document.getElementById("current_page_out");

          box.setAttribute('value',"{{current_page_out}}");  

          box.setAttribute('max',"{{num_pages_out}}");

          //input输入框onchange属性调用的函数

          function current_page_out_URL(value){

            var valueOld = document.getElementById("current_page_out").getAttribute('value');

            if (value != valueOld) {

              //获取当前路径

              //格式应该为：http://127.0.0.1:8000/users/{{view_name}}/{{current_page}}/{{current_page_in}}/{{current_page_out}}/{{target_id}}/

              var currert_url = window.location.href

              var list= currert_url.split('//')

              var root_path = list[0]+'//'+list[1].split('/')[0]+'/'+list[1].split('/')[1]+'/'

              var url =''

              if('{{view_name}}'=='grouping'){

                url = root_path+"grouping/{{per_page}}/{{current_page}}/{{current_page_in}}/"+value+"/{{target_id}}/"

              }

              if('{{view_name}}'=='groupPermission'){

                url = root_path+"groupPermission/{{per_page}}/{{current_page}}/{{current_page_in}}/"+value+"/{{target_id}}/"

              }

              if('{{view_name}}'=='userPermission'){

                url = root_path+"userPermission/{{per_page}}/{{current_page}}/{{current_page_in}}/"+value+"/{{target_id}}/"

              }

              window.location.href=url

            }

          }

        </script>&emsp;

      </div>

    </form>

  </div>

</div>

1.7 users/templetes/users/module_target_joinModal.html

<!-- 加入模态框 module_target_joinModal.html 在应用目录users下的模板目录templates中的users子目录中-->

<div class="modal fade" id="module_target_joinModal">

  <div class="modal-dialog">

    <div class="modal-content">

      <!-- 模态框头部 -->

      <div class="modal-header">

        <h4 class="modal-title" id="modal_title">加入</h4>

        <button type="button" class="close" data-dismiss="modal">&times;</button>

      </div>

      <!-- 模态框主体 -->

      <div class="modal-body bg-info text-white">

        {% if view_name == 'grouping' %}

          <form action = {% url "joinUser-url" %} method="post" id='delete-form'>

        {% endif %}

        {% if view_name == 'groupPermission' %}

          <form action = {% url "groupJoinPermission-url" %} method="post" id='delete-form'>

        {% endif %}

        {% if view_name == 'userPermission' %}

          <form action = {% url "userJoinPermission-url" %} method="post" id='delete-form'>

        {% endif %}

          {% csrf_token %}

          <!-- 定义一个隐藏的Input值，传入要加入的User、或Permission的id列表-->

          <input type="hidden" id='id_join' name='idList'>

          <!-- 定义一个隐藏的Input值，传入被加入的Group、Uesr的id-->

          <input type="hidden" id='target_id_join' name='target_id'>

          <!-- 定义三个隐藏的Input值 记录当前的页面状态-->

          <input type="hidden" id='current_page_join' name='current_page'>

          <input type="hidden" id='per_page_join' name='per_page'>

          {% if view_name == 'grouping' %}

            <h5>确认要将所选择的用户加入？&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;

          {% endif %}

          {% if view_name == 'groupPermission' %}

            <h5>确认要将所选择的权限加入？&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;

          {% endif %}

          {% if view_name == 'userPermission' %}

            <h5>确认要将所选择的权限加入？&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;

          {% endif %}

          <input type="submit" class="btn btn-danger bg-lg" value="确认"></h5>

        </form>

      </div>

      <!-- 模态框底部 -->

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

      </div>

    </div>

  </div>

</div>

1.8 users/templetes/users/module_target_removeModal.html

<!-- 移出模态框 module_group_removeModal.html 在应用目录users下的模板目录templates中的users子目录中-->

<div class="modal fade" id="module_target_removeModal">

  <div class="modal-dialog">

    <div class="modal-content">

      <!-- 模态框头部 -->

      <div class="modal-header">

        <h4 class="modal-title" id="modal_title">移出</h4>

        <button type="button" class="close" data-dismiss="modal">&times;</button>

      </div>

      <!-- 模态框主体 -->

      <div class="modal-body bg-info text-white">

        {% if view_name == 'grouping' %}

          <form action = {% url "removeUser-url" %} method="post" id='delete-form'>

        {% endif %}

        {% if view_name == 'groupPermission' %}

          <form action = {% url "groupRemovePermission-url" %} method="post" id='delete-form'>

        {% endif %}

        {% if view_name == 'userPermission' %}

          <form action = {% url "userRemovePermission-url" %} method="post" id='delete-form'>

        {% endif %}

          {% csrf_token %}

          <!-- 定义一个隐藏的Input值，传入要加入的User、或Permission的id列表-->

          <input type="hidden" id='id_remove' name='idList'>

          <!-- 定义一个隐藏的Input值，传入被加入的Group、Uesr的id-->

          <input type="hidden" id='target_id_remove' name='target_id'>

          <!-- 定义三个隐藏的Input值 记录当前的页面状态-->

          <input type="hidden" id='current_page_remove' name='current_page'>

          <input type="hidden" id='per_page_remove' name='per_page'>

          {% if view_name == 'grouping' %}

            <h5>确认要将所选择的用户移出？&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;

          {% endif %}

          {% if view_name == 'groupPermission' %}

            <h5>确认要将所选择的权限移出？&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;

          {% endif %}

          {% if view_name == 'userPermission' %}

            <h5>确认要将所选择的权限移出？&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;

          {% endif %}

          <input type="submit" class="btn btn-danger bg-lg" value="确认"></h5>

        </form>

      </div>

      <!-- 模态框底部 -->

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

      </div>

    </div>

  </div>

</div>

1.9 主模板文件AuthDemo/templates/groupingAndPermission.html文件

{% extends 'base.html' %}

<!--要替换的base.html中 titleBody 块-->

{% block titleBody %}

<div class="row">

  <div class = 'col-10'>

    {% if view_name == 'grouping' %}

      <p><h4>分组</h4></p>

    {% endif %}

    {% if view_name == 'userPermission' %}

      <p><h4>用户分配权限</h4></p>

    {% endif %}

    {% if view_name == 'groupPermission' %}

      <p><h4>组分配权限</h4></p>

    {% endif %}

  </div>

  <div class = 'col-2'>

    <div class="container">

      <!-- .rounded-circle 类可以设置椭圆形图片-->

      <img src="/static/images/user_pictures/default.jpg" class="rounded-circle" alt="Cinque Terre" width="60" height="60">

    </div>

  </div>

</div>

{% endblock %}

{% block mainBody %}

<div class='row'>

  <div class="col-4 text-center bg-info">

    <p><h5>Grouping</h5></p>

    {% include 'users/module_target_query.html' %}

    {% include 'users/module_target_pagebar.html' %}

  </div>

  <!--设置两个隐藏的<div>-->

  <div class="col-4 text-center bg-warning" hidden='hidden' id="in_group">

    <p><h5>组内用户</h5></p>

    {% include 'users/module_intarget_query.html' %}

    {% include 'users/module_intarget_pagebar.html' %}

  </div>

  <div class="col-4 text-center bg-info" hidden='hidden' id="out_group">

    <p><h5>组外用户</h5></p>

    {% include 'users/module_outtarget_query.html' %}

    {% include 'users/module_outtarget_pagebar.html' %}

  </div>

  {% include 'users/module_target_joinModal.html' %}

  {% include 'users/module_target_removeModal.html' %}

</div>

<script>

  //1、根据{{target_id}}的值，决定是否显示组内用户、组外用户框

  console.log("后端传过来的target_id = "+"{{target_id}}")

  if("{{target_id}}"!='0'){ // 如果后端传过来的id不为'0',则显示两个<div>

    document.getElementById("in_group").removeAttribute('hidden')

    document.getElementById("out_group").removeAttribute('hidden')

  }

 

  //2、监听module_grouping_query.html中的每行的选择情况

  //2.1 获取所有行的id的元素

  idList = document.getElementsByClassName('id');

  /* 获取所有行复选框的节点的List */

  checkedList = document.getElementsByClassName('checked');

  /*2.2 清空所有行的选择项 */

  for( var i=0;i<checkedList.length;i++){

      checkedList[i].checked=false

  }

  /*2.2 根据后面传过来的{{target_id}} 设置选项*/

  if('{{target_id}}' !='0'){

    for( var i=0;i<checkedList.length;i++){

      if (idList[i].innerText=='{{target_id}}'){

        checkedList[i].checked=true

      }

    }

  }

  //2.3 获取点击行的id

  for (var j = 0; j < checkedList.length; j++) {

    checkedList[j].addEventListener('click', clickHandle);

    function clickHandle(e){

      //2.3.1 通过点击事件获取点击行组的id

      console.log(e.target)

      console.log(e.target.parentElement)

      console.log(e.target.parentElement.parentElement)

      var id = e.target.parentElement.parentElement.children[0].innerText; // 找到点击行的id

      console.log('点击行的 target_id = '+id)

      //2.3.2 判断点击事件导致ckecked是true 还是false,若是flase,id='0'

      beSelected = 0

      for (var i=0;i < checkedList.length; i++){

        if (checkedList[i].checked){

          beSelected = beSelected +1

        }

      }

      if (beSelected ==0){ // 如果是false，则id='0'

        id ='0'

      }

      console.log('选择的 target_id = '+id)

      //2.3.3 将获取的id传入后端(通过路由传值)

      root_path = appRootPath()

      var url = root_path+"{{view_name}}/{{per_page}}/{{current_page}}/{{current_page_in}}/{{current_page_out}}/"+id+"/"

      window.location.href=url

      console.log(url)

    }

  }

  //3、监听module_grouping_ingroup_query.html中的每行的选择情况

  if('{{target_id}}' !='0'){

    /* 获取表头全选框节点 */

    var allRemoveChecked = document.getElementById('allRemoveChecked');

    /* 获取所有行复选框的节点的List */

    var checkedRemoveList = document.getElementsByClassName('checkedRemove');

    /* 获取所有行的选择状态表 */

    var checkedRemoveListStatus = [];

    for( var i=0;i<checkedRemoveList.length;i++){

      checkedRemoveListStatus.splice(i, 1, checkedRemoveList[i].checked)

    }

    /* 获取所有行的 移出 按钮的List */

    var removeBtnList = document.getElementsByClassName('remove');

    var removeMoreBtn = document.getElementById('removeMore');

    allCheckedHandle(allRemoveChecked,checkedRemoveList,checkedRemoveListStatus,[removeBtnList],removeMoreBtn)

    /* 循环监听所有行 选择框 状态 */

    checkedHandle(allRemoveChecked,checkedRemoveList,checkedRemoveListStatus,[removeBtnList],removeMoreBtn)

    //监听每行 移出 按钮的状态

    for (var i = 0; i < removeBtnList.length; i++) {

      removeBtnList[i].addEventListener('click', removeHandle);

      function removeHandle(e){

        console.log(e.target)

        console.log(e.target.parentElement)

        console.log(e.target.parentElement.parentElement)

        var id = e.target.parentElement.parentElement.children[1].innerText; // 找到点击行的id

        console.log('点击行的user_id = '+id)

   

        /* 给module_grouping_removeUserModal.html中隐藏的input框赋值 */

        document.getElementById('id_remove').setAttribute('value',id);

        document.getElementById('target_id_remove').setAttribute('value','{{target_id}}');

        document.getElementById('current_page_remove').setAttribute('value','{{current_page}}');

        document.getElementById('per_page_remove').setAttribute('value','{{per_page}}');

        console.log('removeUser modal id:'+document.getElementById('id_remove').getAttribute('value'));

      }

    }

    /* 监听 批量移出 按钮 */

    document.getElementById('removeMore').addEventListener('click', removeMoreHandle);

    function removeMoreHandle(e){

      /* 根据 所有行选择状态表 checkedListStatus 确定已选择行的所有id

       将已选择行的所有id拼接为一个字符串,中间间隔空格,

       因为输入框的value属性只接受字符串

      */

      var value  =''

      for(var i=0;i<checkedRemoveListStatus.length;i++){

        if(checkedRemoveListStatus[i]){

          value  = value  + checkedRemoveList[i].parentElement.parentElement.children[1].innerText + ' ';

        }

      }

      value  = value.slice(0,value.length-1); /*去掉最后一个空格*/

      /* 给module_grouping_removeUserModal.html中隐藏的input框赋值 */

      document.getElementById('id_remove').setAttribute('value',value)

      document.getElementById('target_id_remove').setAttribute('value','{{target_id}}');

      document.getElementById('current_page_remove').setAttribute('value','{{current_page}}');

      document.getElementById('per_page_remove').setAttribute('value','{{per_page}}');

      console.log('removeUser modal id:'+document.getElementById('id_remove').getAttribute('value'));

    }

  }

  //4、监听module_grouping_outgroup_query.html中的每行的选择情况

  if('{{target_id}}' !='0'){

    /* 获取表头全选框节点 */

    var allJoinChecked = document.getElementById('allJoinChecked');

    /* 获取所有行复选框的节点的List */

    var checkedJoinList = document.getElementsByClassName('checkedJoin');

    /* 获取所有行的选择状态表 */

    var checkedJoinListStatus = [];

    for( var i=0;i<checkedJoinList.length;i++){

      checkedJoinListStatus.splice(i, 1, checkedJoinList[i].checked)

    }

    /* 获取所有行的 移出 按钮的List */

    var joinBtnList = document.getElementsByClassName('join');

    var buttonList =[joinBtnList]

    var jionMoreBtn = document.getElementById('joinMore');

    console.log('jionMoreBtn='+jionMoreBtn)

    allCheckedHandle(allJoinChecked,checkedJoinList,checkedJoinListStatus,buttonList,jionMoreBtn)

    /* 循环监听所有行 选择框 状态 */

    checkedHandle(allJoinChecked,checkedJoinList,checkedJoinListStatus,buttonList,jionMoreBtn)

    //监听每行 加入 按钮的状态

    for (var i = 0; i < joinBtnList.length; i++) {

      joinBtnList[i].addEventListener('click', joinHandle);

      function joinHandle(e){

        console.log(e.target)

        console.log(e.target.parentElement)

        console.log(e.target.parentElement.parentElement)

        var id = e.target.parentElement.parentElement.children[1].innerText; // 找到点击行的id

        console.log('点击行的user_id = '+id)

        /* 给module_grouping_joinUserModal.html中隐藏的input框赋值 */

        document.getElementById('id_join').setAttribute('value',id);

        document.getElementById('target_id_join').setAttribute('value','{{target_id}}');

        document.getElementById('current_page_join').setAttribute('value','{{current_page}}');

        document.getElementById('per_page_join').setAttribute('value','{{per_page}}');

        console.log('joinUser modal id:'+document.getElementById('id_join').getAttribute('value'));

      }

    }

    /* 监听 批量加入 按钮 */

    document.getElementById('joinMore').addEventListener('click', joinMoreHandle);

    function joinMoreHandle(e){

      /* 根据 所有行选择状态表 checkedListStatus 确定已选择行的所有id

       将已选择行的所有id拼接为一个字符串,中间间隔空格,

       因为输入框的value属性只接受字符串

      */

      var value  =''

      for(var i=0;i<checkedJoinListStatus.length;i++){

        if(checkedJoinListStatus[i]){

          value  = value  + checkedJoinList[i].parentElement.parentElement.children[1].innerText + ' ';

        }

      }

      value  = value.slice(0,value.length-1); /*去掉最后一个空格*/

      /* 给module_grouping_joinUserModal.html中隐藏的input框赋值 */

      document.getElementById('id_join').setAttribute('value',value)

      document.getElementById('target_id_join').setAttribute('value','{{target_id}}');

      document.getElementById('current_page_join').setAttribute('value','{{current_page}}');

      document.getElementById('per_page_join').setAttribute('value','{{per_page}}');

      console.log('joinUser modal id:'+document.getElementById('id_join').getAttribute('value'));

    }

  }

</script>

{% endblock %}