javascript - 在 Kendo 网格列模板中添加计算-6ren

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

转载作者：行者123 更新时间：2023-11-27 22:58:37

# 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>
# } #

大家好，

上面是我添加的剑道列模板，但我收到无效模板错误，我假设这是由于我在 if 条件中添加的计算所致。我需要这个计算来进行列格式设置。请让我知道我在这里缺少什么或者我在这里出错的地方。提前致谢。

最佳答案

我尝试重现您的问题，但没有成功。我在下面分享了我的完整代码，因此请尝试使用它，如果有任何问题请告诉我。

<!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>

关于javascript - 在 Kendo 网格列模板中添加计算，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37349825/

文章推荐： javascript - 为什么使用 JavaScript 变量返回零 strtotime？

文章推荐： javascript - moment.js 获取 hh :mm:ss from a decimal nr

文章推荐： javascript - 复选框初始化(具体化)

文章推荐： css - 我如何添加 CSS repeat y 使边框垂直

c++ - 模板的特化模板的定义
namespace std { template <> class hash{ public : size_t operator()( cons
javascript - 出于 SEO 原因，对相同内容使用 Django 模板 + Vue 模板
我正在构建一个 Javascript 交互性有限的 Django 应用程序，并且正在研究如何将 Vue 模板与 Django 模板合并以实现相同的内容。想象一个无限滚动的页面，其中 SEO 非常重要
javascript - 外部类调用 LitElement 组件方法(传递 html 模板)，组件方法更新其 html 模板
我需要一个由游戏逻辑组成的外部类，调用 LitElement 组件，并向其传递一个 html 模板文字，该组件将使用该文字来更新其自己的 html 模板文字的一部分。在下面的代码中，您将看到组件的一
ember.js - 是否可以使用脚本标签加载 Handlebars 模板？或者在 Ember.js 中以编程方式定义 Handlebars 模板
很简单，我不想在 html 文件中定义所有 Handlebars 模板我试过了但这并没有奏效。我是否可以不以编程方式定义模板，甚至只是加载 Handlebars 文件，以便我可以重用，而且我觉得
templates - JQuery 1.5 模板 : JQuery 1. 5 未呈现我的模板。如何调用 JQuery 1.5 模板？
在此代码中，j 正确地成为对象:j.name、j.addr、j.city、j.state 和 j.zip。但是，成功函数有一个 JavaScript 错误 .tmpl() 不是函数。 {{t
Django 模板
Django模板不会？点进来，总结了模板语法传值取值、过滤器和自定义过滤器、模板标签的分类、中间件403报错如何解决、如何继承模板~👆 Django 模板模板传值取值后端传值键值对形式：{‘n
C++模板
哈喽大家好，我是鹿九丸 \color{red}{鹿九丸}鹿九丸，今天给大家带来的是C++模板。如果大家在看我的博客的过程中或者学习的过程中以及在学习方向上有什么问题或者想跟我交流的话可以加我的企
PHP 模板
我正在用 PHP 编写一个简单的模板层，但我遇到了一些困难。目前它是这样工作的: 首先，我使用 fetch_template 从数据库中加载模板内容 - 这可行(如果您有兴趣，我会在启动时收集所有模板
Django 模板
我正在制作有关模板的 Django 教程。我目前处于此代码: from django.template import Template, Context >>> person = {'name': '
Jquery 模板
我正在使用 Jquery 模板来显示传入的 JSON 数据我想将模板加载到可缓存的外部文件中。我该怎么做？更新 http://encosia.com/2010/12/02/jquery-templa
Python 模板
这是我的观点.py: from django.http import HttpResponse from django.template.loader import get_template from
JavaScript 模板
我试图说服一位同事在项目的前端使用 Mustache/Hogan，我提出了以下建议: 有一个 templates.js 文件，大致如下所示: var tpl_alert = '{{msg}}'; va
函数中的c++模板
我想创建一个通用的数组函数。在我的 API 中，我有一个通用容器，我需要将其转换为正确的类，但我想让它通用 template void UT::printArray(CCArray* arr, T t
JavaScript 模板
有谁知道是否有办法在 Genshi 中创建 javascript 模板？我的意思是，我需要一个 .js 文件，可以在其中使用等指令。等等。有什么想法吗？谢谢! 最佳答案你可以直接在html中这
HTML 模板
我想知道是否可以设置某种 HTML 模板系统，基本上我有 3 个不同的文件: - header.html - footer.html - landing.html(landing.html 是包含页面
HTML 模板
我正在尝试构建以下 HTML 模板: 这很简单，如果我使用红色容器 1-4，语法如下: 1 2 3 4 5 6 7 8 9 https://jsfi
模板的c++模板
#include "boost/numeric/ublas/matrix.hpp" using namespace boost::numeric::ublas; template class Lay
类中的c++模板
我在一个类中有一个函数，它传递了一个函数及其参数，然后将它们绑定(bind)到一个函数调用中并调用该函数等。这已经被快速组合在一起以测试我知道代码不是很好的概念。 class Profiling {
用于十进制和任意基数之间转换的c++模板
是否有一个 c++ 结构或模板(在任何库中)允许我在十进制和任何其他基数之间进行转换(很像 bitset 可以做的)？最佳答案是的，你可以使用unsigned int: unsigned int
Elixir 模板 - 遍历具有迭代器值的列表
来自其他编程语言，许多像我一样的人会感到惊讶。我有一个简单的问题。我有一个列表——比如说，用户。我想遍历用户并显示一些信息。非常简单，直到我被这个难住了: 使用一个 eex 模板，我试图这样做:

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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