jquery - jqgrid를 사용할 때 어쨌든 recreateForm:true뿐만 아니라 dataUrl도 캐시합니까?



asp.net-mvc caching (1)

다음 열은 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 },

편집 대화 상자를 열어 행을 편집하려면 PMOPerson 드롭 다운이 채워지는 데 10 초가 걸립니다. 이 경우에도 한번 전에 이미 한 번로드 한 후 나는 recreateForm 있기 때문에 가정합니다 : 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의 항목 목록도 캐시합니다.


Answer #1

나는 여기 와 여기 에서 매우 가까운 질문에 대답했다. 즉, HTTP 헤더의 캐싱 옵션을 사용하거나 editoptions.value 대신 editoptions.value 를 사용할 수 있습니다.

나는 대답 과이 두 이전의 것 ( 이것 과 이것 )이 어떻게 beforeProcessing 콜백 내에서 beforeProcessing 동적으로 설정할 수 있는지 설명했다. 그리드를 채우는 데 사용 된 서버의 응답을 추가 정보 ( editoptions.dataUrl 에서 반환 된 데이터와 같은 데이터 포함)로 editoptions.dataUrl 합니다. 제 의견으로는 editoptions.dataUrl 데이터 캐싱과 그리드를 다시로드하여 데이터를 새로 고치는 것 사이에서 가장 좋은 절충안을 구현합니다. 하나는 여전히 서버 측에서 캐시 된 editoptions.dataUrl 데이터 보유 할 수 있습니다.

또는, 그리드를 생성 한 후 한 번 수동으로 Ajax 요청을 editoptions.dataUrl 하여 editoptions.dataUrl 요청하고 Ajax 요청의 success ( done ) 콜백 내에서 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 의 코드는 "/Person/GetSelectData" 와 같은 URL과 통신하는 데 사용하는 JSON 데이터 형식에 따라 다릅니다. 예를 들어, 서버가 텍스트의 배열과 <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", $("#grid"), "PMOPerson");

colModel 사용하여 getGridParam 을 가져 getGridParam , 모든 colModel 항목을 반복하고 colModel 이있는 모든 항목에 대해 setSelectOptionValues 를 호출합니다.

마지막 접근법의 주된 제한 사항은 formatter: "select" 사용할 수 없다는 것입니다 formatter: "select" (단지 edittype: "select" 만). 그리드 데이터를 ID로 editoptions.value 또는 formatoptions.value 를 사용하여 ID를 텍스트에 매핑하면 beforeProcessing 콜백과 함께 첫 번째 방법을 사용하는 것이 좋습니다.