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

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")
      }        
    }}

完整的 sn-p 是 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);
}