2012-03-15 2 views
0

내 응용 프로그램에 JGGrid (버전 4.1.1)를 사용했습니다. 내 그리드의 문제는 툴팁이 빈 셀에도 표시된다는 것입니다. 그리드 셀에서 데이터를 사용할 수 없다면 툴팁을 피하거나 숨기는 방법은 무엇입니까? 일부 게시물을 읽었습니다.이 문제는 3.6 버전의 JQGrid에서 해결되었습니다. 그러나 아직도오고있다. 누군가이 문제를 해결하도록 도와 줄 수 있습니까?빈 툴팁이 JQGrid 셀에 표시되고 정렬이 제대로 작동하지 않습니다.

업데이트 # 1

이 코드의 또 다른 문제는 정렬입니다. 제대로 작동하지 않습니다. 부품 번호 열이 정렬되지 않고 Length, Diameter 및 GlobalShipments와 같은 열이 Float 유형 대신 Text 유형에 따라 정렬됩니다. sorttype을이 열의 float로 지정했습니다. 하지만 여전히 텍스트 값을 기준으로 정렬됩니다. 여기에 큰 코드를 게시

있는 jqGrid 데모

<link rel="stylesheet" type="text/css" media="screen" href="themes/blitzer/jquery-ui-1.8.16.custom.css" /> 
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" /> 
    <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> 
    <script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script> 
    <script src="js/grid.locale-en.js" type="text/javascript"></script>   
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     $.jgrid.no_legacy_api = true; 
     $.jgrid.useJSON = true; 

     var mydata = []; 
     var jsonColModel = {}; 

     $(function() { 
      mydata = [ 
       { //hiding the data as it is conf.. }]; 

      var strColumnModelold = '[{ "label": "Part Number", "name": "partNumber", "index": "partNumber ", "width": 80 }, { "label": "Part Revision", "name": "partRevision", "index": "partRevision", "width": 50, "align": "center" }, { "label": "Part Status", "name": "partStatus", "index": "partStatus", "width": 80, "hidden": true }, { "label": "Policy", "name": "policy", "index": "policy", "width": 100, "hidden": true }, { "label": "Status", "name": "status", "index": "status", "width": 80 }, { "label": "IDM", "name": "idm", "index": "idm", "width": 45, "align": "center" }, { "label": "IDM2", "name": "idm2", "index": "idm2", "width": 45, "hidden": true, "align": "center" }, { "label": "Part Type", "name": "partType", "index": "partType", "width": 75, "align": "center" }, { "label": "Diameter [min] (mm)", "name": "diameterMinMm", "index": "diameterMinMm", "width": 50, "hidden": true, "align": "center", "sortType": "float" }, { "label": "Diameter [max] (mm)", "name": "diameterMaxMm", "index": "diameterMaxMm", "width": 50, "hidden": true, "align": "center", "sortType": "float" }, { "label": "Diameter [nominal] (mm)", "name": "diameterNomMm", "index": "diameterNomMm", "width": 50, "align": "center", "sortType": "float" }, { "label": "Length [min] (mm)", "name": "lengthMinMm", "index": "lengthMinMm", "width": 50, "hidden": true, "align": "center", "sortType": "float" }, { "label": "Length [max] (mm)", "name": "lengthMaxMm", "index": "lengthMaxMm", "width": 50, "hidden": true, "align": "center", "sortType": "float" }, { "label": "Length [nominal] (mm)", "name": "lengthNomMm", "index": "lengthNomMm", "width": 50, "align": "center", "sortType": "float" }, { "label": "Global Shipments", "name": "globalShipments", "index": "globalShipments", "width": 50, "align": "center", "sortType": "float" }, { "label": "IFP", "name": "ifp", "index": "ifp", "width": 35, "align": "center" }, { "label": "Inch or Metric", "name": "metricSystem", "index": "metricSystem", "width": 45, "align": "center"}]'; 

      jsonColModel = $.parseJSON(strColumnModelold); 
      createGrid(); 
     }); 

     function createGrid() { 

      $("#list2").jqGrid({ 
       datatype: 'local', 
       data: mydata, 
       colModel: jsonColModel, 
       rowNum: 10, 
       rowList: [10, 25, 50], 
       pager: '#pager2', 
       page: 1, 
       gridview: true, 
       rownumbers: false, 
       viewrecords: true, 
       altRows: true, 
       loadtext: "Loading parts data...", 
       ajaxGridOptions: { cache: false }, 
       caption: 'Part Data', 
       width: 713, 
       shrinkToFit: false, 
       scrollOffset: 0, 
       height: '100%' 
      }); 
     } 
    </script> 
</head> 
<body> 
    <div> 
     <table id="list2"></table> 
     <div id="pager2" ></div>  
    </div> 
</body> 

미안 :

여기 내 코드 (이 툴팁 문제 및 정렬 문제를 모두 가지고)입니다.

+0

jqGrid 4.0의 몇 가지 예제를 살펴본 결과 그리드 셀이 비어 있으면 툴팁이 표시되지 않습니다. [jqGrid Demos] (http://trirand.com/blog/jqgrid/jqgrid.html)의 "데이터로드"섹션을 참조하십시오. 코드에서 수행중인 작업이 있어야합니다. 아마도 코드를 게시하면 누군가가 당신을 도울 수 있습니다. – neo108

+0

jqGrid 4.1.1 및 4.3.1을 사용하여 몇 가지 테스트를 수행 했으므로 문제가 재현되지 않습니다. 문제를 재현하는 데 사용할 수있는 코드 및 테스트 데이터를 게시해야합니다. – Oleg

+0

들어오는 데이터에 null이 있으면 빈 툴팁이 표시됩니까? – Dinesh

답변

2

현재 데이터가 이 아니 어서이 아니기 때문에 문제가 발생합니다. 데이터에 "status": "" 대신 "status": " "이 포함되어 있습니다. jqGrid에서 사용하기 전에 데이터를 자르면 문제가 해결됩니다.

코드에 대한 약간의 추가 설명입니다. datatype: 'local'을 사용하므로 ajaxGridOptions: { cache: false } 옵션을 제거 할 수 있습니다. 기본값 인 page: 1도 삭제할 수 있습니다.

$.jgrid.no_legacy_api = true을 잘못 사용했습니다. 올바른 방법은 경우에 $.jgrid.no_legacy_api

<script type="text/javascript" src="js/grid.locale-en.js"></script> 
<script type="text/javascript"> 
    $.jgrid.no_legacy_api = true; 
    $.jgrid.useJSON = true; 
</script> 
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script> 

jquery.jqGrid.min.js전에 설정 될 수 있지만, grid.locale-en.js$.jgrid 객체를 생성하는 것이다.

또한 mydata, jsonColModelcreateGrid의 정의가 $(function() {...}); 인 것을 권합니다. 페이지에 포함 된 다른 모든 JavaScript와 다른 전역 객체와의 가능한 이름 충돌을 줄입니다.

관련 문제