如何使用 jquery 动态添加网格列值？

Question

我必须动态添加网格列之一的值。实际上它正在添加，但它是作为另一行添加的。但需要在同一行添加。

这里是简单的网格示例代码和link http://jsfiddle.net/bagya1985/xojke83s/3/

$("#grid").kendoGrid({
                    "dataSource": {
                      "schema": {
                        "model": {
                          "id": "id",   
                          "fields": {       
                            "OperationContext": {
                              "type": "string",                              
                              "editable": "false"
                            }
                          }
                        }
                      }                     
                    },
                    "editable": "popup",
                    "toolbar": [
                      {
                        "name": "create",
                        "text": "Add a New Record"
                      }
                    ],
                    "columns": [
                      {

                        "field": "Name",
                        "title": "Name"
                      },
                      {
                        "field": "Age",
                        "title": "Age"

                      },
                      {
                        "field": "OperationContext",
                        "title": "Operation Context"
                      },
                      { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
                         ]
                        });

          $(".k-grid-add").on("click", function () {

              var grid = $("#grid").data("kendoGrid").dataSource.data([{OperationContext: "IsAdded"}]);
                 console.log(grid);            
           });

请帮助任何人实现这一目标。

Answer 1

刚刚看到你的 fiddle 让我明白你想要实现什么，如果你想在你点击添加按钮时为你的模型添加默认值（动态），你可以尝试使用 Grid 的edit 事件。您可以从中访问当前行对象并使用 set 方法修改其值。

试试这个代码，从你的 fiddle

中获取并修改

  $("#grid").kendoGrid({
    dataSource: {
      schema: {
        model: {
          id: "id",
          fields: {
            OperationContext: {
              type: "string",
              editable: "false"
            }
          }
        }
      }
    },
    editable: "popup",
    toolbar: [{
      name: "create",
      text: "Add a New Record"
    }],
    columns: [{
      field: "Name",
      title: "Name"
    }, {
      field: "Age",
      title: "Age"
    }, {
      field: "OperationContext",
      title: "Operation Context"
    }, {
      command: ["edit", "destroy"],
      title: "&nbsp;",
      width: "250px"
    }],
    edit: function (e) {
      var model = e.model;

      if (model.isNew()) { // add new record
        model.set("OperationContext", "IsAdded");
      }
    }
  });

Dojo

在这里阅读他们的一些 documentation 以供进一步发展。

更新

如果保存记录后想更新那个属性，把edit事件改成save事件，model.isNew()会帮你判断是不是新添加的模型或从数据库中获取（远程服务）。

对于删除操作，需要对 remove 事件进行一些调整。您应该阻止它从数据源中删除数据，然后利用数据源过滤器仅显示 OperationContext 不等于 IsDeleted.

的数据

查看更新的 dojo 我鼓励您阅读他们的 documentation 关于 Grid 的内容，这里的人通常不会做您的作业

更新

Please help me without id property or how to add id property dynamically for all rows

新数据源模型架构

dataSource: {
  schema: {
    model: {
      id: "id",
      fields: {
        OperationContext: { type: "string", editable: "false" },
        Local: { type: "bool", editable: "false", defaultValue: true }
      }
    }
  }
}

然后是你的编辑功能

edit: function (e) {
  var model = e.model;

  if (model.Local) {
    model.set("OperationContext", "IsAdded");
  }
}

如何使用 jquery 动态添加网格列值？

how to add grid column values dynamically using jquery?

javascript

jquery

kendo-ui

kendo-grid