Trong lưới kendo, tôi có thể đặt thuộc tính cột động bằng một hàm không?

Tôi đã có một số mã ở đây, nơi tôi đang cố gắng để thiết lập một màu nền của một tế bào dựa trên giá trị của mục dữ liệu: http://dojo.telerik.com/@solidus-flux/eHaMu Trong lưới kendo, tôi có thể đặt thuộc tính cột động bằng một hàm không?

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Kendo UI Snippet</title> 

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/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/2014.3.1411/js/kendo.all.min.js"></script> 
</head> 
<body> 

<div id="grid"></div> 
<script> 
$("#grid").kendoGrid({ 
    columns: [ { 
    field: "name", 
    title: "Name", 
    attributes: function(e) { 
     return { 
     "class": "table-cell", 
     style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green" 
     }; 
    } 
    //attributes: { 
     //"class": "table-cell", 
     //style: "text-align: right; font-size: 14px" 
    //} 
    } ], 
    dataSource: [ { name: "Jane Doe" }, { name: "John Doe" }] 
}); 
</script> 
</body> 
</html>

Tôi nhận ra tôi có thể làm điều này với một mẫu, nhưng điều đó sẽ yêu cầu thêm phần tử html, vì bạn không thể thay đổi đánh dấu của chính td. Tôi muốn sử dụng một hàm để trả về các thuộc tính nếu được hỗ trợ.

Nguồn

2015-02-28 Chris

Bạn nói bạn không muốn sử dụng mẫu, nhưng tôi nghĩ bạn đang nói về mẫu cột.

Bạn có thể thay đổi đánh dấu của td bản thân bằng cách sử dụng một mẫu hàng:

<script id="template" type="text/x-kendo-template"> 
    <tr data-uid="#= uid #"> 
     # this.columns.forEach(function(col) { 
      var val = data[col.field], 
      css, 
      style = '' 
      cClasses = ''; 
      if (typeof col.attributes === 'function') { 
       css = col.attributes(data); 
       cClasses = css["class"]; 
       style = css.style 
      } 
     #   
      <td class='#= cClasses #' style='#= style #'> 
      #= data[col.field] # 
      </td> 
     # }) # 
    </tr> 
</script>

Đối với các vòng lặp để làm việc, bạn cần phải ràng buộc mẫu của bạn để lưới mặc dù:

var grid = $("#grid").kendoGrid({ 
    columns: [{ 
     field: "name", 
     title: "Name", 
     attributes: function (e) { 
      return { 
       "class": "table-cell", 
       style: e.name == "Jane Doe" ? 
         "background-color: red" : "background-color: green" 
      }; 
     } 
    }, { 
     field: "title", 
     title: "Title" 
    }], 
    dataSource: [{name: "Jane Doe", title: "Dr. Dr."}, 
       {name: "John Doe", title: "Senior Citizen"}] 
}).data("kendoGrid"); 

var template = kendo.template($("#template").html()).bind(grid); 
grid.setOptions({ 
    rowTemplate: template 
});

(demo)

là một thay thế, bạn cũng có thể tạo các thuộc tính như thế này:

{ 
    field: "name", 
    title: "Name", 
    attributes: { 
     "class": "# if(data.name === 'Jane Doe') { # red # } else { # green # } #" 
    } 
},

Điều này sẽ có lợi thế là không sử dụng mẫu hàng, nhưng bạn phải sử dụng cú pháp mẫu cho logic.

(demo)

Nguồn

2015-02-28 18:08:50

Nếu thuộc tính thuộc tính không hỗ trợ các chức năng, thì điều này sẽ giúp tôi gần như tôi sẽ nhận được. – Chris

bây giờ bạn nói nó, bạn có thể sử dụng các hàm trong các thuộc tính miễn là bạn không nhớ các dấu phân cách mẫu (và phải viết nó như là một chuỗi) –

Vui lòng thử với đoạn mã bên dưới.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Kendo UI Snippet</title> 

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/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/2014.3.1411/js/kendo.all.min.js"></script> 
    <style> 
     .greenBG { 
      background-color:green; 
     } 
     .redBG { 
      background-color:red; 
     } 
    </style> 
</head> 
<body> 

    <div id="grid"></div> 
    <script> 
     $("#grid").kendoGrid({ 
      columns: [{ 
       field: "name", 
       title: "Name", 
       attributes: function (e) { 
        return { 
         "class": "table-cell", 
         style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green" 
        }; 
       } 
      }], 
      dataSource: [{ name: "Jane Doe" }, { name: "John Doe" }], 
      dataBound: function() { 
       dataView = this.dataSource.view(); 
       for (var i = 0; i < dataView.length; i++) { 
        if (dataView[i].name === "Jane Doe") { 
         var uid = dataView[i].uid; 
         $("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("greenBG"); 
        } 
        else { 
         var uid = dataView[i].uid; 
         $("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("redBG"); 
        } 
       } 
      } 
     }); 
    </script> 
</body> 
</html>

Nguồn

2015-02-28 17:02:34

tôi nhận nó làm việc với một cái gì đó tương tự:. '$ ("Td") từng (function() { if ($ (this) .text () === "Jane Doe") { $ (this) .addClass ("tốt"); } }); 'nhưng tôi đã hy vọng không có vòng lặp. Chỉ một thuộc tính theo hàm. – Chris

Trong góc kendo gọi lại e không hoạt động

Sử dụng này

attributes: { 
        "ng-confirm-message": "{{this.dataItem.is_active ? \'Are you sure deactive ?\' : \'Are you sure active ?\'}}", 
        "confirmed-click": "vm.inlineSubmit(this.dataItem.toJSON() ,true)" 
       }

Nguồn

2015-10-25 09:18:13

Đối với Kendo-JQuery.

<div id="grid"></div> 
<script> 
$("#grid").kendoGrid({ 
    columns: [{ 
    field: "name", 
    headerAttributes: { 
     "class": "table-header-cell", 
     style: "text-align: right; font-size: 14px" 
    } 
    }] 
}); 
</script>

Và đây Kendo-MVC

.Columns(columns => 
       { 
        columns.Bound(c => c.ActiveReason).Title("ActiveReason").HeaderHtmlAttributes(new { @class = "table-header-cell" }); 
})

Nguồn

2018-02-05 15:08:51 MohammadSoori

Trong lưới kendo, tôi có thể đặt thuộc tính cột động bằng một hàm không?

Trả lời

Các vấn đề liên quan