2014-12-17 2 views
1

나는 부트 스트랩으로 asp.net 사이트에서 일하고있다. 업데이트 패널 내에서 http://www.codeproject.com/Articles/547745/Add-Responsive-Behaviour-to-a-GridView-in-ASP-NET에서 확장되어 그리드 뷰 응답을 처리합니다..Net Responsive Gridview

랩톱/pc에서 테스트 할 때 효과적이지만 전화를 통해 실제로 gridview가있는 페이지를 볼 때 작동하지 않습니다. 내가 테스트 한 것은 안드로이드입니다.

설명 : 두 개의 테이블 인스턴스를 만듭니다. 하나는 정적 열이되고 다른 하나는 오버플로 컨테이너에 스크롤 가능한 데이터가 포함됩니다.

이 코드를 사용하여 gridview 샘플을 보려면 http://dev6.web2market.com/으로 이동하십시오. 헤더의 "내 계정"링크를 클릭하십시오. 자격증 ... Username : [email protected] 비밀 번호 : SoTesting1! 스크립트가 실행될 수 있도록 브라우저의 너비를 600px 이하로 조정하십시오. 소스 코드는 정적 테이블과 오버플로 컨테이너의 스크롤 가능한 테이블을 모두 표시합니다.

나는 올바른 방향으로 밀어 넣을 수 있습니다. 전체 자바 스크립트 파일을 게시했습니다 : http://jsfiddle.net/jcw2m/9fquzoxj/. (바이올린 링크를 공유하는 데 필요한) 작은 샘플이 필요 다른 사람들을위한

// Detect overflow by checking the table width against that of its parent tree 
 
     function setupResponsiveTable(table) { 
 
      tableWidth = table.width(); 
 
      if (table.parent().hasClass(_overflowContainer)) { 
 
       tableWidth += $('.' + _staticContainer).width(); 
 
      } 
 

 
      isResponsive = false; 
 
      table.parents().each(function() { 
 
       if (!$(this).hasClass(_overflowContainer) 
 
\t \t \t \t \t && tableWidth > $(this).width() 
 
\t \t \t \t \t 
 
\t \t \t \t) { 
 
        isResponsive = true; 
 
\t \t \t \t \t 
 

 
        // break out of each 
 
        return (false); 
 
       } 
 
      });

답변

1

. jquery.responsivetable.js에서, 라인 (118)의 주위에,이 코드 블록 찾는다 :

   table.before(tableStatic); 

      table.wrap(_divClass + _overflowContainer + '" style="float:left;' + _overflow + ':scroll;' + _overflow + '-y:hidden;"/>'); 
      tableStatic.wrap(_divClass + _staticContainer + '" style="float:left;"/>'); 

      if (options.scrollHintEnabled) { 
       setupScrollHint(table, tos); 
      } 
      //This line added courtesy Marty. The class "table" is from bootstrap. When present on the table contained in the overflow div, it causes column headers to shift to the left instead of aligning with their respective column data. jc 12/17/14 
      ***table.removeClass("table");***   
     } 

마지막 라인 "table.removeClass ("테이블 ");" 그 트릭을 끝내는 것이 었습니다.