23

JavaScriptでグリッド内の行の値を変更して、グリッドと基になるデータソースで「ダーティ」としてマークされるようにするにはどうすればよいのでしょうか。

たとえば、連絡先/顧客のリストがあります。FirstName / LastName/IsPrimaryContactの3つのフィールドがあります。プライマリコンタクトは1つしか存在できないため、レコードでプライマリコンタクトがtrueに設定されている場合、データソースをループし、プライマリとして設定されている他のすべてのコンタクトをfalseに設定するJavaScriptコードがあります。

JavaScriptはすべて正常に起動し、データフィールドは正しく設定されますが、2つの問題があります。1。グリッドがデータソースに対して内部で行った変更で更新されない2.変更されたレコードが「ダーティ」としてマークされないためDatasource.sync（）を呼び出したときに同期されません

レコードのダーティフィールドを手動で設定することで2番目の問題を修正できますが、これは正しくないようです。UIとデータソースの両方で処理されるように、グリッドレベルでフィールドを更新する必要があるように感じます。

これについてどうやって行くかについてのアイデアはありますか？

ありがとう

4

6 に答える 6

43

基本的に、レコードを更新する場合は、モデルのsetメソッドを使用する必要があります。たとえば、dataSourceの最初のレコードを更新するには、次のように更新する必要があります。

var firstItem = $('#GridName').data().kendoGrid.dataSource.data()[0];
firstItem.set('FirstName','The updated Name');

上記は自動的にフラグをダーティとしてマークし、変更があることをグリッドに通知するため、グリッドは自動的に更新されます。

また、特定の行に関連するオブジェクトを直接取得する場合は、グリッドのdataItemメソッドを使用できます。

于 2012-11-11T07:33:54.257 に答える
7

私はそれを非常にシンプルで効果的な方法で行います：

 var employee = employeeDataSource.get(employeeId);
     employee.dirty = true;  // set it as dirty
     employeeDataSource.sync();  //Tell the DataSource object to save changes

これは古い質問ですが、同じ問題を抱えている人に役立つことを願っています。

于 2014-09-24T13:12:31.573 に答える
4

上記のPechkaの回答に続いて、編集したセルにダーティフラグを付けるためのコードを追加しました。

これが機能するために列に必要な私のかみそりのコードです。後でjqueryセレクターで使用できるようにクラス名を追加しました。

columns.Bound(r => r.RoomRate).HtmlAttributes(new { @class = "grid-allotment-roomrate" });

サーバー側からのデータ取得が成功した後、セルを更新し、編集したセルにマークを付けるためのJqueryコードを次に示します。

var dataSource = $("#grid-allotments").data("kendoGrid").dataSource;
var data = dataSource.data();
$.each(data, function (index, rowItem) {
    var checkbox = $("#checkbox_" + rowItem.RoomTypeId + "_" + rowItem.Date.getTime());
    if (checkbox != null && checkbox.is(':checked')) {
        $.ajax({
            url: "RackRate/GetRackRateForRoomTypeOn",
            type: "POST",
            data: { roomTypeId: rowItem.RoomTypeId, date: rowItem.Date.toUTCString() },
            success: function (result) {
                data[index].set('RoomRate', result);
                $('tr[data-uid="' + rowItem.uid + '"] .grid-allotment-roomrate').prepend('<span class="k-dirty"></span>');
            }
        });
    }
});

以下は、ダーティフラグのハイライトの原因となるコード行です。

$('tr[data-uid="' + rowItem.uid + '"] .grid-allotment-roomrate').prepend('<span class="k-dirty"></span>');
于 2013-01-12T04:33:43.310 に答える
2

私はそれをこのように使用します-少なくともチェックボックスでは。[編集]ボタンを使用して列を次のように設定します。

columns.Command(command => {command.Edit().HtmlAttributes(new { id = "btnEdit_" + "${Id}" }); }).Width(100).Hidden(true);

そして、最初の列をクリックすると（ハイパーリンク付きの画像があります）、onclick関数を使用して、プログラムで[編集]ボタンをクリックし、チェックボックスをクリックしてから、[更新]ボタンをクリックします。おそらくもっと「古い学校」ですが、私自身、それを更新する場合と同じ順序に従っていることを知っているのが好きです。

オブジェクト（ "this"）を渡すので、表示されたときに行とチェックボックスを取得できます。新しいステータスは0または1です（ただし、このデモでは実際には必要ない、それを使用するコードがあるので、簡単にするために、その部分を関数から除外しています）、およびそのアイテムのID：

columns.Bound(p => p.IsActive).Title("Active").Width(100).ClientTemplate("# if (IsActive == true ) {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '0', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_1.png /></a> #} else {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '1', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_0.png /></a> #}#");

function changeCheckbox(obj, status, id) {
    var parentTr = obj.parentNode.parentNode;
    $('[id="btnEdit_' + id + '"]').click();

    parentTr.childNodes[5].childNodes[0].setAttribute("id", "btnUpdate_" + id); // my Update button is in the 6th column over
    parentTr.childNodes[0].childNodes[0].setAttribute("id", "chkbox_" + id);
    $('[id=chkbox_' + id + ']').click().trigger("change");
    $('[id=chkbox_' + id + ']').blur();

    var btnUpdate = $('[id="btnUpdate_' + id + '"]');
    $('[id="btnUpdate_' + id + '"]').click();

}

上記のコードは、もちろん、チェックボックスが最初の列にあることを前提としています。それ以外の場合は、childNodes[0]そのchkbox setAttribute行の最初の行を、それが置かれている列から1を引いた値に調整します。これは、ゼロからカウントを開始するためです。

于 2014-10-22T05:06:17.027 に答える
2

私にとってはこれで動作します（グリッドをインスタンス化する必要はありません）：

   select: function(e) {
           console.log("select");
           var item = e.item;
           var text = item.text();
           var index = item.index();
           console.log(item);
           console.log(text);
           console.log(index);
           var dataItem = this.dataItem(index);
           console.log(dataItem);
           // SET RETURNED VALUES FOR MODEL
           options.model.set("actionName.id", dataItem.id);
         }
于 2014-11-26T12:10:45.440 に答える
0

set("fieldname",value)グリッドを自動的に更新します。更新を行わなくても、UI値とフィールド値の両方を更新する簡単な方法が1つあります。たとえば、次のようにします。

    data.FieldName = "Whatevervalue";
    $(currentrow.children()[getColumnIndex("FieldName")]).text("Whatevervalue");

    function getColumnIndex(columnName) {
    var index;
    var columns = $("#grid").data("kendoGrid").columns;
    for (var i = 0; i < columns.length; i++) {
        if (columns[i].field == columnName) {
            index = i;
            return index;
        }
    }
}

    var data = $grid.data("kendoGrid")._data;
    var currentrow = $grid.data("kendoGrid").tbody.find("tr[data-uid='" +      data[i].uid + "']");

お役に立てれば

于 2015-03-09T15:22:11.540 に答える