如何解决更新单元格更新而无需滚动到顶部
我遇到一个问题,即在使用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 ' 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,
我不确定这对于拥有数百行的人是否是一个好的解决方案。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。