jquery - kendo web ui网格批量编辑使用jquery/javascript单击自定义命令

Question

我想通过单击工具栏中的自定义按钮来启用批量编辑。假设我在工具栏中有一个名为“编辑”的按钮。单击编辑按钮后，我想激活所有行进行编辑。我不想在加载时使所有行最初都可编辑。

这可能吗？如果是，有人可以指导如何实现这一目标吗？

Answer 1

与@Jaimin 解决方案一致，我提出了一种类似的方法，其中您有两个网格，但每次从版本通勤到非版本模式时都不会创建新的网格（不确定这是否是必需的）。

所以我要做的是创建两个网格，它们的定义完全相同，不同之处在于一个是隐藏的，一个是可见的，一个是可编辑的，一个是不可编辑的。当您单击按钮时，它会隐藏可见并显示不可见。由于两者共享相同的数据源，它实际上非常完美，因为在一个页面中更改页面会更改另一个页面，编辑一个页面，更新另一个页面。

所以，它是这样的：

1- 用于切换可见性的 CSS 定义：

.ob-hide {
    display : none;
}

2- 数据源定义：

var ds = new kendo.data.DataSource({
    transport : {
        read : {
            url: ...
        },
        update : {
            url: ...
        },
        create : {
            url: ...
        },
        destroy : {
            url: ...
        }
    },
    pageSize: 10,
    schema  : {
        model: {
            id : ...,
            fields: {
                id       : { type: '...' },
                ...
            }
        }
    }
});

接下来是两个网格：

$("#grid-editable").kendoGrid({
    editable: "inline",
    dataSource : ds,
    ...
}

$("#grid-not-editable").kendoGrid({
    editable: false,
    dataSource: ds,
    ...
});

$("#grid-editable").addClass("ob-hide");

最后是通勤网格的按钮处理程序：

$("#make-editable").on("click", function() {
    $("#grid-editable").toggleClass("ob-hide");
    $("#grid-not-editable").toggleClass("ob-hide");
});

看到它在这里运行：http: //jsfiddle.net/OnaBai/bCEJR/

Answer 2

嗨试试这样

  $(document).ready(function () {
            var crudServiceBaseUrl = "http://demos.kendoui.com/service",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read: {
                                    url: crudServiceBaseUrl + "/Products",
                                    dataType: "jsonp"
                                },
                                update: {
                                    url: crudServiceBaseUrl + "/Products/Update",
                                    dataType: "jsonp"
                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "/Products/Destroy",
                                    dataType: "jsonp"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/Products/Create",
                                    dataType: "jsonp"
                                },
                                parameterMap: function (options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return { models: kendo.stringify(options.models) };
                                    }
                                }
                            },
                            batch: true,
                            pageSize: 20,
                            schema: {
                                model: {
                                    id: "ProductID",
                                    fields: {
                                        ProductID: { editable: false, nullable: true },
                                        ProductName: { validation: { required: true} },
                                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                        Discontinued: { type: "boolean" },
                                        UnitsInStock: { type: "number", validation: { min: 0, required: true} }
                                    }
                                }
                            }
                        });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                navigatable: true,
                pageable: true,
                height: 430,
                toolbar: ["Edit", "create", "save", "cancel"],
                columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 110 },
                            { field: "UnitsInStock", title: "Units In Stock", width: 110 },
                            { field: "Discontinued", width: 110 },
                            { command: "destroy", title: " ", width: 90}],
                editable: false
            });


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

                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    navigatable: true,
                    pageable: true,
                    height: 430,
                    toolbar: ["Edit", "create", "save", "cancel"],
                    columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 110 },
                            { field: "UnitsInStock", title: "Units In Stock", width: 110 },
                            { field: "Discontinued", width: 110 },
                            { command: "destroy", title: " ", width: 90}],
                    editable: true
                });

            });