【问题标题】:Kendo Grid: How to append to URLKendo Grid:如何附加到 URL
【发布时间】:2019-02-13 16:57:02
【问题描述】:

我想让我的剑道网格的更新 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 部分中,我希望更新 url 在末尾包含 id。目前它正在更新,但是当调用虚拟 api 时,id 被省略。这似乎很容易做到,但我想不通。

任何帮助将不胜感激。

【问题讨论】:

  • 您可以尝试将更新 URL 从绝对地址切换为 JS 函数的名称,类似于引用您的 parameterMap 函数的方式。 我不是 100% 确定这可以使用 MVC 实现 ...我找不到任何示例或文档来支持这一点,但我知道如果您使用的是本机 JS 库,这种技术是有效的。有关我的意思的示例,请参见 JS docs
  • 感谢您的回复。在过去的一周里,我一直病得很慢。我最终做的是使用处理程序。
  • 没问题,希望你感觉好多了。抱歉,我无法提供更多帮助;我并没有真正使用过 kendo MVC 库,但我知道您想要的是可能的。

标签: model-view-controller kendo-ui


【解决方案1】:

我使用处理程序将员工 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
    });

}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-10
    • 2015-01-24
    • 2014-06-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多