【问题标题】:Tabulator (4.1) replacing new Column value/ formatter制表符 (4.1) 替换新的列值/格式化程序
【发布时间】:2018-12-09 16:51:47
【问题描述】:

我在 Tabulator 中添加了一个带有此列定义的新列

table.addColumn({title:"idCopy", field: "idCopy" ,sortable:false, formatter:uploadID,width:100, align:"center",cellClick:function(e, cell){
  function selected(){
    var fileName = formInput.value;
    cell.getRow().getData().idCopy = fileName;

  }
var f = document.createElement("form");
var formInput = document.createElement('input');
formInput.onclick = "selected(cell,f,formInput)" ;
var s = document.createElement("input");
s.setAttribute('type',"submit");
f.appendChild(formInput);
f.appendChild(s);
f.onClick = formInput.click();
}}, false);

我添加了更多行来定义每个表单,其 ID 类似于 f.id = "f_" + cell.getRow().getData().id ;,因此每个表单都是唯一的,uploadID 函数看起来像这样

  var uploadID = function(cell, formatterParams, onRendered){ 

return "<i class='fa fa-print'>upload ID</i>";

这是我从官方资源http://tabulator.info/docs/4.1/format#icon得到的 问题是每当我选择文件cell.getRow().getData().idCopy 的值是fileName 时,这正是我想要的,但在表格的单元格上它仍然显示upload ID 而不是fileName 的值

因此用户不会知道他刚刚选择了文件并且系统已准备好上传它。

有没有办法用fileName替换 upload ID刷新这些单元格?

【问题讨论】:

    标签: javascript image-uploading tabulator


    【解决方案1】:

    如果您要更改行中的任何数据,则需要在该行的行组件上调用 update 函数,并传入更新的数据参数:

    row.update({id:"f_" +  cell.getRow().getData().id});
    

    这将正确更新值

    【讨论】:

      【解决方案2】:

      我已经通过应用行重新格式化来修复它

      首先我在var uploadID = function(cell, formatterParams, onRendered){}中添加了一个条件

      例如:

      var uploadID = function(cell, formatterParams, onRendered){ //plain text value
      var x = cell.getValue();
      if ( x == null ){ // do something}
      else{ // do something }
      return /*something*/;
      

      然后在cellClick:function(e, cell){}

      我在代码末尾添加了以下内容

          var row = cell.getRow();
          row.reformat();
      

      【讨论】:

      • 调用reformat函数会导致整个行不必要的渲染,如果你在行组件上调用update函数传入更新的属性,它只会重绘改变的字段
      猜你喜欢
      • 2011-08-25
      • 1970-01-01
      • 2021-10-10
      • 1970-01-01
      • 2018-06-11
      • 1970-01-01
      • 2018-07-26
      • 1970-01-01
      • 2023-01-11
      相关资源
      最近更新 更多