更新单元格更新而无需滚动到顶部

问题描述

我遇到一个问题，即在使用cellEdited更新单元格时，在调用mutator或formatter时，页面会跳回到页面顶部。

我尝试设置table.redraw（false），然后格式化程序/更改程序似乎什么也没做。

当用户更新熟练程度时，格式化程序或更改程序应添加一个大于3的按钮。它可以完美工作。但是，它会跳到屏幕顶部。

任何帮助表示赞赏。

$output .= '<option '. ($row->id==$fetch_state_db)?'selected="selected"':''. ' value="'.$row->id.'">'.$row->region.'</option>';

更新

我认为我已将问题归结为格式化者：

var evidenceMutator = function(value,data,type,params,component){


    skillsTable.redraw(false);

    var claimedProficiency = data.Proficiency;
    var skillClaimed = data.SkillID;
    var Evidence = data.Evidence;
    var memberID = $("#user").data("memberid");

    if (claimedProficiency >= 3 )  {

        // has provided evidence
        if (Evidence == 1) {
            return '<a class="btn btn-outline-success btn-xs btn-slim evidence" href="#" id="'+ skillClaimed + '" onclick="openEvidenceModal(this,this.id,'+ memberID +')"> <i class="fas fa-check-circle cssover"></i> Edit Evidence </a>';
        } else { // needs to provide
            return '<a class="btn btn-outline-danger btn-xs btn-slim evidence" href="#" id="'+ skillClaimed + '" onclick="openEvidenceModal(this,'+ memberID +')"> <i class="fas fa-times-circle cssover"></i> Add Evidence </a>';
        }

    } else {

       // cell.getElement().style.color = "#CCD1D1";
        //cell.getElement().style.fontStyle ="italic";
       // cell.getElement().style.fontSize = "0.75em";
        return '&nbsp; No Evidence Needed';
    }



}

function complianceTick(cell) {

    var isCompliant = cell.getData().Compliance;
    var Evidence = cell.getData().Evidence;
    var claimedProficiency = cell.getData().Proficiency;

    // style all with sucesss and only change if we need to
    cell.getElement().style.color = "#33CC66";
    cell.getElement().style.fontSize = "0.85em";
    cell.getElement().style.fontStyle = "italic";


    if (claimedProficiency >= 3 )  {

        if (Evidence == '1') {
            return '<i class="fas fa-check-circle"></i>';

        } else {
            cell.getElement().style.color = "#FF0000";
            cell.getElement().style.fontSize = "0.85em";
            cell.getElement().style.fontWeight = "bold";

            return '<i class="fas fa-times-circle"></i>';
        }

    } else {
            return '';
    }

}


var skillsTable = new Tabulator("#SkillsTable",{
    index: "SkillID",height:"100%",headerVisible:false,autoResize:true,layout:"fitColumns",//fit columns to width of table
    groupBy:"SkillCatID",groupHeader: groupMaker,initialSort:[             //set the initial sort order of the data
        {column:"RowOrder",dir:"asc"}
    ],columns:[  //define the table columns
        {title:"",field:"SkillID",visible:false},{title:"Skill",field:"SkillName",visible:true,headerSort:false,formatter: skillName},{title:"",field:"SkillCatID",field:"SkillCatName",{title:"My Level",field:"Proficiency",editor:inputEditor,formatter:prof,width:"7%",align:"center",cellEdited:function(cell,row,success){  // EDITING FUNCTION

                var $value = cell.getValue();
                var $field = cell.getField();
                var $row = cell.getRow();
                var $id = $row.getData().SkillID;

                var integer = parseInt($value,10);
                if ($value != "" && integer < 5 && integer >= 0) {

                    // update record
                    updateRecord($id,$field,$value,$row);

                    //$row.update({"Proficiency" : $value});
                    //$row.update({"Evidencer" : $value});

                    skillsTable.updateRow($id,{id:$id,"Proficiency":$value});
                    skillsTable.updateRow($id,"Evidencer":$value});

                } else {
                    cell.restoreOldValue();

                    if ($value != "") {
                        alert ("Values should be between 0 and 4,the cell has been restored to its prevIoUs value.")
                    }
                }

            },},{title:"Target",field:"MinLevel",visible:false,headerSort:false},formatter: skillDec,{title:"Evidence",field:"Evidencer",hozAlign:"center",formatter: evidenceCell,mutator: evidenceMutator,width:"10.5%",field:"RowOrder",sorter:"number"},{title:"disc",field:"disciplineID",headerFilter:true}
    ],}); 

似乎问题出在cell.getData（）。似乎触发了滚动到页面顶部。我认为这可能是较新版本的错误。测试4.2，这似乎不是问题。但是，在使用较旧版本的页面顶部，我遇到了模态问题。

解决方法

问题似乎出在虚拟DOM上。就我而言，我可以使用以下命令将其关闭：

virtualDom:false,

我不确定这对于拥有数百行的人是否是一个好的解决方案。