Kendo Grid:如何追加到URL

时间:2019-02-13 16:57:02

标签: model-view-controller kendo-ui

我想使Kendo网格的更新URL动态。我希望能够从“ http://dummy.restapiexample.com/api/v1/update”转到“ http://dummy.restapiexample.com/api/v1/update/100

我已经遵循Kendo教程中的自定义数据源。我修改了“ parameterMap”函数,可以更改更新URL的值,但它似乎没有绑定。

@(Html.Kendo().Grid<KendoDemo.Models.EmployeeViewModel>()
            .Name("NCSBEGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.employee_name).Title("Name");
                columns.Bound(p => p.employee_age).Width(140).Title("Age");
                columns.Bound(p => p.employee_salary).Width(140).Title("Salary");
                columns.Bound(p => p.profile_image).Hidden(true);
                columns.Command(command => command.Destroy()).Width(110).Title("Delete");
            })
            .ToolBar(toolbar =>
            {
                toolbar.Create();
                toolbar.Save();
            })
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Pageable()
            .Navigatable()
            .Sortable()
            .Scrollable()
            .DataSource(dataSource => dataSource
                .Custom()
                .Events(events => events.Error("error_handler")         
                )
                .Batch(true)
                .PageSize(20)
                .Schema(schema => schema
                .Model(m => m.Id(p => p.id)))
                .Transport(transport =>
                {
                    transport.Read(read =>
                        read.Url("http://dummy.restapiexample.com/api/v1/employees")
                            .DataType("json")
                    );
                    transport.Create(create =>
                        create.Url("http://dummy.restapiexample.com/api/v1/create")
                        .Type(HttpVerbs.Post)
                        .DataType("json")
                    );
                    transport.Update(update =>
                        update.Url("http://dummy.restapiexample.com/api/v1/update")
                        .Type(HttpVerbs.Put)
                        .DataType("json")
                    );
                    transport.Destroy(destroy =>
                        destroy.Url("http://dummy.restapiexample.com/api/v1/update")
                        .Type(HttpVerbs.Delete)
                        .DataType("jsonp")
                    );
                    transport.ParameterMap("parameterMap");
                })
            )
)
<script>
    function parameterMap(options, operation) {

        var grid = $("#NCSBEGrid").data("kendoGrid");

        if (operation == "create") {

            var params = { "name": options.models[0].employee_name, "salary": options.models[0].employee_salary, "age": options.models[0].employee_age };

            return JSON.stringify(params);
        }
        else if (operation == "update") {
            var params = { "name": options.models[0].employee_name, "salary": options.models[0].employee_salary, "age": options.models[0].employee_age };

            grid.dataSource.transport.options.update.url = "http://dummy.restapiexample.com/api/v1/update/" + options.models[0].id;

            //grid.dataSource.sync;
            //grid.dataSource.transport.options.update.data = JSON.stringify(params);           
            //grid.dataSource.read; 

            return JSON.stringify(params);
        }
    }

    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>

在javascript部分中,我希望更新网址的末尾包含ID。当前正在更新,但是当调用虚拟api时,将省略id。这似乎很容易,但我无法弄清楚。

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

我使用处理程序将员工ID添加到URL。谢谢乔的帮助。

MVC:
transport.Update(new {url = new Kendo.Mvc.ClientHandlerDescriptor(){HandlerName =“ update”}});

Javascript:

function update(options) {

    let params = {
        "name": options.employee_name,
        "salary": options.employee_salary,
        "age": options.employee_age
    };

    let json = JSON.stringify(params);

    $.ajax({
        method: "PUT",
        url: "http://dummy.restapiexample.com/api/v1/update/" + options.id.toString(),
        dataType: "json",
        data: json
    });

}