调用休息服务时在 Kendo UI Grid 中设置参数 [解决方法]

Question

我有一个调用休息服务的 Kendo UI Grid。只要我不尝试使用任何参数，它就可以正常工作。

我知道其余服务是正确的，因为我可以从浏览器调用它，并获得正确的结果 [取决于我发送的参数]。另外，当我查看服务器日志时，我看到它正在调用没有参数的其余服务。

我的代码如下：

document).ready( function() {


         var crudServiceBaseUrl = "rsPC.xsp",
                    dataSource = new kendo.data.DataSource({
                        transport: {
                            read:  {
                                url: crudServiceBaseUrl + "/PCByStatus",
                                filter: {field: "status", value: "2" }                                  
                                dataType: "json",
                            update: {
                                url: crudServiceBaseUrl + "/PC/Update",
                                dataType: "json"
                            },
                            destroy: {
                                url: crudServiceBaseUrl + "/PC/Destroy",
                                dataType: "json"
                            },
                            create: {
                                url: crudServiceBaseUrl + "/PC/Create",
                                dataType: "json"
                            },
                            parameterMap: function(options, operation) {
                                if (operation !== "read" && options.models) {
                                    return {models: kendo.stringify(options.models)};
                                }
                            }
                        },
                        batch: true,
                        pageSize: 20,
                        scrollable: {
                        virtual: true
                          },
                        height: 543,
                        schema: {
                            model: {
                                id: "PCId",
                                fields: {
                                    PCId: {type:"string"},
                                    serialNumber: {type: "string"},
                                    officeLoc: {type: "string"},
                                    unid: {type:"string"},
                                    model: {type:"string"},
                                    checkInDate: {type: "string"}
                                                }
                            }
                        }
                    });


    // Grid
    grid = $("#grid").kendoGrid( {   
        dataSource: dataSource,
        columns : [ {
            field : "serialNumber",
            title : "Serial Number"
        }, {
            field : "model",
            title : "Model"
        }, {
            field : "officeLoc",
            title : "Office Location"
        }, {
            field : "checkInDate",
            title : "Check In Date",
            template: "#= kendo.toString(kendo.parseDate(checkInDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"


        } ],

        pageable: {
             refresh: true,
             pageSizes: true,
             buttonCount: 5
         },
        dataBound : addExtraStylingToGrid,  
        reorderable : true,
        filterable : true,
        scrollable : true,
        selectable : true,
        sortable : true,            
    });

我仍然无法让它工作并且有点难过。

我有两个休息服务，一个返回所有数据，一个将“状态”作为一部分并返回一个等于参数的数据子集。

网址是：

http://localhost/scoApps/PC/PCApp.nsf/rsPC.xsp/PCByStatus?status=2

当输入浏览器时，我得到了正确的记录数。

所以我更改了代码（见下文）。我已经包含了 CSJS 的所有代码：

$(document).ready( function() {
    // Double Click On row
    $("#grid").on(
            "dblclick",
            " tbody > tr",
            function() {
                var grid = $("#grid").data("kendoGrid");
                var row = grid.dataItem($(this));
                window.location.replace("xpFormPC.xsp" + "?key=" + row.unid + "target=_self");                  
            });

    // Add hover effect
    addExtraStylingToGrid = function() {
        $("table.k-focusable tbody tr ").hover( function() {
            $(this).toggleClass("k-state-hover");
        });
    };

    // Search
    $("#search").keyup( function() {
        var val = $('#search').val();
        $("#grid").data("kendoGrid").dataSource.filter( {
            logic : "or",
            filters : [ {
                field : "serialNumber",
                operator : "contains",
                value : val
            }, {
                field : "officeLoc",
                operator : "contains",
                value : val
            }, {
                field : "model",
                operator : "contains",
                value : val
            } ]
        });
    });

    var crudServiceBaseUrl = "rsPC.xsp",
    dataSource = new kendo.data.DataSource({
        transport: {
        read:  {
        url: crudServiceBaseUrl + "/PCByStatus",
        dataType: "json"
    },
    update: {
        url: crudServiceBaseUrl + "/PC/Update",
        dataType: "json"
    },
    destroy: {
        url: crudServiceBaseUrl + "/PC/Destroy",
        dataType: "json"
    },
    create: {
        url: crudServiceBaseUrl + "/PC/Create",
        dataType: "json"
    },
    parameterMap: function(options, operation) {
        if (operation == "read"){
            options.field = "status"
                options.value = "2"
                    return options;
        }
        if (operation !== "read" && options.models) {
            return {models: kendo.stringify(options.models)};
        }
    }
    },
    batch: true,
    pageSize: 20,
    scrollable: {
        virtual: true
    },
    height: 543,
    schema: {
        model: {
        id: "PCId",
        fields: {
        PCId: {type:"string"},
        serialNumber: {type: "string"},
        officeLoc: {type: "string"},
        unid: {type:"string"},
        model: {type:"string"},
        checkInDate: {type: "string"}
    }
    }
    }
    });

    // Grid
    grid = $("#grid").kendoGrid( {   
        dataSource: dataSource,
        columns : [ {
            field : "serialNumber",
            title : "Serial Number"
        }, {
            field : "model",
            title : "Model"
        }, {
            field : "officeLoc",
            title : "Office Location"
        }, {
            field : "checkInDate",
            title : "Check In Date",
            template: "#= kendo.toString(kendo.parseDate(checkInDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"


        } ],
        pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    dataBound : addExtraStylingToGrid,  
    reorderable : true,
    filterable : true,
    scrollable : true,
    selectable : true,
    sortable : true     
    });

    // Edit
    function onEdit(e) {
    }

    // Change
    function onChange(args) {
        var model = this.dataItem(this.select());
        ID = model.ID;
    }
    ;

});

我做错了什么？

==========================================

我有一个解决方法。或者这可能是它应该做的方式。

var crudServiceBaseUrl = "rsPC.xsp", dataSource = new kendo.data.DataSource(
        {
            transport : {
            read : {
            url : crudServiceBaseUrl
            + "/PCByStatus?status=2",
            dataType : "json"
        },

现在我只是构建我想要的 URL。我想不是那么优雅，但它确实有效。

Answer 1

我有一个解决方法。或者这可能是它应该做的方式。

var crudServiceBaseUrl = "rsPC.xsp", dataSource = new kendo.data.DataSource(
        {
            transport : {
            read : {
            url : crudServiceBaseUrl
            + "/PCByStatus?status=2",
            dataType : "json"
        },

Answer 2

Filter 用于客户端数据，除非您将 serverFiltering 设置为 true。

这里是filter kendo documentation 和serverFiltering documentation。

当我需要发送不是通过过滤我正在使用的控件创建的参数时，我使用parameterMap。 The kendo documentation 提供了一个使用 parameterMap 的示例。

这是我过去如何使用它的一个示例：

var appsDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: apiUrl + "App"
        },
        parameterMap: function (data, action) {
            if (action === "read") {
                data.lobid = lobId;
                data.parent = isParent;
                return data;
            } else {
                return data;
            }
        }
    }
});

尝试更改parameterMap：

parameterMap: function(options, operation) {
    if (operation == "read"){
        options.field = "status";
        options.value = "2";
        return options;
    }
    if (operation !== "read" && options.models) {
        return {models: kendo.stringify(options.models)};
    }
}

并更新read 定义以删除filter。要考虑的一件事是，如果 read 方法不符合不被读取的标准并且选项不为空，则您不会从该方法返回任何内容。这样就排除了现有代码中未明显处理的任何其他组合。