2013-06-27 2 views
0

jqgrid를 채우는 데 사용하는 json 문자열이 있습니다. 문자열에서 나는 하나의 요소가 하이퍼 링크입니다. 문제는 내가이 문자열을 사용하면 그리드가 전혀로드되지 않는다는 것입니다. 여기에 내 코드가jsonstring 데이터를 사용하여 JQGrid에 하이퍼 링크 넣기

var json = '{"total": "","page": "1","records": "","rows" : [{"id" :"1", "cell" :["<a  href="http://www.google.com">Quantum of Solace</a>","142456", "1234.89", "1234"]},{"id" :"2", "cell":["01/04/2013", "7741", "007997.66", "234"]},{"id" :"3", "cell":["06/08/2013", "78976", "2329.336", "234"]},{"id" :"4", "cell":["01/01/2012", "6678", "2154.22", "1234"]},]}'; 

jQuery(document).ready(function() { 

      jQuery("#list").jqGrid({ 
       datatype: 'jsonstring', 
       datastr:json, 

       colNames: ['Date', 'Account ', 'Amount', 'Code'], 
       colModel: [ 
    { name: 'adate', index: 'adate', width: 90, sorttype: 'date', datefmt: 'Y-m-d' }, 
    { name: 'account', index: 'account', width: 80, align: 'right', sorttype: 'int' }, 
    { name: 'amount', index: 'amount', width: 80, align: 'right', sorttype: 'float' }, 
    { name: 'code', index: 'code', width: 80, align: 'right', sorttype: 'int' } 

    ], 


       pager: "#pager", 
       toppager: true, 
       rowNum: 10, 
       rowList: [10, 20, 30], 
       toolbar: [true, "top"], 
       sortorder: "desc", 
       viewrecords: true, 
       gridview: true, 
       imgpath: 'F:/profile/ProgramFiles/JQGrid/jquery-ui-1.10.3.custom/development-bundle/themes/redmond/images', 
       autoencode: true, 
       height: '100%', 
       caption: "My first grid" 


      }).navGrid('#pager', { edit: true, add: true, del: true, search: true, refresh: true, cloneToTop: true }); 


     }); 

colModel을 변경해야합니까? 그리드가로드되지 않는 이유는 무엇입니까? 링크를 임의의 텍스트로 바꾸면 격자가 제대로 작동합니다.

도와주세요, 난 정말 그리드의 하이퍼 링크를 구현해야하고 난 imgpath: 'F:/profile/...' 옵션을 모두 사용 예를 myName: 'user2334092'에 대한의 사용과 같은 동일한 효과를의 백엔드

답변

0

먼저 그것을해야한다. 두 옵션 모두 jqGrid에서 알 수없는 것으로 무시됩니다. my previous answer에 그것에 대해 썼습니다.

서버에서 가져온 하이퍼 링크가있는 그리드 열이 필요한 경우 다음을 수행 할 수 있습니다. 데이터로 하이퍼 링크 에 필요한 모든 정보를 입력해야합니다. 예를

를 들어
[ 
    { 
     "id": 10, 
     "href": "http://www.google.com", 
     "linktext": "Quantum of Solace", 
     "adate": "2012-12-15", 
     "account": 142456, 
     "amount": 1234.89, 
     "code": 1234 
    }, 
    { 
     "id": 20, 
     "href": "https://stackoverflow.com/questions/17351495/", 
     "linktext": "Your question", 
     "adate": "2013-06-28", 
     "account": 7741, 
     "amount": 7997.66, 
     "code": 234 
    } 
] 

는 그런 다음 데이터를 읽고 표시 예를

에 대한
colNames: ["", "Date", "Account", "Amount", "Code"], 
colModel: [ 
    { name: "linktext", width: 200, sortable: false, search: false, 
     formatter: function (cellValue, options, rowObject) { 
      return "<a href='" + rowObject.href + "'>" + 
       $.jgrid.htmlEncode(cellValue) + "</a>"; 
     }}, 
    { name: "adate", width: 90, formatter: "date", sorttype: "date" }, 
    { name: "account", width: 80, formatter: "integer", sorttype: "int", 
     align: "right" }, 
    { name: "amount", width: 80, formatter: "number", sorttype: "float", 
     align: "right" }, 
    { name: "code", width: 80, formatter: "integer", sorttype: "int", 
     align: "right" } 
] 

를 사용할 수 있습니다. 함수 $.jgrid.htmlEncode을 사용하면 </td>foo "bar's과 같은 링크 이벤트 텍스트에 HTML에 특별한 의미를 갖는 기호가 포함 된 텍스트를 올바르게 표시 할 수 있습니다. thouthand separator 및 jqGrid 로켈 파일에 지정된 소수점 구분 기호 (예 : grid.locale-en.js)가있는 숫자를 표시하지 않으려면 formatter: "integer"formatter: "integer"을 제거 할 수 있습니다. formatoptions을 사용하여 포맷터의 옵션을 지정할 수 있습니다 (the documentation 참조). The demo 코드를 사용하며, 당신의 도움이 올렉에 대한 다음과 같은 결과

enter image description here

+0

감사를 표시! – AbtPst

+0

@ user2334092 : 안녕하세요. 문제가 해결되면 답변을 받아야합니다 (http://meta.stackexchange.com/a/5235/147495). – Oleg