[英]Issue when Editing/Updating row values of jqxGrid bound with a Knockout observable array, replace observable object edited with a javascript object
當用戶在jqxGrid中修改或編輯行時,如何防止在observableArray中更改對象的這種行為。 我有一個淘汰可觀察的用戶數組,其中每個用戶都將屬性作為可觀察對象,然后我將該可觀察數組綁定到jqxGrid(來自jqWidgets)。 當我在網格中更新User值時,然后在可觀察數組中該項被替換為包含此User的observable值的對象。
以下是我的代碼:
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復選框中的第一行后值如何更改。
在jqxGrid中單擊第一行的IsChecked checbox的結果
問題是我想向UserModel對象添加一些函數,我想保留observable,因為我想在頁面的其他部分使用它們。 我已經在這工作了幾天,不知道該怎么做任何幫助將不勝感激。 謝謝。
我做了類似的事情。 也許它可以幫助你:
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, .... });
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.