如何在免费的 jqgrid 4.15.4 中重新加载数据

Posted 2023-02-15

【中文标题】如何在免费的 jqgrid 4.15.4 中重新加载数据

【英文标题】：How to reload data in free jqgrid 4.15.4

【发布时间】：2019-01-01 08:24:24

【问题描述】：

我有一个关于免费 jqgrid 的问题。我的 jqgrid 可以很好地加载所有数据。我已经明确给出了一个下拉和搜索按钮。当我尝试通过选择下拉菜单并单击搜索按钮进行搜索时，新数据未加载到现有网格中。

这是我的小提琴：https://jsfiddle.net/x3fger4z/。

在页面加载时，我使用的是这个 url：'/MajorsView/GetAllData'，但是点击按钮后我想从另一个 url 加载。

下面是我的搜索按钮，实际上我正在成功获取数据，但它没有反映在网格上：

<input type="button" onclick="return myfunction();" id="btnFlagStatus" value="Search" class="btn btn-primary" />

function myfunction() 
 var gendarVal = $("#gendarFlagsEnum option:selected").text();
        var URL= "/MajorsView/GetFemaleData?searchKey=" + gendarVal;
        $.ajax(
            type: "GET",
            url: URL,
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(gendarVal),
            datatype:"json",
            success: function (data) 
                //$("#grid").setGridParam( url: URL )
                $("#grid").trigger('reloadGrid');

            ,
            error: function () 
                alert("error");
            
        )

我尝试从这些中获取参考，但无济于事

How to filter the jqGrid data NOT using the built in search/filter box how to reload jqgrid in asp.net mvc when i change dropdownlist jQuery button click refresh of jqGrid only firing once

【问题讨论】：

您所包含的演示jsfiddle.net/x3fger4z 似乎与您的问题无关。哪个datatype 有你的网格？ $("#grid").setGridParam( url: URL ) 行在您的代码中得到推荐。为什么？您当前的代码就 Ajax 请求直接从URL 加载数据，但如果您不使用服务器响应。不会使用success 回调的data 参数。如果没有任何知识（知道选项）如何使用 jqGrid，很难为您提供帮助。

嘿奥列格，我在问题中添加的小提琴是我的网格在我的机器上的样子。我的网格有数据类型：json 和 loadonce：true。从给定的函数中，我获得了 ajax 成功的数据。但是数据没有加载到现有网格中。有了这条线，我认为数据会加载到网格中，但它没有用。 $("#grid").setGridParam( url: URL )

澄清问题：我在控制器中有两种方法，我从中获取页面加载的所有数据 ('/MajorsView/GetAllData',) 。另一种操作方法是我传递给上述函数的方法，它应该在同一网格中显示过滤的记录。但是网格不会刷新新的（过滤的）记录。

例如在页面加载时我有 5 条记录，但是当我从显式按钮单击进行搜索时，这仅显示网格中过滤的记录。再次试图明确这一点，在我的代码中，我有两种不同的方法，一种带来所有数据，另一种只带来过滤数据。我希望这能更好地澄清。顺便说一句，感谢奥列格 :)

【参考方案1】：

如果您使用datatype: "json" 和一些url，那么您只需将url 更改为另一个值并触发reloadGrid。不需要进行手动 Ajax 请求。如果您另外使用loadonce: true 选项，则网格的datatype 将更改为"local" 以处理排序、分页和过滤本地。每次排序、分页和过滤都只不过是用另一个参数（如page、sortname、postData.filters）重新加载具有datatype: "local" 的网格。因此，要从服务器重新加载网格数据，必须将datatype 恢复为初始值（在您的情况下为"json"）。因此您可以使用

var p = $("#grid").jqGrid("getGridParam"); // get reference to all parameters of jqGrid
p.url = "/MajorsView/GetFemaleData?searchKey=" + encodeURIComponent(gendarVal)
$("#grid").trigger("reloadGrid",  fromServer: true );

或者 ole 可以直接重置datatype（使用p.datatype = "json";），但fromServer: true 的使用在其他情况下可能会有所帮助，并且在我看来它使代码更具可读性。有关更多信息，请参阅the old answer 的更新部分。

【讨论】：

您能否对第一句话（在第一个逗号之后）提供更多见解：然后您可以将 url 更改为另一个值并触发 reloadGrid。不需要手动发出 Ajax 请求。 您的意思是动态更改 url 吗？如果是，那么任何示例答案链接。当我应用两个具有不同 url 的 jqgrid 时。

@Chandan：我的意思是你应该从myfunction 中删除 Ajax 调用，而只使用我的答案中的代码。它设置url 参数，然后使用reloadGrid 和 fromServer: true 参数。应该从新的url 重新加载网格。

嘿@Oleg，我也做了同样的事情，但是 encodeURIComponent(gendarVal) 在控制器操作方法上作为 null 传递。

@Chandan：你之前初始化过gendarVal（gendarVal = $("#gendarFlagsEnum option:selected").text()）吗？ encodeURIComponent 方法是标准的 javascript 方法，它可以安全地使用 URL 中的特殊字符。如果gendarVal 没有特殊字符，则可以使用"/MajorsView/GetFemaleData?searchKey=" + gendarVal，但encodeURIComponent(gendarVal) 比gendarVal 更安全。

我得到了那个奥列格，谢谢。我没有将 searchKey 作为参数传递给动作控制器方法，而是传递了 genderVal。在将值传递给 url 中的 searchKey 后没有范围。我已将此答案标记为已接受，但不会反映其他人。所以可能版主可以将此答案标记为已接受。非常感谢 Oleg，你太棒了！