如何在劍道網格中手動設置列值

Question

我能夠在控制台上設置備注，但我不知道如何在用戶保存更改后將備注值設置到網格中。

無論如何手動將值設置為劍道網格？

示例輸出

         |Remark         |User Name|Phone Number|Country
 [unable]|username length|ad       |0123456789  |UK
 [enable]|               |admin2   |0123456222  |US
 [enable]|               |admin3   |0123333339  |CN

用戶編輯表格后 - 輸出

         |Remark         |User Name|Phone Number|Country
 [enable]|               |admin1   |0123456789  |UK
 [enable]|               |admin2   |0123456222  |US
 [enable]|               |admin3   |0123333339  |CN

代碼片段中提供了項目示例。

 var defaultData = [{ reason: "", userName: "ad", phoneNumber: "0123456789", country: "UK" }, { reason: "", userName: "admin2", phoneNumber: "0123456222", country: "US" }, { reason: "", userName: "admin3", phoneNumber: "0123333339", country: "CN" }]; var defaultColumns = [{ field: "", width: "40px", template: "<input name='Discontinued' id='remarkCheckBox' class='checkbox' #= (reason.length > 0)? 'disabled=disabled' : ''# type='checkbox' />" }, { field: "reason", title: "Remark", attributes: { style: "color:\\\\#cc0000" } }, { field: "userName", title: "User Name" }, { field: "phoneNumber", title: "Phone Number" }, { field: "country", title: "Country" }]; var viewModel = kendo.observable({ onClick: function() { loadImportGrid(defaultData, defaultColumns); }, }); function loadImportGrid(defaultData, defaultColumns) { var grid = $("#grid").kendoGrid({ columns: defaultColumns, dataSource: { data: defaultData }, dataBound: function() { grid = $("#grid").data("kendoGrid"); grid.saveChanges(); }, saveChanges: function() { getRemark(); }, toolbar: ["save"], selectable: "row", scrollable: true, sortable: true, editable: true }); } function validation(objectList) { if (!objectList.userName || objectList.userName.length < 4) { invalidRecordFormat = "username length"; return invalidRecordFormat; } if (!objectList.country || objectList.country === " ") { invalidRecordFormat = "country invalid"; return invalidRecordFormat; } invalidRecordFormat = ""; return invalidRecordFormat; } function getRemark() { var data = $("#grid").data("kendoGrid").dataSource._data; for (var i = 0; i < data.length; i++) { console.log(validation(data[i])); } } kendo.bind($("#importFile"), viewModel);

 html * { font-size: small; font-family: Arial !important; } .uploadLabel { color: white; background-color: #008efe; border-style: solid; border-width: 1px 1px 1px 1px; width: 100px; height: 30px; text-align: center; border-radius: 3px; display: block; line-height: 250%; } #importUserFile { opacity: 0; position: absolute; z-index: -1; }

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-bootstrap.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.mobile.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="importFile"> <label class="uploadLabel" for="importUserFile">Browse</label> <input name="file" id="importUserFile" data-bind="events:{click:onClick}" /> </div> <div id="grid"></div> </body> </html>

Answer 1

始終使用模型中的set()方法來更改值。 無需refresh() ，例如：

var dataItem = $("#grid").data("kendoGrid").dataSource.data()[0];
dataItem.set("reason", "new value");

演示

Answer 2

基於驗證是否正確，這就是您可以更新第一列值的方式。

for (var i = 0; i < data.length; i++) {   
    //access record using for loop - here i is value from loop
    var firstItem = $('#grid').data().kendoGrid.dataSource.data()[i];

    //set col reason value value
    firstItem["reason"]="username length"; 

    //refresh the grid
    $('#grid').data('kendoGrid').refresh();  
}

另一種方法是使用的DataItem集方法如在本描述的交

dataItem.set() 方法非常慢，因為它每次都會觸發一個事件。 即使是 100 個列表也很慢。

要處理較大的更新，然后使用

dataItem[field] = value

缺點是不會應用臟標記，並且網格不會反映更改。

$('#grid').data('kendoGrid').refresh();

如何在劍道網格中手動設置列值

問題描述

2 個解決方案

解決方案1
11 2017-01-03 18:35:33

解決方案2
7 已采納 2017-01-03 10:13:05

如何在劍道網格中手動設置列值

問題描述

2 個解決方案

解決方案1 11 2017-01-03 18:35:33

解決方案2 7 已采納 2017-01-03 10:13:05

解決方案1
11 2017-01-03 18:35:33

解決方案2
7 已采納 2017-01-03 10:13:05