更改其值后如何更改行的背景颜色？

Question

如何将自定义CSS（例如background-color:red）样式设置为值已更改的行？

我正在使用Webix，以下功能运行良好，但我不确定是否有方便的CSS实现：

  on:{
    onAfterEditStop:function(state,editor){      
      if(state.old != state.value){
        webix.message("Row "+editor.row+" has been changed")
      }        
    }}

完整代码段为here。提前谢谢！

Answer 1

Example

说明 只需将this.addRowCss函数添加到您的活动中即可。可以在此处找到文档：http://docs.webix.com/api__ui.datatable_addrowcss.html

如果您希望这是临时的，只需在事件中添加一个计时器，然后在计时器到期时执行this.removeRowCss删除此颜色。如果您需要一个例子，请询问。

<强>代码：

var data = [
    { id:1, value:"Aa"},
    { id:2, value:"Bb"},
    { id:3, value:"Cc"},
    { id:4, value:"Dd"},
    { id:5, value:"Ee"},
    { id:6, value:"Ff"}
];


webix.ui({
  id:"table", view : "datatable", editable:true, 
  columns : [ 
    { id : "id", header : "", fillspace:0.1 }, 
    { id : "value", header : "Editable", editor : "text",  fillspace : 0.7 }
  ],
  data:data,  
  on:{
    onAfterEditStop:function(state,editor){      
      if(state.old != state.value){
        //this has to assign a css class name
        this.addRowCss(editor.row, "test");
        webix.message("Row "+editor.row+" has been changed")
      }        
    }}
  });

Example with timer for removing color

var data = [
    { id:1, value:"Aa"},
    { id:2, value:"Bb"},
    { id:3, value:"Cc"},
    { id:4, value:"Dd"},
    { id:5, value:"Ee"},
    { id:6, value:"Ff"}
];

webix.ui({
  id:"table", view : "datatable", editable:true, 
  columns : [ 
    { id : "id", header : "", fillspace:0.1 }, 
    { id : "value", header : "Editable", editor : "text",  fillspace : 0.7 }
  ],
  data:data,  
  on:{
    onAfterEditStop:function(state, editor){
      if(state.old != state.value){
        var that = this;
        webix.message("Row "+editor.row+" has been changed")
        // 1500 is the number of milliseconds until color is changed back
        toggleRowCss(that, editor.row, "test", 1500);
      }        
    }
  }
});

function toggleRowCss(table, row, cssClass, timeout){
  //this has to assign a css class name
  table.addRowCss(row, cssClass);
  setTimeout(function(){ table.removeRowCss(row, cssClass); }, timeout);
}