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

时间:2015-09-03 11:08:08

标签: javascript jquery kendo-ui kendo-grid

我必须动态地添加一个网格列的值。实际上它正在添加,但它的添加是另一行。但是需要在同一行添加。

这里是简单的网格示例代码和链接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: " ", width: "250px" }
                         ]
                        });

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

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

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

1 个答案:

答案 0 :(得分:2)

只要看到你的小提琴让我明白你想要实现什么,如果你想为你的模型添加默认值(动态),只要你点击添加按钮,你就可以尝试使用Grid' s {{ 1}}事件。您可以从中访问当前行对象,并使用edit方法修改其值。

尝试使用此代码,从您的小提琴中获取并修改

set

Dojo

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

<强>更新

如果要在保存记录后更新该属性,请将 $("#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"); } } }); 事件更改为edit事件,save将帮助您确定是新添加的模型还是从数据库中获取的模型(远程服务)。

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

请参阅更新后的dojo,我们建议您阅读他们关于网格的documentation,这里的人通常不会做您的作业

<强>更新

  

请帮助我没有id属性或如何添加id属性   动态地为所有行

新数据源模型架构

IsDeleted

然后是你的编辑功能

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