2011-02-25 2 views
1

jquery 용 flexigrid 플러그인을 사용하려고하는데, 문제는 플러그인 팬시 박스를 사용하고 싶지만이 플러그인은 jQuery 1.4.3을 사용하지만 flexigrid는 해당 jquery 버전에서 작동하지 않는 것 같습니다.Flexigrid가 jQuery 1.4.3에서 작동하지 않습니까?

flexigrid와 함께 제공되는 이전 jquery 버전으로 롤백하면 표가 작동하지만 fancybox는 작동하지 않습니다.

내가 사용하고있는 코드입니다 :

 $("#grid1").flexigrid 
     (
     { 
     url: 'php/get.php', 
     dataType: 'json', 
     colModel : [ 
      {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'}, 
      {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'}, 
      {display: 'Email', name : 'email', width : 120, sortable : true, align: 'left'}, 
      {display: 'tID', name : 'tid', width : 130, sortable : true, align: 'left'}, 
      {display: 'Active', name : 'numcode', width : 80, sortable : true, align: 'right'} 
      ], 
     buttons : [ 
      {name: 'Add', bclass: 'add', onpress : doAction}, 
      {separator: true}, 
      {name: 'Delete', bclass: 'delete', onpress : doAction}, 
      {separator: true}, 
      {name: 'Activate', bclass: 'activate', onpress : doAction}, 
      {separator: true}, 
      {name: 'Deactivate', bclass: 'deactivate', onpress : doAction}, 
      {separator: true} 
      ], 
     searchitems : [ 
      {display: 'Name', name : 'name', isdefault: true} 
      ], 
     sortname: "id", 
     sortorder: "asc", 
     usepager: true, 
     title: 'XXX', 
     useRp: true, 
     rp: 15, 
     showTableToggleBtn: true, 
     width: 700, 
     height: 200 
     } 
     ); 
</script> 

그리고 PHP는 응답은 다음과 같습니다 : 나는 개똥 벌레를 사용하고하고있는 JS 오류가 표시되지 않습니다

{ 
page: 1, 
total: 3, 
rows: [ 
{id:'28',cell:['28','test','test','test','1']}, 
{id:'27',cell:['27','test','test','test','1']}, 
{id:'26',cell:['26','etrer','ter','trt','0']}] 
} 

.

jquery 1.4.3에서 flexigid를 사용할 방법이 있습니까?

+0

어떤 오류가 줄 않습니다, 또는 당신은 내가 당신이 jQuery를 사용해서는 안하면 내가 당신의 문제에 대한 ExtJS로 추천합니다 같은 문제 – mcgrailm

+0

이 알아낼 않았다 –

+0

가? – shaheer

답변

1

하는 따옴표가 아닌 단일 인용 부호를 사용하여 JSON을 렌더링 시도 v1.3.2로 작동하는 것 같다.

0

jQuery 1.6.1과 함께 작동하는 두 플러그인이 있다고 생각합니다. 분명히 flexigridfancybox jQuery 플러그인과 내가 flexigrid.json이라고 부른 JSON 파일의 예제에 달려있다. 다음과 같은 내용으로 flexigrid.json라는 파일을 그 플러그인을 다운로드하고 자바 스크립트와 CSS에 대한 올바른 위치에 srchref 링크가 있는지 확인하고 작성하는 경우 :

{ 
    "page": 1, 
    "total": 3, 
    "rows": [ 
    {"id":28,"cell":[28,"test","test","test",1]}, 
    {"id":27,"cell":[27,"test","test","test",1]}, 
    {"id":26,"cell":[26,"etrer","ter","trt",0]}] 
} 

참고 : 귀하의 예제에서 json으로는 유효하지 않습니다 (@ Josh는 이미 지적했듯이). 오류를 확인하려면 an online parser에서 실행하십시오. 여기

모두 플러그인과 예제 페이지입니다 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>Test</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
    <script src="flexigrid/js/flexigrid.pack.js" type="text/javascript"></script> 
    <link type="text/css" rel="stylesheet" href="flexigrid/css/flexigrid.pack.css"/> 
    <script src="fancybox/jquery.fancybox-1.3.4.js" type="text/javascript"></script> 
    <link type="text/css" rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css"/> 
    <script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      function doAction() {} 

      $("#grid1").flexigrid({ 
       url: 'flexigrid.json', 
       dataType: 'json', 
       colModel : [ 
        {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'}, 
        {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'}, 
        {display: 'Email', name : 'email', width : 120, sortable : true, align: 'left'}, 
        {display: 'tID', name : 'tid', width : 130, sortable : true, align: 'left'}, 
        {display: 'Active', name : 'numcode', width : 80, sortable : true, align: 'right'} 
        ], 
       buttons : [ 
        {name: 'Add', bclass: 'add', onpress : doAction}, 
        {separator: true}, 
        {name: 'Delete', bclass: 'delete', onpress : doAction}, 
        {separator: true}, 
        {name: 'Activate', bclass: 'activate', onpress : doAction}, 
        {separator: true}, 
        {name: 'Deactivate', bclass: 'deactivate', onpress : doAction}, 
        {separator: true} 
        ], 
       searchitems : [ 
        {display: 'Name', name : 'name', isdefault: true} 
        ], 
       sortname: "id", 
       sortorder: "asc", 
       usepager: true, 
       title: 'XXX', 
       useRp: true, 
       rp: 15, 
       showTableToggleBtn: true, 
       width: 700, 
       height: 200 
      }); 

      $("a#example1").fancybox({ 
       'titleShow'  : false 
      }); 

      $("a#example2").fancybox({ 
       'titleShow'  : false, 
       'transitionIn' : 'elastic', 
       'transitionOut' : 'elastic', 
       'easingIn'  : 'easeOutBack', 
       'easingOut'  : 'easeInBack' 
      }); 

      $("a#example3").fancybox({ 
       'titleShow'  : false, 
       'transitionIn' : 'none', 
       'transitionOut' : 'none' 
      }); 
     }); 
    </script> 
</head> 
<body> 
<table id="grid1"><tr><td></td></tr></table> 

<p>Different animations - 'fade', 'elastic' and 'none'<br /> 
    <a id="example1" href="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg"> 
     <img alt="example1" src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026_m.jpg" /> 
    </a> 
    <a id="example2" href="http://farm3.static.flickr.com/2489/4234944202_0fe7930011.jpg"> 
     <img alt="example2" src="http://farm3.static.flickr.com/2489/4234944202_0fe7930011_m.jpg" /> 
    </a> 
    <a id="example3" href="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg"> 
     <img alt="example3" src="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a_m.jpg" /> 
    </a> 
</p> 
</body> 
</html> 

참고 : 인해 Same origin policy 보안 제한에 크롬 13에서 테스트 할 때이 로컬에서 작동하지 않습니다. 콘솔에서 오류를 볼 수 있습니다. Origin-null은 Access-Control-Allow-Origin에 의해 허용되지 않습니다.. 적절한 웹 서버에서 예제 페이지와 JSON을 제공해야합니다.

희망이 도움이됩니다.

0

동일한 문제를 해결하기 위해 노력하고 있습니다. 나는 아래의 링크가 도움이되는 것을 발견했다.

핵심 문제 -.. JSON 파일에 구문 오류가있는 경우 jQuery를 1.4, 요청이 일반적으로 자동으로 실패합니다 이런 이유로 JSON 데이터의 손을 자주 편집하지 마십시오 "groups.google.com
에서 JSON JavaScript의 객체 리터럴 표기법보다 엄격한 구문 규칙이있는 데이터 교환 형식입니다. 예를 들어 JSON에 표시된 모든 문자열은 속성이든 값이든 관계없이 큰 따옴표로 묶어야합니다 .JSON 형식에 대한 자세한 내용은 , http://json.org/을 참조하십시오. 기본적으로 json에주의를 기울여야하며 형식이 올바르게 지정되어야합니다. 관련이있는 것으로 추측합니다 .json.org 사이트를 확인하고 JSON이 올바른지 확인하십시오."

http://simonwillison.net/2006/oct/11/json/

http://jsonformatter.curiousconcept.com/#jsonformatter

관련 문제