Question

表内未填充数据。但是，当我打开控制台或执行addRow操作时，数据会更新。下面是代码：

$(document).ready(function() {
$.get("./resources/json/result.json", function(data, status) {
    createEmpDetailTbl(JSON.parse(data));
});

function createEmpDetailTbl(jsonData) {
table = new Tabulator("#emp-detail-table", {
    data : jsonData,
    height : "100%",
    layout : "fitColumns",
    tooltips:true,
    tooltipsHeader: true,
    addRowPos:"top",
    pagination : "local",
    paginationSize : 10,
    columns : [ {
        title : "Actions",
        field : "username",
        //sorter : "string",
        width : 100,
        frozen : true,
        headerSort : false,
        formatter : actionRowIcon,
        cellClick : function(e, cell) {
            //console.log("Event Source: "+e.srcElement.id);
            //console.log("Cell Value: "+cell.getValue());
            if('del' == e.srcElement.id){
                var row = cell.getRow();
                row.delete().then(function(){
                    //run code after row has been deleted
                    alert('Row Deleted Successfully');
                    $.ajax({
                        url: "/YourController",
                        cache: false,
                        dataType: "json",
                        success: function(data) {
                            //$("#content").html(data);
                        }
                    });
                })
                .catch(function(error){
                    //handle error deleting row
                });
                var rowIndex = row.getIndex();
                //console.log('Row Data: '+row);
                //console.log('Row Position: '+row.getPosition(true));
            }
        }
    }, {
        title : "Employee ID",
        field : "username",
        //sorter : "string",
        width : 120,
        align : "left",
        headerSort : false,
        editor:"input",
        frozen : true
    }, {
        title : "Full Name",
        field : "fname",
        //sorter : "string",
        width : 120,
        align : "left",
        headerSort : false,
        frozen : true
    }, {
        title : "Email Address",
        field : "email",
        //sorter : "string",
        width : 170,
        align : "left",
        headerSort : false,
        cellClick : function(e, cell) {
            //console.log("cell click")
        },
    }, {
        title : "OUC",
        field : "ouc",
        //sorter : "string",
        width : 70,
        align : "left",
        headerSort : false
    }, {
        title : "LOB",
        field : "lob",
        width : 70,
        align : "left",
        headerSort : false,
        //sorter : "string"
    }, {
        title : "Type of Redundancy",
        field : "tyRedun",
        //sorter : "string",
        width : 120,
        align : "left",
        headerSort : false,
    }, {
        title : "Type of Notice Period",
        field : "tyNoticePeriod",
        //sorter : "string",
        width : 80,
        align : "left",
        headerSort : false
    }, {
        title : "Notice Period",
        field : "noticePeriod",
        //sorter : "string",
        width : 70,
        align : "left",
        editor:"select", 
        editorParams:{values:["1 Month", "2 Month", "3 Month", "4 Month"]},
        headerSort : false
    }, {
        title : "Proposed Exit Date",
        field : "proExitDate",
        //sorter : "date",
        width : 80,
        align : "left",
        headerSort : false
    }, {
        title : "Consultation Manager UIN",
        field : "conManagerUin",
        width : 80,
        align : "left",
        headerSort : false
        //sorter : "number",
    }, {
        title : "Consultation Date",
        field : "conDate",
        //sorter : "date",
        width : 80,
        align : "left",
        headerSort : false
    }, {
        title : "Pension Contribution",
        field : "pensionContri",
        //sorter : "number",
        width : 100,
        align : "left",
        headerSort : false
    }, {
        title : "Car Cash Allowance",
        field : "carCashAllowance",
        //sorter : "number",
        width : 100,
        align : "left",
        headerSort : false
    } ],
    renderStarted:function(){
        $('#loading').show();
    },renderComplete:function(){
        $('#loading').hide();
    },
    cellEdited:function(row){

        //row - row component
        //console.log('Changed......'+row.getData().username);
        $.ajax({
            type: 'GET',
            //url: './resources/json/employee.json',
            url: projectOptions.restUrl+'employee/'+row.getData().username,
            dataType:'text',
            contentType: 'application/json; charset=utf-8',
            beforeSend:function(){
                $('#loading').show();
            },
            success:function(response) {
                if(response != ""){
                    var data=[];
                    data.push(response);
                    console.log(JSON.parse(data));
                    //table.updateData(JSON.parse(data));
                    table.addData(JSON.parse(data));
                    $('.alert').hide();
                } else{
                    $('#error-txt').text('').text('Employee data not found.');
                    $('.alert').show();
                }

            },
            complete:function(){
                $('#loading').hide();
            },
            error:function(err, xhr, msg){
                alert(err+"-------------------"+xhr);
            }
        });

    }
});
}

JSON：

[{
"dn": null,
"username": "23456789",
"password": null,
"displayName": null,
"fname": "John",
"lname": "Smith209884",
"email": "x.x@wer.com",
"ouc": "TBS23B",
"lob": "wer",
"jobcode": "STST05",
"employer": "NO Plc",
"ldg": "GB LDG",
"origHireDate": "1980-09-01",
"serviceDate": "1980-09-01",
"terminationDate": null,
"authorities": [],
"accountNonExpired": true,
"accountNonLocked": true,
"credentialsNonExpired": true,
"enabled": true,
"timeBeforeExpiration": 2147483647,
"graceLoginsRemaining": 2147483647,
"name": "John Smith209884"
}]

Answer 1

不需要自己发出GET请求，Tabulator可以为您完成。

使用 ajaxURL 而不是使用 data 属性，并向其传递网址：

table = new Tabulator("#emp-detail-table", {
    ajaxURL: "./resources/json/result.json",
    height : "100%",
    layout : "fitColumns",
...
});

如果该表未加载数据，则表明数据格式错误，您是否检查了控制台日志？制表器将在日志中留下一条消息，解释其为何无法加载数据。它将期待一个对象数组：

[
    {...},
    {...},
]

制表符4.1- IE 11中的表中未填充数据

1 个答案: