0

クリックすると、データ行の値の一部を配列にプッシュするボタンがあります。選択/非選択の状態に基づいてテキストを入れ替えます。これはうまく機能しますが、ユーザーがデータグリッドをページングしたりフィルター処理したりすると、選択された値は残りますが、ボタンのテキストは「追加」状態に戻ります。ボタンのコードは次のとおりです。

    command: [
                { 
                   name: "Select", template:  "<a href='\\\#' class='k-button k-button-icontext btn-destroy k-grid-Select'>#= this.Selected === true ? 'Remove' : 'Add' #</a>",
click: function (e) {
                     var curBtn = $(e.target);
                     var tr = $(e.target).closest("tr"); // get the current table row (tr)
                     var data = this.dataItem(tr);
                     console.log(data);
                     var selected = data.Selected;

                     if (selected == false || selected == undefined) {
                         data.Selected = true;
                         curBtn.html('remove');
                     }
                     else { 
                         data.Selected = false;
                         curBtn.html('add');
                     }
                     console.log(curBtn);
                     data.refresh();
             }

         }],

テンプレートに対してこれを試しましたが、無効なテンプレート エラーが発生し続けました。この原因は、データ セルの外部にある項目に直接アクセスできないことが原因だと思いますか? 

 template:  "<a href='\\\#' class='k-button k-button-icontext btn-destroy k-grid-Select'>#= Selected == true ? Remove : Add #</a>"

いつものようにどんな助けでも大歓迎です!! ありがとう、ハッピーコーディング！

編集：

ここにフィドルがあります： http://jsfiddle.net/rKBZq/27/

これは、私がやろうとしていることのかなりの代表です。このデモと同じように、データはローカルです。したがって、基本的には、行の選択されたプロパティに基づいて、ボタンのテキストを「追加」または「削除」に変更し、クリックアクションで行とデータを適切に更新したいと考えています...

私が観察したことは、console.log(data) 選択した値が実際に更新されたときです...ただし、グリッドセルは現在です。とにかく私は通常それを非表示にしているので、それは問題ありません...テンプレートにスラッグした this.Selected が、バッキングデータではなくテーブル行からプルされている可能性はありますか? -- 編集: this.refresh() を追加すると、テーブルも更新されますが、そうするとボタンが再レンダリングされません...コマンドボタンも更新して反映させ、ページングまたはフィルタリング中に保存します...だからこれデータが更新されたときに更新を呼び出すと、ボタンが更新/再レンダリングされないのはなぜですか?

もう1つの観察は、これが機能する場合、curBtn.html('Add')を実行する必要がないことは明らかです...データの変更に応じてボタンの状態を交換したいと考えています...

4

1 に答える 1

2

申し訳ありませんが、私が知る限り、あなたが使いたいことをすることはできませんcommand。Kendo UI Grid のドキュメントで、コマンド内の への参照を見つけることができません。templateまた、テンプレートがいつ展開されるかを確認するためにトレースを追加すると、グリッドが最初にロードされたときにのみ実行されることがわかります。

Selected初期状態の一部を に設定するとtrue、button実際には正しく初期化されていないことを簡単に確認できます。

しかし、これは、同様のことを行うことができないという意味ではありません (同じ結果が得られます)。

私が提案するのは、それを として定義する代わりに、 としてcommand定義してから、fieldあなたの を使用することtemplateです。

これを行うと、まだ解決すべき問題がいくつかあります。

  1. clickフィールドにはイベントがないため、これを行うにはグリッドの初期化後にコードを追加する必要があります。
  2. クリックすると、フィールドSelectedが編集モードに入らないようにしてください。を使用してこれを試すとeditable: false、 の値を変更することはできません。そのため、私が行っているのは、空として定義してから、必要なものに を定義Selectedするというちょっとしたトリックです。fieldtitle
  3. DataSourceusingでフィールドを更新すると、data.Selected = true実際にはモデルに設定されていないため、ページングすると失われます。したがってset、値の更新に使用する必要があります。

これを行うと、コードは次のようになります。

var grid = $("#grid").kendoGrid({
    dataSource: suppds,
    filterable: true,
    sortable  : true,
    height    : "600px",
    pageable  : {
        input  : true,
        numeric: false
    },
    save      : function () {
        this.refresh();
    },
    editable  : true,
    columns   : [
        {
            field : "",
            title : "Selected",
            template: "<a href='\\\#' class='k-button k-button-icontext btn-destroy k-grid-Select'>#= data.Selected == true ? 'Remove' : 'Add' #</a>",
            width  : "100px"
        },
        { field: "OrderDate", title: "Date", format: "{0:MM/dd/yyyy}" },
        {
            field     : "Title", title: "Title",
            filterable: {
                extra    : false,
                operators: {
                    string: {
                        contains: "Contains"
                    }
                }
            }
        },
        { field: "Records", title: "Records" },
        { field: "Selected"  }
    ]
}).data("kendoGrid");

$(grid.tbody).on("click", ".k-grid-Select", function (e) {
    var curBtn = $(e.target);
    var tr = $(e.target).closest("tr"); // get the current table row (tr)
    var data = grid.dataItem(tr);
    var selected = data.Selected;
    console.log(curBtn);
    console.log(data);
    if (selected == false || selected == undefined) {
        data.set("Selected", true);
        curBtn.text('Remove');
    }
    else {
        data.set("Selected", false);
        curBtn.text('Add');
    }
});

ここで変更された JSFiddle : http://jsfiddle.net/OnaBai/rKBZq/39/

于 2013-10-01T00:10:04.280 に答える