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

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

完整的代碼段在這里 。 提前致謝！

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