0

这些代码用于从 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 !');
}

现在，问题是“更改密码”命令在单击时什么也不做。

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

谢谢！

4

2 回答 2

0

问题是您将“点击”处理程序设置为：

"click":"changeUserPwd"

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

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

您可以通过指定 a 的templateINSTEAD 来解决此问题click（您也可以删除自定义命令上的“名称”属性），如下所示：

[
  {"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>"
  }
]

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

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

然后这将开始工作。但是，没有“上下文”或事件传递给changeUserPwd函数，所以e传入的参数只是undefined.

更好的答案：

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

在successAJAX 调用的函数中，只需将clickfor each 命令替换为对函数的引用，而不是字符串。例子：

（这种语法可能不是 100% 正确的。我是在脑海中输入它。）

var customCommands = {
    changeUserPwd: function (e) { ... }
};

$.ajax({
    ...

    success: function (json) {
        var r = $.parseJSON(json);

        // for each response, if it has a 'click' specified, go find the function
        $.each(r, function () {
            if(r.click) {
                r.click = customCommands[r.click]; // get the function by its name.
            }
        });

        res=r;
    }

    ...
});

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

于 2013-09-07T14:47:29.760 回答
0

请尝试使用以下代码片段。也许它会帮助你。

<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
        }]
    });
});

于 2013-09-06T09:49:45.763 回答