Question

我有一个Kendo Grid，我将它动态绑定到JSON对象。

在 generateColumns 功能中，我想调用 getKendoColor 功能。但是，我需要传递列单元格值。在下面的代码中，我强迫进入＆＃39; RED＆＃39;展示它应该如何运作。

如何将列值传递给此getKendoColor函数？

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
                                                                                                 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
</head>
<body>
  

    <div id="grid" style="width:1000px;"></div>

    <script>
      var isDateField =[];
      var isTaskField =[];
      
      $.ajax({
        url: "http://www.mocky.io/v2/59c4dd1e4000005400b25ba7",
        dataType: "jsonp",
        success: function(result) {
          generateGrid(result);
        }
      });

      function generateGrid(response) {
        var model = generateModel(response);
        var columns = generateColumns(response);

        var grid = $("#grid").kendoGrid({
          dataSource: {
            transport:{
              read:  function(options){
                options.success(response.Table);
              }
            },
            pageSize: 5,
            schema: {
              model: model
            }
          },
          columns: columns,
          pageable: true,
          editable:false  
        });
      }

			function generateColumns(response) {
            var columnNames = response["columns"];
            return columnNames.map(function (name) {
                if (isTaskField[name]) {
                    return { field: name, template: '#= getKendoColor("RED") #', format: (isDateField[name] ? "{0:D}" : "") };
                }
                else
                    return { field: name, format: (isDateField[name] ? "{0:D}" : "") };
            })
      }
      

      function generateModel(response) {

        var sampleDataItem = response["Table"][0];

        var model = {};
        var fields = {};
        for (var property in sampleDataItem) {
          var itemValue = sampleDataItem[property];

          if (property.indexOf("ID") !== -1) {
            model["id"] = property;
          }
          var propType = typeof sampleDataItem[property];

          if (propType === "number") {
            fields[property] = {
              type: "number",
              validation: {
                required: true
              }
            };
            if (model.id === property) {
              fields[property].editable = false;
              fields[property].validation.required = false;
            }
          } else if (propType === "boolean") {
            fields[property] = {
              type: "boolean"
            };
          } else if (propType === "string") {
            var parsedDate = kendo.parseDate(sampleDataItem[property]);
            if (parsedDate) {
              fields[property] = {
                type: "date",
                validation: {
                  required: true
                }
              };
              isDateField[property] = true;
            } else {
              fields[property] = {
                validation: {
                  required: true
                }
              };
              if ((property !== "Entity") && (property !== "Period") && (property !== "Level"))
              {
                isTaskField[property] = true;
              }
            }
          } else {
            fields[property] = {
              validation: {
                required: true
              }
            };
          }
        }

        model.fields = fields;

        return model;
      }
      
      function getKendoColor(OverallStatus) {

        OverallStatus = OverallStatus.toUpperCase();
        //alert(OverallStatus);

        var htmlRed = kendo.format('<div class="text-center"><div style="color:red"> <i class="fa fa-circle fa-lg"></i> </div> </div>');
        var htmlGreen = kendo.format('<div class="text-center"><div style="color:green"> <i class="fa fa-circle fa-lg"></i> </div> </div>');
        var htmlOrange = kendo.format('<div class="text-center"><div style="color:orange"> <i class="fa fa-circle fa-lg"></i> </div> </div>');
        var htmlYellow = kendo.format('<div class="text-center"><div style="color:yellow"> <i class="fa fa-circle fa-lg"></i> </div> </div>');

        switch (OverallStatus) {
          case "RED":
            return htmlRed;
          case "GREEN":
            return htmlGreen;
          case "ORANGE":
            return htmlOrange;
          case "YELLOW":
            return htmlYellow;
          case "CREATED":
            return htmlRed;
          case "APPROVED":
            return htmlGreen;
                             }
      }      
    </script>
</body>
</html>

＆＃13;

https://dojo.telerik.com/AgALaK/2

Answer 1

您可以将模板本身设置为一个函数，在您的情况下，对getKendoColor稍作更改就可以了：

function getColumnTemplate(dataItem) {
    var OverallStatus = dataItem.OverallStatus.toUpperCase();

    //All the rest of your getKendoColor function
    return someHTML;
}

然后只使用此功能作为模板。

return columnNames.map(function (name) {
                    if (isTaskField[name]) {

                        return { field: name, template: getColumnTemplate, format: (isDateField[name] ? "{0:D}" : "") };
                    }
                    else
                        return { field: name, format: (isDateField[name] ? "{0:D}" : "") };
                })

Kendo UI Grid - 列模板中的调用函数

1 个答案: