그리드 리로드 + 체크박스 유지

그리드 리로드 + 체크박스 유지

두명 이상의 사용자 정보 수정이나 삭제시 체크했던 체크박스 유지를 하기위해 이것저것 수행함

1. 먼저 그리드를 체크하면 html에서 어떤 변화가 생기는지 확인 

체크박스에 마우스커서를 올려놨을때

// 그리드 한줄
<tr role="row" id="1" tabindex="-1" class="jqgrow ui-row-ltr ui-widget-content" aria-selected="true">
<td role="gridcell" style="text-align:center;width: 35px;" aria-describedby="list2_cb">
 
//체크박스 
<input role="checkbox" type="checkbox" id="jqg_list2_1" class="cbox " name="jqg_list2_1" aria-selected="true">

그리드를 체크했을때 

// 그리드 한줄
<tr role="row" id="1" tabindex="-1" class="jqgrow ui-row-ltr ui-widget-content ui-state-highlight" 
  aria-selected="true">
<td role="gridcell" style="text-align:center;width: 35px;" aria-describedby="list2_cb">
 
 //체크박스 
<input role="checkbox" type="checkbox" id="jqg_list2_1" class="cbox " name="jqg_list2_1" aria-selected="true">

★

이렇게 그리드 tr에는 class 에 ui-state-highlight 추가되어 색 반전이 되고 aria-selected="true"

체크박스는 aria-selected="true"

이런 두가지 변화가 있었다.

12/06일 어제는 체크박스에 aria-selected="true" 추가되는거만 주목하여 그냥 선택한 rowid만큼 for문돌려 선택하게 하면 되겟구나 해서 jqgrid checked라고 검색을해

체크되는 것에만 주목하엿다.

        $("#list2").jqGrid('setGridParam', {
                    gridComplete : function() {
                            console.log("999");
                               for (var i = 0; i < rowid.length; i++) { //row id수만큼 실행           
                                   console.log("78789 "+"jqg_list2_"+rowid[i]);

                                    시도했던 여러가지 시도들...
                                    
                                    1. 아래방법으로 선택이 가능하나 실험해봄
                                       $("input:checkbox[id='jqg_list2_1']").prop("checked", true); 
                                    2. prop를 이용해 aria-selected에 true를 추가하려 함 
                                     $("#list2 > #jqg_list2_"+rowid[i]).prop("aria-selected","true");                         
                                    3. 그리드 안에 id가 jqg_list2_ (체트박스 id) 를 찾아 prop를 이용해 disabled을 하려함
                                     $("#list2").find("#jqg_list2_"+rowid[i]).prop("disabled","disabled") ;
                                    4.그리드 안에 id가 jqg_list2_ (체트박스 id) 를 찾아 attr로 속성을 checked로 
                                     $("#list2 > #jqg_list2_"+rowid[i]).attr("checked","checked") ;
                                 
                               console.log([i]);
                               }
                    }
                }).trigger("reloadGrid");

6일 하루종일하다가 7일 아침에 와서 정신차리고 다시 살펴보니 변화가 두가지인것을 알아챔 

그래서 일단 체크가 되는지 그리드에 직접 실험해보았다.

        //width : 850,
        height : '450px',
        showpage : true, // 페이징 true
        multiselect : true,
        pager : $('#pager'),
        autowidth: true,
        emptyrecords : "데이터가 없습니다." ,// 레코드가 없을때 보여줄 문구
        loadonce : false, // true를 하면은 페이징은 되지만 수정을했을때 리로드가 안됨 아니 그냥 리로드가 안됨 
        ondblClickRow: function(rowid){
            var dcode = new Array();         //userDetaileViewMult에서 값을 가져오기위해 어차피 값은 1개지만 배열에 담으려고 for문 돌림
            for (var i = 0; i < rowid.length; i++) {
                rows = JSON.stringify($("#list2").getRowData(rowid[i]));
                dcode.push(JSON.parse(rows).dcode);
            }
            $("#userModal_GridBtn").click();
            userDetaileViewMult(rowid, dcode);
        },
        gridComplete : function() {
            $(".ui-pg-input").css({"color" : "#333","text-align" : "center"});
             
            // 1.체크박스에 체크 추가
            $("input:checkbox[id='jqg_list2_1']").prop("checked", true);
            // 2.그리드에 class (css효과) 추가
          $("#1").attr("class", "jqgrow ui-row-ltr ui-widget-content ui-state-highlight");
        }
    });
}
 

그랫더니 잘 되었음 그래서 이젠 시도하려 ㄱㄱ

//사용자 정보수정 - 수정정보저장 후 데이터리로드
function userUpdateSaveData(dcode,rowid,cnt){
    //alert("사용자 정보수정 - 다중");
    $.ajax({
        url:'/library/userUpdateModalMult.do',
        type:'POST',
        data:JSON.stringify(dcode),
        dataType:'html',
        contentType : "application/json",
        success: function(data){
            var list = JSON.parse(data);
            var modalTitle = {};
                modalTitle.title = "사용자 정보수정";
                modalTitle.formClass = "user_UpdatePopup";
            var selCount = rowid.length;
            
                nextUserUpdateModalMult(list, modalTitle, cnt, selCount,rowid);// 수정된 정보 저장 후 다중상세보기 AJAX로 가기위해 rowid를 추가
                
                console.log("dd "+rowid.length);
/*                $("#list2").jqGrid({}).trigger("reloadGrid");  // jqGrid 리로드
*/                
                $("#list2").jqGrid('setGridParam', {
                    gridComplete : function() {
                               for (var i = 0; i < rowid.length; i++) { //row id수만큼 실행           
                                   $("input:checkbox[id='jqg_list2_"+rowid[i]+"']").prop("checked", true);
                                   $("#"+rowid[i]+"").attr("class", "jqgrow ui-row-ltr ui-widget-content ui-state-highlight");
                               }
                    }
                }).trigger("reloadGrid");
        },
        error:  function(request, status, error) {
            console.log("code:" + request.status + "\n" + "message:"
                    + request.responseText + "\n" + "error:" + error);
             alert("실패");
        }
    });
}
 

이젠 새로고침해도 체크박스가 그대로 남아있음 ㅠㅠ