jquery – 当使用jqgrid时,无论如何都有recreateForm:true但是还缓存dataUrl?

前端之家收集整理的这篇文章主要介绍了jquery – 当使用jqgrid时,无论如何都有recreateForm:true但是还缓存dataUrl?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下列使用jqGrid(简化)
{ 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 },

当我通过调出编辑对话框来编辑一行时,需要10秒才能填充PMOPerson下拉列表.甚至在我之前已经加载过一次之后就是这种情况,我认为这是因为我在下面重新创建了一个形式:true

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中的项目列表,以避免每次编辑行时都返回到服务器.

解决方法

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

我在the answer和前两个(thisthis)中描述了如何在beforeProcessing回调中动态设置editoptions.value.需要扩展来自用于填充网格的服务器的响应以及其他信息(使用从editoptions.dataUrl返回的数据等数据).在我看来,它实现了editoptions.dataUrl数据缓存和重新加载网格刷新数据之间的最佳折衷.仍然可以在服务器端保存缓存的editoptions.dataUrl数据.

或者,可以使用更简单的方法,在创建网格后对createoptions.dataUrl进行一次手动Ajax请求,并且可以在Ajax请求的成功(完成)回调中设置editoptions.value.代码将涉及以下内容

// 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>的文本和选项的值.然后可能是以下

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”的服务器时才会使用.您可以更改显式调用

setSelectOptionValues("/Person/GetSelectData","PMOPerson");

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

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

猜你在找的jQuery相关文章