0

ユーザーがjqxGridで行を変更または編集したときにobservableArrayのオブジェクトを変更するこの動作を防ぐ方法. 私はユーザーのノックアウト観測可能な配列を持っています。各ユーザーはすべて観測可能なプロパティであり、その観測可能な配列をjqxGrid(jqWidgetsから)にバインドします。そして、グリッドでユーザー値を更新すると、オブザーバブル配列で、その項目がこのユーザーのオブザーバブルの値を含むオブジェクトに置き換えられます。

以下は私のコードです:
HTML セクション:

<div class="container">
    <div id="jqxGrid"
        data-bind="jqxGrid: {
        source: Users,
        editable: true,
        width: '100%',
        selectionmode: 'singlecell',
        columns: [
            { text: 'IsChecked', columntype: 'checkbox', dataField: 'IsChecked', width: '10%' },
            { text: 'FirstName', dataField: 'FirstName', width: '40%', editable: false, sortable: true },
            { text: 'LastName', dataField: 'LastName', width: '40%', editable: true, sortable: true }
        ]
    }">
    </div>
</div>

Javascript コード: (Users 配列の作成、ViewModel の初期化、ko.applyBindings の呼び出し。)

function UserModel (user) {
    
    var self = this;

    self.IsChecked = ko.observable(false); // later I will use this proerty in other place
    self.Username = ko.observable(user.Username);
    self.FirstName = ko.observable(user.FirstName);
    self.LastName = ko.observable(user.LastName);

    // I want to put a isDirty property here
}

var initialUsers = [
    new UserModel({ Username: 'JohnMicrosoft', FirstName: 'John', LastName: 'Microsoft' }),
    new UserModel({ Username: 'JohnGoogle', FirstName: 'John', LastName: 'Google' }),
    new UserModel({ Username: 'JohnApple', FirstName: 'John', LastName: 'Apple' }),

];

var viewModel = null;
$(document).ready(function () {

    viewModel = new UserViewModel(initialUsers);
    ko.applyBindings(viewModel);

});

function UserViewModel(initialUsers) {
    var self = this;

    self.Users = ko.observableArray(initialUsers);
};

この画像は、IsChecked チェックボックスの最初の行をクリックした後に値がどのように変化するかを示しています。

ユーザーのオブザーバブル配列を参照してください。アイテム 0 の値はオブザーバブルです。

jqxGridの最初の行のIsCheckedチェックボックスをクリックした結果 ここに画像の説明を入力

問題は、いくつかの関数を UserModel オブジェクトに追加したいということと、ページの他の部分でそれらを使用したいので、観察可能なものを保持したいということです。私はこれに何日も取り組んできましたが、何をすべきかわかりません。助けていただければ幸いです。ありがとう。

4

1 に答える 1

0

似たようなものを作りました。多分それはあなたを助けることができます：

    var Goods = function (obj) {
    var name = ko.observable(obj.name);
    var sales = ko.observable(obj.sales);
    var price = ko.observable(obj.price);
    var extra = ko.observable(obj.extra);
    var id = ko.observable(obj.id);

    name.subscribe(alert('name changed'));

    return {
        name: name,
        sales: sales,
        price: price,
        extra: extra,
        id: id
    };
};

var items = ko.observableArray([
new Goods({ id:  1, name: "Furious Lizard", sales: 152, price: 25.00 }),
new Goods({ id:  2, name: "Indifferent Monkey", sales: 1, price: 99.95 }),
]);

var source = {
localdata: items,
datatype: 'local'
};

ビューにはこれしかありません： <div id="jqxgrid"></div>

ドキュメント準備機能で、グリッドを初期化しました。

$("#jqxgrid").jqxGrid({ source: source, .... });

于 2015-03-04T14:51:38.170 に答える