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

Question

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

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

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

完整的片段在这里。提前致谢！

Answer 1

例子

说明： 只需将函数 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")
      }        
    }}
  });

---

用于去除颜色的计时器示例

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