JSON처리

{% extends "layouts/layout.html" %}
{% load django_bootstrap5 %}
{% load pinservices_filter %}
{% load humanize %}

{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript %}
{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}

{% block content %}
    <div class="container my-3">

        <div class="row">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'pins:pinorderuser_insert' %}">회원 통신 할인비 등록</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" aria-disabled="true" href="#">회원 통신 할인비 조회</a>
                </li>
            </ul>
        </div>


        <div class="card">
            <div class="card-header">
                {{ user.customer_name }} 회원님의 통신 할인비 조회 <br/>
            </div>
            <div class="card-body">
                <div id="MyGrid"></div>
            </div>
        </div>


    </div>




    <script>
        let dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    // The remote endpoint from which the data is retrieved.
                    url: "{% url 'pins:pinorderuser_serach_json' %}",
                    dataType: "json"
                }
            },
            pageSize: 5,
            aggregate: [{field: "fields.order_price", aggregate: "sum"}]
        });

        console.log(dataSource);

        let grid = $("#MyGrid").kendoGrid({
            dataSource: dataSource,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            scrollable: false,
            columns: [
                {
                    field: "fields.accept_at",
                    title: "입력일자",
                    headerAttributes: {
                        "class": "k-text-center",
                        style: "font-size: 1.0em"
                    },
                    template: "#= fields.accept_at.substr(0, 10) #"
                },
                {
                    field: "fields.guid_key", title: "핀번호",
                    template: "#= fields.guid_key.substr(0, 4) + '-' + " +
                        "fields.guid_key.substr(4, 4) + '-' + fields.guid_key.substr(8, 4) + '-' + fields.guid_key.substr(12, 4) #"
                },
                {field: "fields.customer_name", title: "혜택자 이름",},
                {
                    field: "fields.customer_mobile_info",
                    title: "통신사",
                    headerAttributes: {
                        "class": "k-text-center",
                    },
                    template: '#= changeTemplate(fields.customer_mobile_info)#',
                    attributes: {
                        "class": "color-red",
                        style: "text-align: center"
                    },
                },
                {
                    field: "fields.customer_tel", title: "전화번호",
                    template: "#= fields.customer_tel.substr(0, 3) + '-' + fields.customer_tel.substr(3, 4) + '-' + fields.customer_tel.substr(7, 4) #"
                },
                {
                    title: "할인금액",
                    field: "fields.order_price", format: "{0:###,###,##0}",
                    headerAttributes: {
                        "class": "k-text-right",
                    },
                    footerAttributes: {style: "text-align: right"},
                    attributes: {
                        "class": "k-text-right",
                        style: "font-size: 1.0em",
                    },
                    aggregates: ["sum"],
                    footerTemplate: "할인비 총액: #= kendo.toString(sum, 'n0') #",
                },
            ],
        }).data("kendoGrid");

        function changeTemplate(value) {
            if (value == '1')
                return "SK";
            else if (value == '2')
                return "KT";
            else
                return "LG";
        }

        $(".k-cell-inner").attr("class", "k-cell-inner1");

    </script>
    <style>

        .k-grid tr .checkbox-align {
            text-align: center;
            vertical-align: middle;
        }
    </style>

{% endblock %}