使用jqgrid时，是否有recreateForm:true但也缓存dataUrl? [英] When using jqgrid, is there anyway to have recreateForm: true but also cache dataUrl?

问题描述

我有以下使用 jqGrid(简化)的列

I have the following columns using jqGrid (simplified)

  { name: "PMOPerson", index: "PMOPerson", width: 250, editable: true, edittype: "select", editoptions: { dataUrl: "/Person/GetSelectData" }, editrules: { required: false} },

  { name: "HeadDisplayName", index: "HeadDisplayName", width: 150, editable: false },

当我通过打开编辑对话框来编辑一行时，PMOPerson 下拉菜单需要 10 秒才能被填充.即使在我之前已经加载过一次之后也是如此，我认为这是因为我有 recreateForm: true 下面

when i go to edit a row by bringing up the edit dialog, it take 10 seconds for the PMOPerson dropdown to be populated. This is the case even after i have already loaded it once before and i assume that is because i have recreateForm: true below

  addButton({
    caption: "",
    title: "Edit Selected Team",
    buttonicon: 'ui-icon-pencil',
    onClickButton: function () {
        var id = $("#grid").getGridParam("selrow");
        if (id) {

            jQuery("#grid").jqGrid('editGridRow', id,
                    { url: '/OrganisationalUnit/Update', afterSubmit: function (response, postdata) {
                        var responseJson = $.parseJSON(response.responseText);
                        return HandleJqGridResponse(responseJson);
                    },
                        height: 380, width: "auto", recreateForm: true, closeAfterEdit: true,
                        closeOnEscape: true, reloadAfterSubmit: true
                    });
        }
    },
    position: "second"
});

我试图弄清楚是否有一种方法可以同时拥有 recreateform: true 但仍然缓存 dataUrl 中的项目列表以避免每次编辑行时返回服务器.

I am trying to figure out if there is a way I can have both recreateform: true but still also cache the list of items in dataUrl to avoid going back to the server each time I edit a row.

推荐答案

我回答了非常接近的问题这里和这里.换句话说，您可以使用 HTTP 标头的缓存选项或使用 editoptions.value 而不是 editoptions.dataUrl.

I answered on very close questions here and here. In other words you can either use caching options of HTTP header or to use editoptions.value instead of editoptions.dataUrl.

我在答案和前两个(this 和 this) 如何设置 editoptions.value 在 beforeProcessing 回调内部动态.需要扩展来自服务器的响应，用于用附加信息填充网格(与从 editoptions.dataUrl 返回的数据类似的数据).在我看来，它在缓存 editoptions.dataUrl 数据和通过重新加载网格来刷新数据之间实现了最佳折衷.仍然可以在服务器端保存缓存的 editoptions.dataUrl 数据.

I described in the answer and this two previous one (this and this) how one can set editoptions.value dynamically inside of beforeProcessing callback. One need extend the responses from the server used to fill the grid with additional information (with the data like the data returned from editoptions.dataUrl). In my opinion it implements the best compromis between caching of editoptions.dataUrl data and refreshing of the data by reloading of the grid. One can still hold cached editoptions.dataUrl data on the server side.

或者，可以使用更简单的方法，即在创建网格后向 editoptions.dataUrl 发出一次手动 Ajax 请求，并且可以设置 editoptions.value 在 Ajax 请求的 success (done) 回调中.代码大概如下

Alternatively one can use more simple way where one makes manual Ajax request to editoptions.dataUrl once after creating of the grid and one can set editoptions.value inside of success (done) callback of the Ajax request. The code will be about the following

// create grid
$("#grid").jqGrid({
    colModel: [
        { name: "PMOPerson" },
        ...
    ],
    ...
});

// make separate asynchronous Ajax request to the server and set 
//  edittype: "select", editoptions: { value: ... }
setSelectOptionValues("/Person/GetSelectData", $("#grid"), "PMOPerson");

setSelectOptionValues 的代码取决于您用来与 URL 通信的 JSON 数据格式，例如 "/Person/GetSelectData".例如，如果服务器只返回字符串数组，应该是文本和 <select> 的选项值，那么可能如下

The code of setSelectOptionValues depends on the format of JSON data which you use to communicate with URL like "/Person/GetSelectData". For example if the server returns just array of strings wich should be the text and the value of options of the <select> then the could could be the following

var setSelectOptionValues = function (getJsonUrl, myGrid, colModelColumnName) {
    $.getJSON(
        getJsonUrl,
        function (data) {
            var i, selectedOptions = '', datai, dn, colModelColumn;

            for (i = 0; i < data.length; i += 1) {
                if (i > 0) {
                    selectedOptions += ';';
                }
                else {
                    selectedOptions = "";
                }
                datai = data[i];

                if (typeof datai === 'string') {
                    selectedOptions += datai;
                    selectedOptions += ':';
                    selectedOptions += datai;
                }
            }
            myGrid.jqGrid("setColProp", colModelColumnName, {
                edittype: "select",
                editoptions: { value: selectedOptions }
            });
        }
    );
};

editoptions.value 的设置将在setSelectOptionValues 内部异步 完成.因此，可能会在设置 editoptions.value 之前填充网格.另一方面，editoptions.value 将仅在编辑期间使用."/Person/GetSelectData" 的响应时间通常足够快，并且值 editoptions.value 将在用户开始编辑之前设置.如果你想绝对确定你仍然可以持有 editoptions.dataUrl.在这种情况下，editoptions.dataUrl 将仅在用户快速作为服务器响应 "/Person/GetSelectData" 时使用.您可以更改显式调用

The setting of editoptions.value will be done asynchronously inside of setSelectOptionValues. So it can be that the grid will be filled before the editoptions.value will be set. On the other side editoptions.value will be used only during editing. The response time from "/Person/GetSelectData" will be typically quick enough and the value editoptions.value will be set before the user start editing. If you want be absolutely sure you can still hold editoptions.dataUrl. In the case editoptions.dataUrl will be used only if the user quickly as the server with responding on "/Person/GetSelectData". You can change explicit call of

setSelectOptionValues("/Person/GetSelectData", $("#grid"), "PMOPerson");

使用 getGridParam 获取 colModel，循环遍历所有 colModel 项并为所有调用 setSelectOptionValues具有 editoptions.dataUrl.

with getting of colModel using getGridParam, the loop through all colModel items and calling of setSelectOptionValues for all items which has editoptions.dataUrl.

最后一种方法的主要限制:你不能使用 formatter: "select" (只是 edittype: "select" 而已).如果您使用 id 填充网格数据，并且 editoptions.value 或 formatoptions.value 提供 id 到文本的映射，那么我建议您使用第一种方法与 beforeProcessing 回调.

The main restriction of the last approach: you can't use formatter: "select" (just edittype: "select" only). If you fill grid data with ids and editoptions.value or formatoptions.value provides the mapping of ids to the texts then I would recommend you to use the first approach with beforeProcessing callback.

这篇关于使用jqgrid时，是否有recreateForm:true但也缓存dataUrl?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！