如何在剑道网格列模板中将参数传递给 javascript？答案

【问题标题】：How do I pass parameters to javascript in a kendo grid column template?如何在剑道网格列模板中将参数传递给 javascript？
【发布时间】：2014-04-08 11:34:55
【问题描述】：

我有一个带有列模板的剑道网格。我尝试从当前行传递一个值作为我的 javascript 函数的参数。我的代码：

{
  field: "CrmTaskId",
  title: "Crm ", 
  template: '<a href="javascript:hrefTest(#=CrmTaskId#);" ># if( CrmTaskId==null) {#<span><span># } else {#<span>#: CrmTaskId#<span>#} #</a>'

}

hrefTest 是一个带有一个参数的 javascript 函数。但它不起作用。有什么想法吗？

【问题讨论】：

hrefTest(CrmTaskId) 或 hrefTest(data.CrmTaskId) 不工作
看看这个[post][1]...... [1]：stackoverflow.com/questions/18740487/…

标签： kendo-ui parameter-passing kendo-grid

【解决方案1】：

可以这样实现

.ClientTemplate("<a href='javascript: void(0);' 
 onclick=\"return YourJSFunction('#= OpportunityUrl #');\">#= OpportunityName #</a>")

这是列定义的一部分，所以它的意思是......制作 OpportunityName 可点击并传入 OpportunityUrl。 #= Field # 是从模型中提取值的语法。

【讨论】：

我不使用 mvc 助手。只有html和javascript。如何在javascript中定义客户端模板？
你试过把ClientTemplate()里面的东西放到template:上
参考此链接stackoverflow.com/questions/19819127/…

【解决方案2】：

使用这个：

{
   field: "Field",
   editable: true,
   title: "Title",
   template: showRelatedLink,
   allownull: true,
   width: 100
}

然后在你的函数中：

function showRelatedLink(container, options)
{
    var yourVariable = container.YourField;
}

【讨论】：

【解决方案3】：

我已尝试使用您的代码，但无法重现此问题。请创建新的 HTML/CSHTML 页面并检查它。

<!DOCTYPE html>
<html>
<head> 
<title>Test</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var movies = [
                    { "CrmTaskId": 1, "rating": 9.2, "year": 1994, "title": "The Shawshank Redemption"},
                    { "CrmTaskId": 2, "rating": 9.2, "year": 1972, "title": "The Godfather"},
                    { "CrmTaskId": null, "rating": 9, "year": 1974, "title": "The Godfather: Part II" },
                    { "CrmTaskId": '', "rating": 9.9, "year": 1874, "title": "The Godmother: Part III" }

                ];

function hrefTest(CrmTaskId)
{
    alert("CrmTaskId is: " + CrmTaskId);
}


$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
            data: movies,
            pageSize: 10
        },
        groupable: true,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true
        },
        columns: [{
            field: "CrmTaskId",
            title: "Crm"
        }, {
            field: "title",
            title: "title"
        },
    {
        template: '<a href="javascript:hrefTest(#=CrmTaskId#);" ># if( CrmTaskId==null) {#<span><span># } else {#<span>#: CrmTaskId#<span>#} #</a>'
    }
    ]
    });
});

</script>
</body>
</html>

请尝试以下代码 sn-p。

【讨论】：

您的代码正在运行。这个剑道网格问题。您不能使用与模板相同的列中的值。
您不能在一列中同时添加字段和模板。因为它们与 BoundColumn 和 TemplateColumn 相同。如果需要，请为此使用 ClientTemplate。

【解决方案4】：

您也可以将字段传递给这样的函数：

网格：

    columns: [
       { field: "ProductTypeID", title: "Type", template: "#=product_type_to_name(ProductTypeID)#" },
    ]

功能：

function product_type_to_name(product_type_id) {
    console.log(product_type_id);
    var name = "";
    // convert ID to name
    return name;
}

【讨论】：

【解决方案5】：

我试过这个 { field: "DisplayChangedFrom", title: "From", template:"#=generateTemplate(DisplayChangedFrom)# },

然后函数 function generateTemplate(items) { var html = "<ul>"; if (items !== null && items.length > 0) { for (var x = 0; x < items.length; x++) { html += "<li>"; html += items[x]; html += "</li>"; } } html += "</ul>"; return html; };

【讨论】：

点评来源：嗨，这篇文章似乎没有为问题提供quality answer。请编辑您的答案并解释您的代码。