如何更改取決於行的值在劍道UI電網

我有劍道UI電網，其中包含四列列的顏色：如何更改取決於行的值在劍道UI電網

Highlight MAC Time Message

的Highlight列能包含值「是」或「否「，並且此列是隱藏的。

我需要創建一個行模板，如果值爲yes，它將突出顯示（更改顏色或某物）行。

來源

2015-06-12 shubham gupta

可以在模板行申請條件，你可以試試下面

$("#grid").kendoGrid({ 
     dataSource: ds, 
     rowTemplate: '<tr class="#:Highlight ==\"Yes\"? \"red\" : \"white\"#" data-uid="#= uid #"><td>#: MAC #</td><td>#:Time #</td><td>#:Message#</td></tr>' 
    });

數據源

var ds = new kendo.data.DataSource({ 
    data: [{ 
     Highlight : "Yes", 
     MAC :"...", 
     Time :"...", 
     Message:"...." 
    }, { 
     Highlight : "No", 
     MAC :"...", 
     Time :"...", 
     Message:"...." 
    }] 
});

來源

2015-06-12 05:56:57

它的工作，謝謝:) –

太棒了！但是如果你想突出顯示2種顏色......假設你有一個int值爲1,2或3，並且你想突出顯示是2還是3？ –

請與下面的代碼片段嘗試。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Untitled</title> 

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.rtl.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.default.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css"> 

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script> 
    <style> 
     .change-background { 
      background-color: red; 
     } 
    </style> 
</head> 
<body> 
    <div id="grid"></div> 
    <script type="text/javascript"> 
     var ds = new kendo.data.DataSource({ 
      data: [{ 
       Highlight: "Yes", 
       MAC: "111", 
       Time: "aaa", 
       Message: "a1" 
      }, { 
       Highlight: "No", 
       MAC: "222", 
       Time: "bbb", 
       Message: "b2" 
      }] 
     }); 
     $("#grid").kendoGrid({ 
      dataSource: ds, 
      dataBound: onDataBound, 
      columns: [ 
        { hidden: true, field: "Highlight" }, 
        { field: "MAC" }, 
        { field: "Time" }, 
        { field: "Message" } 
      ], 
     }); 

     function onDataBound(e) { 
      var grid = $("#grid").data("kendoGrid"); 
      var data = grid.dataSource.data(); 
      $.each(data, function (i, row) { 
       if (row.Highlight == "Yes") { 
        var element = $('tr[data-uid="' + row.uid + '"] '); 
        $(element).addClass("change-background"); 
       } 
      }); 
     } 
    </script> 
</body> 
</html>

讓我知道是否有任何問題。

來源

2015-06-12 07:17:28

謝謝你的答案Jayesh，但我需要通過使用行模板來實現 –

如何更改取決於行的值在劍道UI電網

回答

相關問題