Question

# if (((data.Price1 - data.Price2) / data.Price2< 0.02)) { #
    <table class="bg-success">
        <tr>
            <td width="20px"><label title="Price1"></label></td>
            <td width="90%">#= kendo.toString(Price1, 'n') || "0" #</td>
        </tr>
    <tr>
        <td width="20px"><img title="Price2" /></td>
        <td width="90%">#= kendo.toString(Price2, 'n') || "0" #</td>
    </tr>
</table>
# } else { #
<table class="bg-danger">
    <tr>
        <td width="20px"><label title="Price1"></label></td>
        <td width="90%">#= kendo.toString(Price1, 'n') || "0" #</td>
    </tr>
    <tr>
        <td width="20px"><img title="Price2" /></td>
        <td width="90%">#= kendo.toString(Price2, 'n') || "0" #</td>
    </tr>
</table>
# } #

大家好，

上面是我添加的kendo列模板，但是我得到了无效的模板错误，我假设是由于我在if条件中添加的计算。我需要这个计算来进行列格式化。请让我知道我在这里失踪了什么或我在哪里错了。提前致谢。

Answer 1

我试图重现您的问题，但无济于事。我在下面分享了我的完整代码，所以请尝试使用它，如果有任何疑虑，请告诉我。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid">
    </div>
    <script>
        var products = [{
            ProductID: 11,
            ProductName: "Chai",
            Price1: 13.0,
            Price2: 11.0,
        }, {
            ProductID: 22,
            ProductName: "Chang",
            Price1: 19.0,
            Price2: 11.0,
        }, {
            ProductID: 33,
            ProductName: "Aniseed Syrup",
            Price1: 1.0,
            Price2: 11.0,
        }, {
            ProductID: 44,
            ProductName: "Chef Anton's Cajun Seasoning",
            Price1: 1.0,
            Price2: 11.0,
        }, {
            ProductID: 55,
            ProductName: "Chef Anton's Gumbo Mix",
            Price1: 1.0,
            Price2: 11.0,
        }];
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    data: products,
                    schema: {
                        model: {
                            id: "ProductID",
                            fields: {
                                ProductName: {
                                    type: "string"
                                }
                            },
                        }
                    },
                    pageSize: 10
                },
                sortable: true,
                dataBound: function (e) {

                },
                filterable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                columns: [
                    { field: "ProductID", title: "ProductID" },
                    { field: "ProductName", title: "ProductName" },
                    {
                        title: "Temp",
                        template: '# if (((Price1 - Price2) / Price2< 0.02)) { #' +
                                  '<table class="bg-success">' +
                                    '<tr>' +
                                        '<td width="20px"><label title="Price1"></label></td>' +
                                        '<td width="90%">#= kendo.toString(Price1, "n") || "0" #</td>' +
                                    '</tr>' +
                                    '<tr>' +
                                     '   <td width="20px"><img title="Price2" alt="Price2" /></td>' +
                                      '  <td width="90%">#= kendo.toString(Price2, "n") || "0" #</td>' +
                                    '</tr>' +
                                    '</table>' +
                                    '# } else { # ' +
                                    ' <table class="bg-danger">' +
                                    '<tr>' +
                                        '<td width="20px"><label title="Price1"></label></td>' +
                                        '<td width="90%">#= kendo.toString(Price1, "n") || "0" #</td>' +
                                    '</tr>' +
                                    '<tr>' +
                                        '<td width="20px"><img title="Price2" /></td>' +
                                        '<td width="90%">#= kendo.toString(Price2, "n") || "0" #</td>' +
                                    '</tr>' +
                                  '</table>' +
                                  ' # } # ',
                    },
                    { command: ["edit", "destroy"], title: "&nbsp;" }

                ],
                editable: "inline"
            });
        });

    </script>
    <style>
        .bg-success {
            background-color: green;
        }

        .bg-danger {
            background-color: red;
        }
    </style>
</body>
</html>

修改1：对于列模板

<!DOCTYPE html>
<html>
<head>
    <title>Jayesh Goyani</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid">
    </div>
    <script type="text/x-kendo-template" id="priceColumnTemplate">
        # if (((Price1 - Price2) / Price2< 0.02)) { #
                                  <table class="bg-success">
                                    <tr>
                                        <td width="20px"><label title="Price1"></label></td>
                                        <td width="90%">#= kendo.toString(Price1, "n") || "0" #</td>
                                    </tr>
                                    <tr>
                                        <td width="20px"><img title="Price2" alt="Price2" /></td>
                                        <td width="90%">#= kendo.toString(Price2, "n") || "0" #</td>
                                    </tr>
                                    </table>
                                    # } else { # 
                                     <table class="bg-danger">
                                    <tr>
                                        <td width="20px"><label title="Price1"></label></td>
                                        <td width="90%">#= kendo.toString(Price1, "n") || "0" #</td>
                                    </tr>
                                    <tr>
                                        <td width="20px"><img title="Price2" /></td>
                                        <td width="90%">#= kendo.toString(Price2, "n") || "0" #</td>
                                    </tr>
                                  </table>
                                   # } # 
    </script>
    <script>
        var products = [{
            ProductID: 11,
            ProductName: "Chai",
            Price1: 13.0,
            Price2: 11.0,
        }, {
            ProductID: 22,
            ProductName: "Chang",
            Price1: 19.0,
            Price2: 11.0,
        }, {
            ProductID: 33,
            ProductName: "Aniseed Syrup",
            Price1: 1.0,
            Price2: 11.0,
        }, {
            ProductID: 44,
            ProductName: "Chef Anton's Cajun Seasoning",
            Price1: 1.0,
            Price2: 11.0,
        }, {
            ProductID: 55,
            ProductName: "Chef Anton's Gumbo Mix",
            Price1: 1.0,
            Price2: 11.0,
        }];
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    data: products,
                    schema: {
                        model: {
                            id: "ProductID",
                            fields: {
                                ProductName: {
                                    type: "string"
                                }
                            },
                        }
                    },
                    pageSize: 10
                },
                sortable: true,
                dataBound: function (e) {

                },
                filterable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                columns: [
                    { field: "ProductID", title: "ProductID" },
                    { field: "ProductName", title: "ProductName" },
                    {
                        title: "Temp",
                        template: kendo.template( $( '#priceColumnTemplate' ).html()),
                    },
                    { command: ["edit", "destroy"], title: "&nbsp;" }

                ],
                editable: "inline"
            });
        });

    </script>
    <style>
        .bg-success {
            background-color: green;
        }

        .bg-danger {
            background-color: red;
        }
    </style>
</body>
</html>

在Kendo网格列模板中添加计算

1 个答案: