制表符 - 设置数据

Question

我正在使用多步表单，“https://www.jqueryscript.net/demo/Signup-Form-Wizard-jQuery-multiStepForm/”这是我使用的链接。 在打开多步表单页面时，我调用了加载函数，并且还使用 ajax 调用了数据库中的数据。 当我调用数据时，我创建了一个 tableData 对象，并将这个对象设置为我指定的 tabuator 表。
jQuery 版本：3.4.1； 制表版本：4.5；

HTML

<script src="~/Content/js/jquery-3.4.1.min.js"></script>
<script src="~/Content/js/jquery-ui.min.js"></script>
<script src="~/Content/js/tabulator.min.js"></script>
<script src="~/Content/js/jquery_wrapper.min.js"></script>

JavaScript

var table;
        
// Define Date Editor
var dateEditor = function (cell, onRendered, success, cancel, editorParams) { 
    var cellValue = cell.getValue(),
    var input = document.createElement("input");
    
    input.setAttribute("type", "text");

    input.style.padding = "4px";
    input.style.width = "100%";
    input.style.boxSizing = "border-box";

    input.value = typeof cellValue !== "undefined" ? cellValue : "";


    onRendered(function () {
        $(input).datepicker({
            dateFormat: "dd-mm-yy",
            altFormat: "dd-mm-yy",
            changeMonth: true,
            changeYear: true,
            yearRange: '-119:+119',
            monthNames: ["Ocak", "Şubat", "Mart", "Nisan", "Mayis", "Haziran", "Temmuz", "A?ustos", "Eylul", "Ekim", "Kasım", "Aralık"],
            monthNamesShort: ["Ock", "Şub", "Mart", "Nis", "May", "Haz", "Tem", "Agst", "Eyl", "Ekm", "Kas", "Ar"],
            dayNamesMin: ["Pa", "Pt", "Sl", "Ca", "Pe", "Cu", "Ct"],
            firstDay: 1,
            onSelect: function (dateStr) {
                var dateselected = $(this).datepicker('getDate');
                var cleandate = (moment(dateselected, "DD-MM-YYYY").format("DD-MM-YYYY"));
                $(input).datepicker("destroy");
                cell.setValue(cleandate, true);
                cancel();
            },
        });

        input.style.height = "100%";
    });

    return input;
};

  
//Create Table  
var table = new Tabulator("#example-table", {  
    columns: [
        { title: "Davalı Türü", field: "davalitur", editor: "select", editorParams: { values: { "Seçiniz": "Seçiniz", "Kişi": "Kişi", "Kurum": "Kurum" } } },
        { title: "Davalı", field: "adsoyadkurum", editor: "input" },
        { title: "Kusur Oranı", field: "kusuroran", editor: "input" },
        { title: "Sigorta Şirket Ünvanı", field: "unvan", editor: "input" },
        { title: "İhbar Tarihi", field: "sit", align: "center", sorter: "date", editor: dateEditor },
        { title: "Temerrüte Düşme Tarihi", field: "tdt", align: "center", sorter: "date", editor: dateEditor },
        { title: "Faiz Oranı", field: "faizorani", editor: "select", editorParams: { values: { "Kanuni Faiz Oranı": "Kanuni Faiz Oranı", "Ticari Faiz Oranı": "Ticari Faiz Oranı" } } },
        { title: "Ödemeyi Yapan", field: "odemeyapanselectval", editor: "select", editorParams: { values: { "Seçiniz": "Seçiniz", "Davalı": "Davalı", "Sigortacı": "Sigortacı" } } },
        { title: "Ödeme Yapılan", field: "odemeyapilandavaci", editor: "select", editorParams: { values: { "Eşi": "Eşi", "Çocuk": "Çocuk", "Anne-Baba": "Anne-Baba", "Diğer": "Diğer" } } },
        { title: "Ödeme Tarihi", field: "odemetarih", align: "center", sorter: "date", editor: dateEditor },
        { title: "Ödeme Tutarı", field: "odemetutar", editor: "input" },
        { title: "Güvence Ödeme Tarihi", field: "guvenceodemetarih", align: "center", sorter: "date", editor: dateEditor },
        { title: "Güvence Ödeme Tutarı", field: "guvenceodemetutar", editor: "input" },
        {title: "Durum", formatter: "buttonCross", align: "center", cellClick: function (e, cell) {
            cell.getRow().delete();
            //if (confirm('İlgili davalı silinecekt')) cell.getRow().delete();//Dialog Eklenicek
            }
        },
    ],
}); 

// Step 4 load function
function dykstep4Yukle() {
    $.ajax({
        type: 'POST',
        dataType: 'json',
        cache: 'false',
        url: '../Client2DB/DykStepGetir',
        data: { projeid: projeId, stepNo: 4 },
        success: function (data) { 
            counterloaddyk++;

            if (counterloaddyk == 5) {
               $('#pre-load').fadeOut();
            }

            var obj = JSON.parse(data.json);  
                
            $('#pre-load').fadeOut();

            $.each(obj.DavaliTabloListe, function (key, value) {
                   
                   
                tableData = [{
                    id: value.id,
                    davalitur: value.davalitur,
                    adsoyadkurum: value.AdSoyadKurum,
                    kusuroran: value.KusurOranı,
                    unvan: value.SigortaSirketUnvan,
                    sit: value.SigortaIhbarTarih,
                    tdt: value.TemerruteDusmeTarihi,
                    faizorani: value.faizorani ,
                    odemeyapanselectval: value.OdemeyiYapanKurum,
                    odemeyapilandavaci: value.davaciturstring,
                    odemetarih: value.loadOdemeTarihi,
                    odemetutar: value.loadOdemeTutari ,
                    guvenceodemetarih: value.loadGuvenceOdemeTarihi,
                    guvenceodemetutar: value.loadGuvenceOdemeTutar
                }];  
            });   
            
            createTable(tableData);
        }, error: function () {
            alert("DYKT step 4 error");
        }
    });
}
         
//Set Data
function createTable(tableData) {
    if (tableData.length>0) {
        table.setData(tableData); 
    }
}

当我调用table.setData(tableData) ，数据成功但表显示为空。 当我点击表格的任何标题时，数据显示。（所以它是触发器）但通常表格显示为空。 在此处输入图片说明

在此处输入图片描述 2

Answer 1

发生这种情况是因为在将数据加载到表中时该表不可见。

当您使其可见时，您需要在表上调用重绘函数。

table.redraw();