복붙노트

[JQUERY] 있는 jqGrid 크롬 / 크롬 프레임에서 제대로 렌더링하지 않습니다

JQUERY

있는 jqGrid 크롬 / 크롬 프레임에서 제대로 렌더링하지 않습니다

해결법


  1. 1.내가 버전 19 오늘 내 크롬 업데이트, 문제를 재현하고 대응하는 빠른 & 더러운 수정 프로그램을 만들었습니다 :

    내가 버전 19 오늘 내 크롬 업데이트, 문제를 재현하고 대응하는 빠른 & 더러운 수정 프로그램을 만들었습니다 :

    내가있는 jqGrid 코드의 라인을 변경하는 것이 좋습니다

    isSafari = $.browser.webkit || $.browser.safari ? true : false;
    

    다음과

    isSafari = ($.browser.webkit || $.browser.safari) &&
        parseFloat($.browser.version)<536.5 ? true : false; // Chrome < version 19
    

    데모 수정 프로그램을 사용합니다. 나는에 사용 jquery.jqGrid.src.js의 고정 된 버전은 여기에서 얻을 수있는 데모.

    나는 IE9 (v9.0.8112.16421), IE8 (8.0.6001.18702CO), 크롬 18.0.125.168, 크롬 19.0.1084.46, 사파리 5.1.7 (7534.57.2), 파이어 폭스 (12), 오페라 11.62에 테스트. 모든 웹 브라우저에서 데모에는 수평 스크롤바가 없으며 그것은 다음과 같이 보입니다 :

    앞으로이 모든 버전 번호 또는 웹 브라우저에서 직접 종속성이없는 더 깊은 격자의 폭의 계산을 변경하는 것이 더 나은 것입니다. 나는 사람이있는 jqGrid의 일부 지역에서 더 많은 jQuery를 방법 $ .width 및 $ .outerWidth을 사용하는 경우는 가능 바랍니다. 어떤 방법으로 나는 설명 수정 위의 많은있는 jqGrid 사용자에게 이미 도움이 될 수 있기를 바랍니다.

    업데이트 : 나는 버그 리포트 trirand 내 제안을 기록했다.

    2 월 갱신하는 것은 : 정확히 같은 $의 .browser.webkit를 사용하는 코드에서 세 개의 장소가 될하려면 || 전술 한 바와 같이 $ .browser.safari 구문 : setGridWidth, getOffset의 내부 showHideCol 내부 setGridWidth 내부 열 다중 선택의 폭을 계산의 내부 안쪽. 처음 세 개의 장소 isSafari 변수를 사용합니다. 마지막 두 곳은 $ .browser.webkit를 사용 || 직접 .browser.safari $. 하나는 코드를 모든 장소에서 교체해야합니다

    $.browser.webkit||$.browser.safari
    

    ...에

    ($.browser.webkit || $.browser.safari) && parseFloat($.browser.version)<536.5
    

    그래서 하나는 세 곳에서이 작업을 수행해야합니다 :

    당신은 여기에 모든 수정과 jquery.jqGrid.src의 고정 버전을 다운로드 할 수 있습니다. 당신이있는 jqGrid의 이전 버전을 사용하는 경우 당신은 jquery.jqGrid.src 자신의 코드에서 같은 변경 작업을 수행 할 수 있습니다. 생산을위한 최소 버전을 생성하는 방법은 최소화 부 당신을 잘 알고 사용할 수 있습니다. 나는 예를 들어 마이크로 소프트 아약스 Minifier 4.0 사용합니다. 그냥 설치하고 실행

    AjaxMin.exe jquery.jqGrid.src-fixed3.js -o jquery.jqGrid.min-fixed3.js
    

    결과적으로 당신은 원래 jquery.jqGrid.min.js 같은 더 작은 것 jquery.jqGrid.min-fixed3.js을 얻을 것이다. 이 파일에 주석 헤더를 추가해도 파일이 jquery.jqGrid.min.js의 원래 버전으로 여전히 작은 것 (수정 된 파일을 참조).

    내 버그 보고서의 일부 반복과 방법 cellWidth가 도입 된 수정 프로그램의 또 하나 개의 버전 거기 개선 후 :

    cellWidth : function () {
        var $testDiv = $("<div class='ui-jqgrid' style='left:10000px'><table class='ui-jqgrid-btable' style='width:5px;'><tr class='jqgrow'><td style='width:5px;'></td></tr></table></div>"),
            testCell = $testDiv.appendTo("body")
                .find("td")
                .width();
            $testDiv.remove();
            return testCell !== 5;
    }
    

    여기를 보아라. 당신이 길을 따라하려는 경우 당신은 또한이 작업을 수행 할 수 있습니다. 모든 장소에있는 경우 어디에 isSafari 또는 $ .browser.webkit || (showHideCol 및 setGridWidth에서) $ .browser.safari는 () 대신 $를 .jgrid.cellWidth을 사용할 수 있습니다 사용됩니다.

    3 업데이트 : 오늘은 내가 위에서 설명하는 수정합니다 (cellWidth 방법)을 포함하는있는 jqGrid 4.3.3 출판되었다. 나는 새 버전을 사용하는 모든 추천 그래서.

    4 업데이트 : 구글 크롬은 20 개 용도는 536.11를 웹킷. 폭의 고정 계산에있는 jqGrid의 마지막 버전을 사용할 수 없습니다 모두가에서는 parseFloat ($. browser.version) <536.11 (또는 닫기) 대신에서는 parseFloat ($. browser.version를) <사용해야합니다 그래서 536.5은 설명 하여 답의 시작. 구글 크롬 23 웹킷은 537.11을 사용합니다.


  2. 2.올렉의 솔루션은 날 위해 일했습니다.

    올렉의 솔루션은 날 위해 일했습니다.

    난 그냥 최소 버전을 편집

    라인 49 :

    대체 :

    m = b.browser.webkit || b.browser.safari 0 :?! (1)

    와:

    m = (b.browser.webkit || b.browser.safari) &&에서는 parseFloat (b.browser.version) <536.5 0?! 1

    도와 주셔서 감사합니다!


  3. 3.올렉의 대답은 올바른 것입니다. 당신이있는 jqGrid의 이전 버전을 사용하고 이러한 수정 사항을 적용 할 경우 그러나, Github에서의 차이점에서 직접 변경을 쉽게 할 수있다. 그래서 아마도 그것은 4.x의 시리즈 중 하나에서 작동이 성공적으로 사용하여있는 jqGrid 4.0.0을 테스트했습니다.

    올렉의 대답은 올바른 것입니다. 당신이있는 jqGrid의 이전 버전을 사용하고 이러한 수정 사항을 적용 할 경우 그러나, Github에서의 차이점에서 직접 변경을 쉽게 할 수있다. 그래서 아마도 그것은 4.x의 시리즈 중 하나에서 작동이 성공적으로 사용하여있는 jqGrid 4.0.0을 테스트했습니다.

    그냥 처음은 diff로 시작하고 순서대로 각각 적용됩니다. 이것은 cellWidth 기능을 추가하고 jquery.jqGrid.src.js 파일에서 필요한 모든 변경 사항을 만들 것입니다. 당신이 축소 된 버전을 만들려면 그럼 당신은 구글의 폐쇄 컴파일러를 사용할 수 있습니다 :

    그것은 많은 변화 것 같아,하지만 당신은 실제 코드를 볼 때 변화는 매우 빠르게 이동합니다. 불과 몇 소스 라인이 영향을받습니다.


  4. 4.크롬 베타 버전 20.0.1132.11 아웃하고 다음을보고합니다

    크롬 베타 버전 20.0.1132.11 아웃하고 다음을보고합니다

    User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.11 Safari/536.11
    

    나는 패치 작동되지 않는 원인으로 인해 텍스트 비교 대 숫자에 536.5 <으로 평가하고있다 536.11 추측 무엇입니까?

    도와주세요!


  5. 5.업데이트 : 내 대답은 몇 달 전에 파이어 폭스에서 일어난 나는 그것이 크롬 19 일 것이지만, 현재 올렉의 대답은 올바른 접근 방법이라고 희망 제안 유사한 문제를 의미합니다.

    업데이트 : 내 대답은 몇 달 전에 파이어 폭스에서 일어난 나는 그것이 크롬 19 일 것이지만, 현재 올렉의 대답은 올바른 접근 방법이라고 희망 제안 유사한 문제를 의미합니다.

    나는 FF로 몇 달 전에 비슷한 문제가 있었다 나는 완전히이 hscroll을 해제해야 ForceFit 옵션을 사용했다하지만 난 그냥 내 forcefit 그리드에 대한이 hscroll을 사용할 수 있도록 나는 아직도 그것을 얻을 것이다 언급처럼. 몇 가지 업데이트 이후 FF의, 그것은 정지 해프닝을했고, 현재 내 모든 그리드 (19)가 해제 될 때 그렇게 잘하면 그것이 문제가되지 않을 것입니다 크롬 18에서 잘입니다.

    //remove HScroll
    function jqGridDisableHScroll(gridid) {
        //if columns are force fit all columns will always fit on screen.
        if ($('#' + gridid).jqGrid('getGridParam', 'forceFit')) {
            var gridview = $('#gview_' + gridid);
            $('.ui-jqgrid-bdiv', gridview).css({ 'overflow-x': 'hidden' });
        }
    }
    

    강제 맞춤

    true로 설정하고, 컬럼의 폭의 크기를 조정하는 경우 (오른쪽)에 인접하여 열을 유지 폭 전체 그리드 (예를 들면, 30 픽셀에 의해 열 (2)의 폭을 줄이는 것이하여 칼럼 (3)의 크기가 증가되도록 크기를 조정한다 30 픽셀). 이 경우에는 수평 scrolbar이 없습니다. 참고 :이 옵션은 shrinkToFit 옵션과 호환되지 않습니다 - 즉 shrinkToFit가 false로 설정되어있는 경우, forceFit이 무시됩니다.


  6. 6.바로이 때문에 최종적으로 해결 된 웹킷 문제 78412에 가능성이 있음을 지적하고 싶었다. 기본적으로는 국경을 설명 할 것이고, 고정 레이아웃 테이블의 폭을 계산할 때 나는뿐만 아니라 패딩을 믿습니다.

    바로이 때문에 최종적으로 해결 된 웹킷 문제 78412에 가능성이 있음을 지적하고 싶었다. 기본적으로는 국경을 설명 할 것이고, 고정 레이아웃 테이블의 폭을 계산할 때 나는뿐만 아니라 패딩을 믿습니다.

    이있는 jqGrid 잘못 컨텐츠 영역의 폭과 테이블의 폭을 계산하는 것을 의미했다. 그래서 국경을 제거하고 패딩은 문제를 해결해야하지만, 당신은 아마 그렇게하고 싶지 않아요.


  7. 7.! 우리는 ... 문제를 해결 그것을 해결하기 위해하지 않았다 jgGrid 4.3.3 cellWidth 사용, 나는 라인 반환에서는 parseInt (testCell) == 5를 추가; 대신 testCell을 반환 == 5! cellWidth 방법이다. 아마 최선의 해결책은 아니지만, 우리를 위해 작동합니다 :)

    ! 우리는 ... 문제를 해결 그것을 해결하기 위해하지 않았다 jgGrid 4.3.3 cellWidth 사용, 나는 라인 반환에서는 parseInt (testCell) == 5를 추가; 대신 testCell을 반환 == 5! cellWidth 방법이다. 아마 최선의 해결책은 아니지만, 우리를 위해 작동합니다 :)


  8. 8.크롬 59.0.3071.115 I에있는 jqGrid 4.5.2에서 할 grid.base.js 년에 cellWidth 기능을 변경 :

    크롬 59.0.3071.115 I에있는 jqGrid 4.5.2에서 할 grid.base.js 년에 cellWidth 기능을 변경 :

     return Math.round(testCell) !== 5
    
  9. from https://stackoverflow.com/questions/10588587/jqgrid-does-not-render-correctly-in-chrome-chrome-frame by cc-by-sa and MIT license