Question

下面我有一个从服务器获取数据的kendoUI网格。然后，用户可以编辑网格中的两列。我有一个单独的按钮，将数据发回服务器，我没有使用剑道网格的UPDATE传输。我遇到的问题是，如果我从网格中获取数据，它不会反映用户输入。例如，要获取网格的基础数据，请执行以下操作：

products= $("#Grid").data("kendoGrid").dataSource.data()

但是当我遍历产品并检查NewPrice或Comment属性时，它总是空白的。以下是网格数据源的定义方式：

dataSource: {
  transport: {
    read: function (options) {
      $.ajax({
        url: "/Portal/API/GetProductPrices?id=" + pId,
        dataType: "json",
        success: function (data) {
          localModel.userId = data.userId;
          localModel.products = data.Products;
          return options.success(model.products);
        },
      });
    }
  },
},
scrollable: false,
selectable: true,
schema: {
  model: {
    id: 'Id',
    fields: {
      Item: { type: 'string', editable: false },
      Price: { type: 'number', editable: false },
      NewPrice: { type: 'number', editable: true },
      Comment: { type: 'string', editable: true, validation: { required: true } },
    }
  }
},
columns: [
  { field: "Price", title:"Price"},
  {
    field: "NewPrice", title: "<span class='editMode'>Proposed Value</span>", format: "{0:p}", attributes: { style: "text-align:center;" }, headerAttributes: { style: "text-align:center;" }, width: "50px",
    template: "#=NewValueTemplate(data)#",
  },
  { field: "Comment", title: "<span class='editMode viewWorkflowMode'>Notes</span>", width: "210px", template: "#=NotesTemplate(data)#" },
]

任何有关解决的建议都将受到赞赏

Answer 1

您尚未指定正在使用的编辑类型您使用的是哪种类型：内联，批量或弹出？

这只是数据源吗？我看不到更新功能。
我建议你看看这三个演示 Batch
Inline
Popup

最糟糕的是您没有指定属性可编辑的值默认情况下，它是 false ，这意味着kendoGrid不可编辑，即使您已在模型字段上指定了editable: true。

Shortcut to "Editable" configuration

更新＃2 ：

正如已经说过here

如果数据源绑定到远程服务（通过传输选项），则data方法将返回服务响应。

因此，当您在网格上使用dataSource.data()方法时，如果您没有正确更新数据源，则应该接收所有“旧”数据。（我发现很奇怪你在这些属性上得到空白值，可能是缓存问题）

正如我已经说过的，你的dataSource并没有提供更新功能。

Here您是关于在kendo dataSource中配置更新功能的示例，请求远程服务。

建议您查看两个示例：

示例 - 将更新指定为字符串 和 示例 - 将更新指定为函数

Answer 2

请执行以下示例中的逻辑：

＆＃13;

var _roleDataSource = new kendo.data.DataSource({
    data: [
        { id: 1, title: "Software Engineer" },
        { id: 2, title: "Quality Assurance Engineer" },
        { id: 3, title: "Team Lead" },
        { id: 4, title: "Manager" }
    ]
});

var _peopleDataSource = new kendo.data.DataSource({
    data: [
        { id: 1, name: "John", roleId: 1, roleTitle: "Software Engineer" },
        { id: 2, name: "Dave", roleId: 2, roleTitle: "Quality Assurance Engineer" },
        { id: 3, name: "Aaron", roleId: 3, roleTitle: "Team Lead" },
                { id: 4, name: "Russell", roleId: 4, roleTitle: "Manager" }
    ]
});

var _grid = $("#grid").kendoGrid({
    dataSource: _peopleDataSource,
    columns: [
        {
            field: "name",
            title: "Name"
        },{
            field: "roleTitle",
            title: "Role",
            editor: function(container, options) {
                $("<input data-bind='value:roleTitle' />")
                    .attr("id", "ddl_roleTitle")
                    .appendTo(container)
                    .kendoDropDownList({
                        dataSource: _roleDataSource,
                        dataTextField: "title",
                        dataValueField: "title",
                        template: "<span data-id='${data.id}'>${data.title}</span>",
                        select: function(e) {
                            var id = e.item.find("span").attr("data-id");
                            var person =_grid.dataItem($(e.sender.element).closest("tr"));
                            person.roleId = id;
                            
                            setTimeout(function() {
                                $("#log")
                                    .prepend($("<div/>")
                                        .text(
                                            JSON.stringify(_grid.dataSource.data().toJSON())
                                         ).append("<br/><br/>")
                                    );
                                });
                        }
                    });
            }
        }
    ],
    editable: true
}).data("kendoGrid");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grid"></div>
<br/>
<div id="log"></div>

＆＃13;

您可以在此处查看演示：http://jsfiddle.net/khNsE/175/

Answer 3

在这种情况下，我需要允许基于数据规则的某些行进入“编辑模式”。同时，指定内联，弹出等不是一个选项。我所做的是在定义网格列时使用自定义模板函数。自定义模板函数返回html，但在html中我使用data-bind属性绑定到我的模型。最后，在网格的DataBound事件中，我将模型绑定到行。

field: "NewPrice", title: "New", format: "{0:p}", template: "#=newValueTemplate(d)#",

....
....
function newValueTemplate(d){
     if (d.IsEditable)
         return "<input type='number' data-bind='value:NewPrice' />"
     else 
         return "<span />"
}

function gridDataBound(e){
    var items = this.dataSource.view();
    var gridRows = this.tbody.children();
    for (var i = 0; i < items.length; i++)
                kendo.bind(gridRows[i], items[i]);
}

KendoUI - 使用底层模型从网格单元中读取编辑数据

3 个答案: