[英]Kendo-UI grid Set Value in grid with Javascript
我只是想知道如何在JavaScript中更改網格中行的值,以便在網格和基礎數據源中將其標記為“臟”。
例如,我有一個聯系人/客戶列表。 他們有3個字段FirstName / LastName / IsPrimaryContact。 只能有1個主要聯系人,因此當記錄中的主要聯系人設置為true時,我會使用JavaScript代碼循環遍歷數據源,並將設置為primary的所有其他聯系人設置為false。
JavaScript全部觸發正常並且數據字段設置正確但有兩個問題:1。網格未更新我對數據源2進行的更改。更改的記錄未標記為“臟”,因此當我調用Datasource.sync()時沒有同步
我可以通過手動設置記錄上的臟字段來解決第二個問題,但這似乎不正確。 感覺我應該在網格級別更新字段,以便在UI和數據源中處理它。
關於如何解決這個問題的任何想法?
謝謝
我以一種非常簡單有效的方式做到這一點:
var employee = employeeDataSource.get(employeeId);
employee.dirty = true; // set it as dirty
employeeDataSource.sync(); //Tell the DataSource object to save changes
這是一個古老的問題,但希望它可以幫助任何有同樣問題的人。
按照上面的Pechka回答,我添加了一些額外的代碼來標記帶有臟標志的已編輯單元格。
這是我的razor代碼在列上需要工作,我添加了一個類名,以便稍后可以在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>');
我這樣用它 - 至少用復選框。 我將使用“編輯”按鈕設置列,如下所示:
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();
}
當然,上面的代碼假定復選框位於第一列。 否則,將該chkbox setAttribute行上的第一個childNodes[0]
調整為它所在的列,減去一,因為它從零開始計數。
對我來說這是工作(不需要實例化網格):
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);
}
set("fieldname",value)
將自動刷新網格,有一種簡單的方法可以更新UI值和字段值,而無需進行刷新。 只是做,例如:
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 + "']");
希望這可以幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.