Question

这些代码用于从ajax获取命令数据，它正在工作：

function command(){
    var res;
    $.ajax({
        url: "../data/sys_user.service.php?method=getUserCommand&onpage="+"<?php echo EL::CurPage(); ?>",
        async:false,
        success: function (json) {var r = $.parseJSON(json);res=r;},
        error: function (jqXHR, textStatus, errorThrown) {alert(jqXHR.responseText);},
        complete: function(){}
    });
    return res;
};

函数返回json数据，如：

[
{"id":22,"text":"Edit","name":"edit"},
{"id":23,"text":"Remove","name":"destroy"},
{"id":45,"text":"Change Password","name":"changeUserPwd","click":"changeUserPwd"}
]

当然，Kendo-ui网格视图可以使用结果，并且网格命令“编辑”和“删除”正在工作：

.....
    columns: [
        { field: "id", title:"#", width:20,filterable: false},
        { field: "username", title:"Username", width:100},
        { field: "userpwd", title:"Password", width:200, filterable: false, hidden:true},
        { field: "name", title:"Name", width:100 },
        { field: "email", title:"E-Mail" ,width:200 },
        { command: command(),},
    ],
.....



function changeUserPwd(e){
    alert('Change Password !');
}

现在，问题是命令“更改密码”在单击时不执行任何操作。

如何在使用远程数据的命令上绑定事件。

谢谢！

Answer 1

请尝试使用以下代码段。可能它会帮助你。

<script>

function changeUserPwd(year) {
    alert(year);
}

var movies = [
                    { "rank": 1, "rating": 9.2, "year": 1994, "title": "The Shawshank Redemption", "click": "changeUserPwd" },
                    { "rank": 2, "rating": 9.2, "year": 1972, "title": "The Godfather", "click": "changeUserPwd" },
                    { "rank": 3, "rating": 9, "year": 1974, "title": "The Godfather: Part II", "click": "" }

                ];

$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
            data: movies,
            pageSize: 10
        },
        groupable: true,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true
        },
        columns: [{
            field: "rank",
            width: 90,
            title: "rank"
        }, {
            field: "title",
            width: 90,
            title: "title"
        },
        {
            template: "# if( click !== '') { # <input class='k-button' type='button' onclick='#: click #(#: year #);' value='click me' /> # } else {#<span>Click Field is empty<span>#} #", width: 90
        }]
    });
});

Answer 2

问题在于您将“click”处理程序设置为：

"click":"changeUserPwd"

这是string，而不是对function的引用。

Jayesh的答案显示了一种方法，可以使用列模板添加一个按钮，该按钮执行与您指定的名称相同的功能。但是，我认为这不适用于内置命令。

您可以通过指定template的{{1}} INSTEAD来解决此问题（您也可以删除自定义命令中的“name”属性），如下所示：

click

并将函数的范围移到窗口中（以防万一。有时会出现奇怪的范围问题，因为它被包装在一个Kendo模板中。）

[
  {"id":22,"text":"Edit","name":"edit"},
  {"id":23,"text":"Remove","name":"destroy"},
  {
    "text":"Change Password",
    "template": "<a class='k-button k-button-icontext href='\\#' onclick='window.changeUserPwd()'><span></span>#=text#</a>"
  }
]

然后这将开始工作。但是，没有“上下文”或事件传递给window.changeUserPwd = function (e){ alert('Change Password !'); }函数，因此传入的changeUserPwd参数将只是e。

更好的答案：

在我考虑更多之后，这是一个更好的解决方案：

在AJAX调用的undefined函数中，只需将每个命令的success替换为函数的引用，而不是字符串。例如：

（这种语法可能不是100％正确。我正在顶着它打字。）

click

现在Kendo Grid应该正确绑定命令处理程序，因为它们实际上是对函数的引用而不是字符串。

如何在kendoui web gridview自定义命令上绑定单击事件

2 个答案: