kendo ui grid在工具栏上点击保存时获取第一个数据

时间:2016-07-14 10:54:53

标签: jquery html kendo-ui kendo-grid

你好我最近尝试了剑道ui,它看起来很有希望

但是当我尝试批量编辑时我发现了很多问题,现在我使用模拟数组对象数据来模拟视图,成功,我尝试批量编辑

简短的故事,我尝试保存已编辑的列,当点击保存按钮时,第一行变为空,但是下面的数据仍保留,包括已编辑的数据

这里是JS

var dataDS = [{ type: "B0998", quantity: "2", harga: "12000", jumlah: "4", saldo: "200000", nama_barang: "sundanese fries (fried singkong)" },

    { type: "B0998", quantity: "2", harga: "12000", jumlah: "4", saldo: "200000", nama_barang: "fried tempe" },
    {
        type: "B0999", quantity: "2", harga: "15000", jumlah: "4", saldo: "502000", nama_barang: "rounded toufu"
    },
    {
        type: "B0999", quantity: "2", harga: "15000", jumlah: "4", saldo: "502000", nama_barang: "sundanese salad"
    }, {
        type: "B0999", quantity: "2", harga: "15000", jumlah: "4", saldo: "502000", nama_barang: "goyobod ice"
    }
    , {
        type: "B0999", quantity: "2", harga: "15000", jumlah: "4", saldo: "502000", nama_barang: "roasted jenkol"
    }



];




var dataSource = new kendo.data.DataSource
({
    data: dataDS,
    pageSize: 5,
    batch: true,
    schema: {
        model: {
            fields:
            {
                type: { type: "string", editable: true, nullable: false },
                quantity: { type: "number", editable: true },
                harga: { type: "number", editable: true },
                jumlah: { type: "number", editable: true },
                saldo: { type: "number", editable: true },
                nama_barang: { type: "string", editable: true }
            }
        }
    }
})


$("#grid-placement").kendoGrid({

    dataSource: dataSource

        ,
    sortable: true,
    editable: true,

    toolbar: ["create","edit", "save", "cancel"],
    pageable: {
        refresh: true,
        pageSizes: true
    },
    editable: true,
    columns: [
        {
            field: "type",
            title: "Type"
        },
        {
            field: "quantity",
            title: "Quantity"
        },
        {
            field: "harga",
            title: "Harga"
        },
        {
            field: "jumlah",
            title: "Jumlah"
        },
        {
            field: "saldo",
            title: "Saldo"
        },
        {
            field: "nama_barang",
            title: "Nama Barang"
        },
        {
            command: "destroy", title: "delete"
        }


    ]
});

这里是html

<div id="grid-placement" >
</div>

enter image description here

1 个答案:

答案 0 :(得分:0)

在KendoUI网格上使用批量编辑(或一般编辑)时,您必须指定数据源的CRUD操作。

有多种方法可以定义CRUD操作。 下面你可以找到一个用于处理本地数据的样本。

可以在KendoUI数据源docs上找到其他(和更详细的)信息。

transport: {
  read: function(options) {
    // Implement read
    options.success([/* Some data */]);
  },
  create: function(options) {
    // Implement create
    options.success();
  },
  update: function(options) {
    // Implement update
    options.success();
  },
  destroy: function(options) {
    // Implement destroy
    options.success();
  }
}

我根据你的样本整理了一个有效的Dojo。 (Link

但是更改不会保存到阵列中,因此当您单击刷新按钮时,更改将消失,因为它会再次读取原始数组。