Object usage processing, scope and understanding of this in ajax

Keywords: Javascript

First, encapsulate the class, understand which variables you need to use, then declare them, and then encapsulate the functions in the class, where constructor is the place where the initial variables are stored.

This is also the processing of datatable,

constructor(table) {
        this.data = {};
        this.table = table

    }
inittable(table) {
        for (var i = 0; i < this.data.rowdata.length; i++) {
            this.data.rowdata[i].submit_status = 0
        }
        this.data.col_define[this.data.col_define.length] = {
            'targets': this.data.col_define.length,
            'title': 'Upload status',
            'data': 'submit_status',
            'render': function (data, type, full, meta) {
                if (1 === data) {
                    return 'Upload success'
                } else if (2 === data) {
                    return 'Upload failure'
                } else {
                    return 'Not uploaded'
                }
            }
        };
        console.log(this.data.col_define);
        console.log(this.data.rowdata);
        this.table = $(table).DataTable({
            'language': lan,
            "dom": 'lB<"top"f><"toolbar">rt<"bottom"ip><"clear">',
            "paging": true,
            "lengthChange": true,
            "info": true,
            'destroy': true,
            "deferRender": true,
            'columns': this.data.col_define,
            'data': this.data.rowdata,
        })
    }

Configure the table configuration in the function, and then change the data in the previous res result to this

 success: function (res) {
            if ('ok' === res['code']) {
                if (department === 1) {
                    salary_table = $('#primary_excel_table')
                } else if (department === 2) {
                    salary_table = $('#middle_excel_table')
                } else if (department === 3) {
                    salary_table = $('#logistics_excel_table')
                }
                alert('Analytic completion!');
                console.log('The return data is', res['data']);
                sal.data = res['data'];
                console.log(sal.data);
                sal.inittable(modal_table);

In this way, you can use classes to dynamically define tables, and submit is also configured directly, instead of using the render function of previous blogs,

And then, string splicing

comcat_string(salary_info) {
        var items = [];
        Object.keys(salary_info).forEach(function (key) {
            if (key !== 'Name' && key !== 'department' && key !== 'ID' && key !== 'submit_status') {
                items.push([key, salary_info[key]].join(':'));
            }
        });
        return items.join('|')
    }

Using the forEach method, JS traverses the method classes that can be queried.

Moreover, in ajax, if you want to call variables under this, you need to declare them externally in advance

_this=this

Then similar

    _this.data.rowdata[a]['submit_status'] = 1;

In my opinion, I don't like to spray. On the 11th day of front-end internship, I also forgot the details. Anyway, it's almost 11. My head hurts.... La La de Marcia

Posted by bad_goose on Mon, 02 Dec 2019 12:54:39 -0800