基於layui實現動態表頭所需的字段列表功能實現

jquery+ajax

 

let table_var_width = 1920
//獲取動態表頭所需顯示的字段列表
function get_var_data_cols() {
    $.ajax({
        type: "POST",
        ContentType: 'application/json',
        data: {"csrfmiddlewaretoken":$("[name = 'csrfmiddlewaretoken']").val(),"table_type": $("select[id='table_type']").val()},
        dataType: "json",
        async: false,
        url: "/var/var_data_cols/",
        success: function (data){
            interface_cols =[];
            interface_cols_key = {
        field: 'id ',
        title: '序號',
        width: 0.049 * table_var_width,
        sort: true,
        type: 'numbers',
        align: "center",
        template: "#serial_number"
    };
            var_data_cols_list =  data.data;
            for(var key in var_data_cols_list){
                var cols_json = {field: var_data_cols_list[key],
                    title: var_data_cols_list[key],
                    width: 0.17 * table_var_width,
                    align: "center"};
                interface_cols.push(cols_json);
            }
            interface_cols.push(interface_cols_key)#自定義的常規列需要單獨push;
            console.log(interface_cols);
},
        error: function (e) {
            console.log("動態表頭所需顯示的字段列表數據獲取失敗");
            interface_cols=[]
        }
    });
    return [interface_cols]//將對象轉換為可用的數組
}

　　上面這段js中需要特別注意，在循壞體中需要單獨的新建一個變量用於存放數據:

var cols_json = {field: var_data_cols_list[key],
                    title: var_data_cols_list[key],
                    width: 0.17 * table_var_width,
                    align: "center"};