Question

我想使用ShieldUI库（网格组件）以便向用户显示表格数据。
该库的问题在于，如果我创建了一个新项目，然后又想编辑或删除它，则网格无法提供其ID（因为数据库为我生成了），尽管我在INSERT查询被执行。这是我尝试过的：

<!-- HTML and JS part -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery Shield UI Demos</title>
    <link id="themecss" rel="stylesheet" type="text/css" href="//www.shieldui.com/shared/components/latest/css/light/all.min.css" />
    <script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
</head>
<body class="theme-light">
<div id="grid"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#grid").shieldGrid({
            dataSource: {
                remote: {
                    read: "/products",
                    modify: {
                        create: {
                            url: "/products/productCreate",
                            type: "post",
                            data: function (edited) {
                                var date = edited[0].data.AddedOn ? edited[0].data.AddedOn.toJSON() : new Date().toJSON();
                                return {
                                    Active: edited[0].data.Active,
                                    AddedOn: date,
                                    Category: edited[0].data.Category,
                                    Name: edited[0].data.Name,
                                    Price: edited[0].data.Price,
                                    Id: edited[0].data.Id
                                };
                            }
                        },
                        update: {
                            url: "/products/productUpdate",
                            type: "post",
                            data: function (edited) {
                                var date = edited[0].data.AddedOn ? edited[0].data.AddedOn.toJSON() : new Date().toJSON();
                                return { 
                                    Active: edited[0].data.Active,
                                    AddedOn: date,
                                    Category: edited[0].data.Category,
                                    Name: edited[0].data.Name,
                                    Price: edited[0].data.Price,
                                    Id: edited[0].data.Id
                                };
                            }
                        },
                        remove: {
                            url: "/products/productRemove",
                            type: "post",
                            data: function (removed) {
                                return { id: removed[0].data.Id };
                            }
                        }
                    }
                },
                schema: {
                    fields: {
                        Id: { path: "Id", type: Number },
                        Price: { path: "Price", type: Number },
                        Name: { path: "Name", type: String },
                        Category: { path: "Category", type: String },
                        AddedOn: { path: "AddedOn", type: Date },
                        Active: { path: "Active", type: Boolean }
                    }
                }
            },
            rowHover: false,
            columns: [
                { field: "Name", title: "Product Name", width: "300px" },
                { field: "Price", title: "Price", width: "100px" },
                { field: "Category", title: "Category", width: "200px" },
                { field: "AddedOn", title: "Added On", format: "{0:MM/dd/yyyy}" },
                { field: "Active", title: "Active" },
                {
                    title: " ",
                    width: "100px",
                    buttons: [
                        { cls: "deleteButton", commandName: "delete", caption: "<img src='/Content/img/grid/delete.png' /><span>Delete</span>" }
                    ]
                }
            ],
            editing: {
                enabled: true,
                event: "click",
                type: "cell",
                confirmation: {
                    "delete": {
                        enabled: true,
                        template: function (item) {
                            return "Delete row with ID = " + item.Id
                        }
                    }
                }
            },
            toolbar: [
                {
                    buttons: [
                        { commandName: "insert", caption: "Add Product" }
                    ],
                    position: "top"
                }
            ]
        });
    });
</script>
<style>
    .deleteButton img
    {
        margin-right: 3px;
        vertical-align: bottom;
    }
</style>
</body>
</html>

下面是ASP.MVC部分：

[ActionName("productCreate")]
public Product PostProduct(Product item)
{
    if (item == null)
    {
         throw new ArgumentNullException("item");
    }
    item.Id = Products.Max(i => i.Id) + 1;
    Products.Add(item);
    return item;
}

要执行此操作，我需要通过执行排序操作（框架在排序之前更新网格）来刷新网格的内容，或者更糟糕的是，页面刷新。
那么这种方法有什么问题呢？我想念什么吗？

Answer 1

我们需要修改create对象并使用AJAX调用才能使这项工作生效。
所以代替：

create: {
    url: "/products/productCreate",
    type: "post",
    data: function (edited) {
        var date = edited[0].data.AddedOn ? edited[0].data.AddedOn.toJSON() : new Date().toJSON();
        return {
            Active: edited[0].data.Active,
            AddedOn: date,
            Category: edited[0].data.Category,
            Name: edited[0].data.Name,
            Price: edited[0].data.Price,
            Id: edited[0].data.Id
        };
    }
}

您必须这样做：

create: function (items, success, error) {
    var newItem = items[0];
    $.ajax({
        type: "POST",
        url: "/products/productCreate",
        dataType: "json",
        data: newItem.data,
        complete: function (xhr) {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    // update the id of the newly-created item with the 
                    // one returned from the server
                    newItem.data.Id = xhr.responseJSON.Id;
                    success();
                    return;
                }
            }
            error(xhr);
        }
    });
}

如果在ShieldUI中没有刷新网格，则无法编辑或删除创建的项目

1 个答案: