JqGrid 셀을 편집 가능하게 만들기

목표는 JQuery와 JqGrid를 사용하여 데이터 격자에서 셀을 인라인으로 수정하는 것입니다. 아약스 요청과 json 응답을 기반으로 채울 표가 있습니다. 불행히도 행을 클릭 할 때 셀을 편집 가능하게 만들 수 없습니다.JqGrid 셀을 편집 가능하게 만들기

나는 크롬과 사파리를 모두 시험해 보았고 이틀간의 연구를했지만 여전히 운이 없었다. 나는 아래 사용 된 링크는 도움이되지 않았다 :

http://trirand.com/blog/jqgrid/jqgrid.html

http://www.trirand.net/demoaspnetmvc.aspx

내가 editRow를 호출하고 true로 값을 설정할 것 인 onRowSelect 이벤트를 추가 튜토리얼을 따라. 그러나 그것은 결코 작동하지 않으며 이유를 이해할 수 없습니다.

도움을 주시면 감사하겠습니다.

코드 : 코드에서

<html> 
<head> 
    <title>Test</title> 

    <link rel="stylesheet" type="text/css" href="ui.jqgrid.css"/> 
    <link rel="stylesheet" type="text/css" href="jquery-ui-1.8.2.custom.css"/> 

    <style type="text/css"> 
    html, body { 
     margin: 0; 
     padding: 0; 
     font-size: 75%; 
    } 
    </style> 


    <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
    <script src="i18n/grid.locale-en.js" type="text/javascript"></script> 
    <script src="jquery.jqGrid.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 

      jQuery("#list").jqGrid({ 
         url:'http://localhost:8080/jblog/messages', 
         datatype:'json', 
         jsonReader: { 
          root: 'rows', 
          repeatitems: false, 
          page: 'currentPage', 
          total: 'totalRecords' 
         }, 
         mtype:'GET', 
         colNames:['Message ID', 'Message Content'], 
         colModel:[ 
          {name:'messageId', index:'messageId'}, 
          {name:'content', index:'content', width:'400'} 
         ], 
         viewrecords:true, 
         caption:'My first grid', 
         rowNum:30, 
         rowList:[10,20,30], 
         pager: '#pager', 
         sortname: 'messageId', 
         onSelectRow: function(id){ 
          console.log('onSelectRow'); 
          editRow(id); 
          }, 
         editurl:'http://localhost:8080/jblog/messages' 
        }); 
     }); 
    </script> 

</head> 
<body> 
<table id="list"> 
    <tr> 
     <td/> 
    </tr> 
</table> 
<div id="pager"></div> 
<script type="text/javascript"> 
      var lastSelection; 

      function editRow(id) { 
       console.log("editRow"); 
       if (id && id !== lastSelection) { 
        console.log("setRowToEdit"); 
        var grid = $("#list"); 
        grid.restoreRow(lastSelection); 
        console.log("id " + id); 
        grid.editRow(id, true); 
        lastSelection = id; 
       } 
      } 
</script> 
</body> 
</html>

출처

2012-04-01 user1306537

주요 오류는 다음과 같습니다

당신은 당신이 편집해야 열에서 editable: true 속성을 포함해야합니다.

또한 당신은 코드의 변화를 다음과 같이한다 : 당신은 당신이 사용하는 HTML/XHTML의 방언을 선언 <html> 전에 <!DOCTYPE html ...> 라인을 포함해야한다

. HTML5 방언을 사용하는 경우 라인은 단지 <!DOCTYPE html>입니다. 당신의 경우 XHTML 1.0 Strict에 해당하는 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 줄이 될 것 같습니다. 자세한 내용은 the documentation을 참조하십시오.
전역 변수 수를 줄이는 것이 좋습니다. 변수 lastSelection과 함수 editRow은 바깥 쪽 범위가 onSelectRow이어야합니다. 그래서 내부에 $(document).ready(function() {/*here!!!*/}); 블록으로 이동할 수 있습니다. 익명의 함수를 사용하고 editRow 코드를 onSelectRow 코드에 직접 삽입하는 것이 좋습니다. 덧붙여서 $("#list") 대신 $(this)을 onSelectRow 안에 사용할 수 있습니다. & 코드 조각을 쉽게 잘라낼 수 있기 때문에 코드가 조금 빠르게 작성되고 코드 유지 관리가 향상됩니다.
Ajax 요청 (url 및 editurl 옵션 참조)에서 http://localhost:8080/과 같은 접두어를 사용하지 마십시오. 대신 url:'/jblog/messages' 또는 url:'jblog/messages' 개의 URL을 사용해야합니다. Ajax의 same origin policy으로 인해 현재 페이지가로드 된 다른 서버에 대한 액세스 또는 다른 포트에 대한 액세스가 금지됩니다.
그리드의 성능을 향상시킬 수있는 gridview: true jqGrid 옵션을 항상 사용하는 것이 좋습니다.

출처

2012-04-01 19:27:43 Oleg

StackOverflow에 코드를 붙여 넣는 데 문제가있어서 DocType을 제거했습니다. 편집 가능한 행의 예에는 편집 가능한 일부가 아닌 경우가 아니면 개별 열을 지정하지 않아도됩니다. – user1306537

@ user1306537 : [게시물] (http://meta.stackexchange.com/a/22189/147495)에는 코드 서식을 지정하는 간단한 규칙이 있습니다. ''같은 행은 stackoverflow에도 쉽게 포함될 수 있습니다. 이 예제에 어떤 문제가 있습니까? 나는 단지'$ (this)'에''jQuery ('# rowed3')를 대치 할 것이다. – Oleg

행을 편집 할 수 없습니다. – user1306537

JqGrid 셀을 편집 가능하게 만들기

답변

관련 문제