VS2019 开发Django（十）------JavaScript与Django的数据交互

导航：VS2019开发Django系列

 

这一篇介绍如何使用BootStrap Table这个组件来绑定渲染数据，

1）先来看一下BootStrap Table是怎么绑定数据的。

• 通过数据属性

  给定data-url="{% url 'test' %}"，插件会自动请求这个地址的数据，然后渲染，这个地址对应的url为前几篇演示JsonResponse的地址：http://localhost:8090/hello/test/，url的绑定规则，可以参考官方文档，这里的test为url指定的name

  data-single-select="true"，设置 true 为允许复选框仅选择一行

  data-click-to-select="true"，设置 true为在单击行时选择复选框或radiobox。

  data-checkbox-header="false"，设置 false为隐藏标题行中的check-all复选框。

  data-field，设置你需要绑定的数据源的字段（key）

  from django.urls import path,include
  from hello import views
  
  #D:\项目\local\DjangoLazyOrders\hello\urls.py
  urlpatterns = [path('hello/',views.hello,name='hello'),
                 path('test/',views.test,name='test'),
                 path('lazy_orders_index/',views.lazy_orders_index,name='lazy_orders_index'),
                 path('<int:category_id>/category/', include([path('delete/', views.category_delete,name='category_delete'),path('edit/', views.category_edit,name='category_edit')]))]

  <div class="panel panel-info">
      <div class="panel-heading">
          <h3 class="panel-title">Test</h3>
      </div>
      <div class="panel-body">
          <table data-toggle="table"
                 data-single-select="true"
                 data-click-to-select="true"
                 data-checkbox-header="false"
                 data-url="{% url 'test' %}">
              <thead>
                  <tr>
                      <th data-field="state" data-checkbox="true"></th>
                      <th data-field="name">姓名</th>
                      <th data-field="sex">性别</th>
                  </tr>
              </thead>
          </table>
      </div>
  </div>

  def test(request):
      #data = {
      #'name': 'dengwei',
      #'sex': '男'
      #}
  
      data = [{
      'name': 'dengwei',
      'sex': '男'
      },{
      'name': '女帝',
      'sex': '女'
      }]
      
      
      return JsonResponse(data,safe=False)

  最终渲染的效果如下图所示：发现效果与上一篇中通过JS实现单选行的效果一样，几乎没写什么代码，通过设置几个属性就达到了同样的效果，何乐而不为？

  

• 通过Javascript

  clickToSelect->data-click-to-select，所有的属性都是在JavaScript中指定的字段都是一一对应的关系，前面添加data，单词之间使用“-”分割

  checkboxHeader->data-checkbox-header

  singleSelect->data-single-select

  columns指定列，data指定数据源，这里要注意着色部分，这个categorys是取自Django后台传入的数据json_categorys，后台返回的数据要直接给JavaScript使用，必须添加safe过滤器，safe过滤器的作用就是不对字符串转义

  <div class="panel panel-info">
      <div class="panel-heading">
          <h3 class="panel-title">类别</h3>
      </div>
      <div class="panel-body">
          <div class="list-op" id="list_op">
              <button type="button" class="btn btn-default btn-sm" id="btbtn_category_add">
                  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
              </button>
              <button type="button" class="btn btn-default btn-sm" id="btbtn_category_edit">
                  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
              </button>
              <button type="button" class="btn btn-default btn-sm" id="btbtn_category_delete">
                  <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
              </button>
          </div>
          <table id="bttable_category">
          </table>
      </div>
  
  </div>

  var categorys = {{ json_categorys | safe }};
  
  $bttable_category.bootstrapTable({
      clickToSelect: true,
      checkboxHeader: false,
      singleSelect: true,
      columns: [{
          checkbox: true
      }, {
          field: 'category_id',
          title: 'ID'
      }, {
          field: 'category_name',
          title: '类别名'
      }
      ],
      data: categorys
  })
  $bttable_category.bootstrapTable('hideLoading');

  def lazy_orders_index(request):
      categorys = Category.objects.all()#查询所有的类别
      menus = Menu.objects.all()#查询所有的菜单
  
      json_categorys = []#定义两个数组 用来保存model的json数据
      json_menus = []
  
      for category in categorys:
          json_categorys.append({
          "category_id":category.category_id,
           "category_name":category.category_name#遍历实体对象 构建ViewModel的数据
           })
  
      for menu in menus:
          json_menus.append({
              "category_name":menu.category.category_name,
              "menu_name":menu.menu_name
              })
  
      context = {'json_categorys': json.dumps(json_categorys),'json_menus':json.dumps(json_menus),'categorys':categorys,'menus':menus,'year':datetime.now().year}
      return render(request,'hello/lazyorders.cshtml',context)#将数据和模板传给render函数 渲染成html返回给客户端

  最终渲染的效果如下图：

  

  效果与上一篇演示的效果是一样的，但是，效率就不一样，我们可以查看网页的源代码，看看服务器返回的html文本有什么不一样。

2）查看网页的源代码

• 未使用BootStrap Table，可以看到服务器渲染了整个table的源代码，还有要做效果（比如单选）等的JS代码，于服务器与开发人员来说，耗时费力啊！
  

  

•  使用BootStrap Table，模板里边写的是什么内容，返回的就是什么内容，Html不会在服务端渲染，而是到了客户端后，通过JS渲染的界面，于服务器和开发人员而言，都是一种福利。