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

浅浅的花香味﹌ 2023-06-03 15:57 4阅读 0赞

导航：[VS2019开发Django系列][VS2019_Django]

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

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

*  通过数据属性
    
    给定data-url="\{% url 'test' %\}"，插件会自动请求这个地址的数据，然后渲染，这个地址对应的url为前几篇演示JsonResponse的地址：http://localhost:8090/hello/test/，[url的绑定规则][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实现单选行的效果一样，几乎没写什么代码，通过设置几个属性就达到了同样的效果，何乐而不为？
    
    ![Image 1][]
 *  通过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返回给客户端
    
    最终渲染的效果如下图：
    
    ![Image 1][]
    
    效果与上一篇演示的效果是一样的，但是，效率就不一样，我们可以查看网页的源代码，看看服务器返回的html文本有什么不一样。

**2）查看网页的源代码**

*  未使用BootStrap Table，可以看到服务器渲染了整个table的源代码，还有要做效果（比如单选）等的JS代码，于服务器与开发人员来说，耗时费力啊！  
    
    
    ![635258-20190925215929225-678040727.png][]
 *   使用BootStrap Table，模板里边写的是什么内容，返回的就是什么内容，Html不会在服务端渲染，而是到了客户端后，通过JS渲染的界面，于服务器和开发人员而言，都是一种福利。
    
    ![635258-20190925220505547-1537503847.png][]

转载于:https://www.cnblogs.com/dwBurning/p/Django10.html

[VS2019_Django]: https://www.cnblogs.com/dwBurning/category/1542508.html
[BootStrap Table]: https://www.bootstrap-table.com.cn/
[url]: https://docs.djangoproject.com/zh-hans/2.1/ref/templates/builtins/#url
[Image 1]: 
[safe]: https://docs.djangoproject.com/zh-hans/2.1/ref/templates/builtins/#safe
[635258-20190925215929225-678040727.png]: /images/20230601/3a3770ff137140d69e3aaafb5186ff2c.png
[635258-20190925220505547-1537503847.png]: /images/20230601/e60a6770bc92405899a6893104fc022d.png