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

以下のコード スニペットを試してみてください。それはあなたを助けるかもしれません。

<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 に答える
0

問題は、「クリック」ハンドラーを次のように設定していることです。

"click":"changeUserPwd"

これは でありstring、 への参照ではありませんfunction。

Jayesh's answer は、指定したものと同じ名前の関数を実行するボタンを追加する列テンプレートを持つ方法を示しています。ただし、組み込みコマンドではうまく機能しないと思います。

template次のようにINSTEAD を指定することで、これを回避できますclick(カスタム コマンドの "name" プロパティを削除することもできます)。

[
  {"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 に答える