如何在剑道网格中手动设置列值

Posted 2023-05-07

技术标签:

【中文标题】如何在剑道网格中手动设置列值【英文标题】：how to manually set column value in kendo grid 【发布时间】：2017-05-17 06:52:10 【问题描述】：

我可以在控制台上设置备注，但我不知道如何在用户保存更改后将备注值设置到网格中。

是否可以手动将值设置为剑道网格？

示例输出

         |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

项目示例在代码sn-p中提供。

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>

【问题讨论】：

【参考方案1】：

始终使用模型中的set() 方法来更改值。不用refresh()，例如：

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

Demo

【讨论】：

【参考方案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();

另一种方法是使用数据项设置方法 如本文所述post

dataItem.set() 方法非常慢，因为它每次都会触发一个事件。即使是 100 个列表也很慢。

要处理较大的更新，请使用

dataItem[field] = value

缺点是不会应用脏标记，并且网格不会反映更改。

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

【讨论】：

刷新网格不是一个好主意，因为它会刷新网格上的所有数据，这在很多情况下会导致很多问题，所以我建议使用set()方法。跨度>

以上是关于如何在剑道网格中手动设置列值的主要内容，如果未能解决你的问题，请参考以下文章