tabletgrid 및 navgrid 문제가있는 다중 테이블

Question

jQuery 1.5.1, jQuery UI 1.8.13 및 jqGrid 4.2.0을 사용하고 있습니다. 여기

내가 할 노력하고 무엇 :

내가 tabletoGrid를 사용하여 여러 테이블 (모두 동일한 구조를 가지고)에있는 jqGrid를 적용하려합니다. 각 테이블에는 동일한 클래스가 있지만 고유 한 자동 생성 된 ID도 있습니다. 또한 각 테이블 다음에 고유 ID가있는 div가 있습니다.

각 테이블에 해당하는 링크가 있습니다.이 링크를 클릭하면 해당 테이블에 대한 행 편집 팝업이 나타납니다.

테이블에 모두 jqGrid가 잘 적용됩니다. 문제 없습니다. 그러나 내비게이션 호출기는 호출기 div에 나타나지 않으며 양식 편집 입력 컨트롤도 팝업 편집 상자 안에 없습니다. 편집 양식 팝업이 나타나지 만 이전, 다음, 제출 및 취소 버튼 만 있지만 필드에 대한 입력란은 없습니다.

일부 포함 파일이 누락 되었습니까? javascript 오류가 표시되지 않습니다. 어떤 도움이라도 대단히 감사합니다. 감사.

- jqr

<link rel="stylesheet" href="/js/jquery1.8.13/css/custom-theme/jquery-ui-1.8.13.custom.css" /> 

<link rel="stylesheet" href="/js/jqgrid4.2.0/css/ui.jqgrid.css" /> 
<link rel="stylesheet" href="/js/jqgrid4.2.0/plugins/ui.multiselect.css" /> 



<script type="text/javascript" src="/js/jquery1.8.13/js/jquery-1.5.1.min.js"></script> 
<script type="text/javascript" src="/js/jquery1.8.13/js/jquery-ui-1.8.13.custom.min.js"></script> 

<script type="text/javascript" src="/js/jqGrid4.2.0/js/i18n/grid.locale-en.js"></script> 
<script type="text/javascript" src="/js/jqGrid4.2.0/plugins/ui.multiselect.js"></script> 
<script type="text/javascript" src="/js/jqGrid4.2.0/src/grid.tbltogrid.js" ></script> 
<script type="text/javascript" src="/js/jqGrid4.2.0/js/jquery.jqGrid.min.js"></script> 
    <script type="text/javascript" src="/js/jqGrid4.2.0/src/grid.formedit.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
var editOpt = { 
        editData:{ 
         myparam:function(){ 
          return "myval"; 
         } 
        }, 
        height:240, 
        reloadAfterSubmit: true, 
        editCaption:'Edit Recordxxx', 
        bSubmit:'Save', 
        url:'someurl.php', 
        closeAfterEdit:true, 
        viewPagerButtons:false 
       }; 

var oGridOptions = 
{ 
    "colNames":[ 
    "Field1", 
    "ReField1", 
    "Head", 
    "Line Item", 
    "Modified By", 
    "Date" 
    ], 
    "colModel":[ 
    { 
     "name":"Field1", 
     "index":"Field1", 
     "width":65, 
     "title":true, 
     "hidden":false, 
     "widthOrg":65, 
     "resizable":true, 
     "sortable":true, 
     "edittype":"text", 
     "editable":"true", 
     "editoptions":{ 
     "size":"10" 
     } 
    }, 
    { 
     "name":"ReField1", 
     "index":"ReField1", 
     "width":71, 
     "title":true, 
     "hidden":false, 
     "widthOrg":75, 
     "resizable":true, 
     "sortable":true, 
     "edittype":"text", 
     "editable":"true", 
     "editoptions":{ 
     "size":"10" 
     } 
    }, 
    { 
     "name":"Head", 
     "index":"Head", 
     "width":48, 
     "title":true, 
     "hidden":false, 
     "widthOrg":50, 
     "resizable":true, 
     "sortable":true, 
     "edittype":"text", 
     "editable":"true", 
     "editoptions":{ 
     "size":"10" 
     } 
    }, 
    { 
     "name":"Line_Item", 
     "index":"Line_Item", 
     "width":600, 
     "title":true, 
     "hidden":false, 
     "widthOrg":631, 
     "resizable":true, 
     "sortable":true, 
     "edittype":"text", 
     "editable":"true", 
     "editoptions":{ 
     "size":"10" 
     }, 
     "classes": "LineItemText" 
    }, 
    { 
     "name":"Modified_By", 
     "index":"Modified_By", 
     "width":190, 
     "title":true, 
     "hidden":false, 
     "widthOrg":200, 
     "resizable":true, 
     "sortable":true, 
     "edittype":"text", 
     "editable":"true", 
     "editoptions":{ 
     "size":"10" 
     } 
    }, 
    { 
     "name":"Date", 
     "index":"Date", 
     "width":96, 
     "title":true, 
     "hidden":false, 
     "widthOrg":100, 
     "resizable":true, 
     "sortable":true, 
     "edittype":"text", 
     "editable":"true", 
     "editoptions":{ 
     "size":"10" 
     } 
    } 
    ] 
}; 

$.jgrid.edit.editCaption = "My Edit Caption"; 
$.jgrid.defaults.rownumbers = true; 
$.jgrid.defaults.pgtext = "Page {0} of {1}"; 


tableToGrid("table.DataTablex", oGridOptions); 
jQuery("table.DataTablex").each(function(i) { 
    var idx = i + 1; 
    var sid = "#table" + idx.toString(); 
    var snavId = "#pagernav" + idx.toString(); 
    jQuery(sid).jqGrid('setGridParam',{"pager":snavId}); 
    jQuery(sid).jqGrid('navGrid',snavId,{edit: true, add: true, del: true}, editOpt); 



$(".bedata").click(function(){ 
    var iwhich = this.id; 
    var sTableId = "#table" + iwhich.toString(); 
    var gr = jQuery(sTableId).jqGrid('getGridParam','selrow'); 
    if(gr != null) { 
     jQuery(sTableId).jqGrid('editGridRow',gr,{height:280,reloadAfterSubmit:false}); 
    } 
    else 
     alert("Please Select Row"); 
     }); 

}); 
</script> 

Answer 1

나는 당신의 가장 큰 문제는 "editable":"true" 대신 "editable":true하거나 editable:true의 사용이라고 가정합니다. 내부 목적으로 사용될 colModel에서 widthOrg 특성을 추가로 제거해야합니다.

하나 더 문제가 있습니다. jquery.jqGrid.min.js을 포함하면 이 아닌에 grid.tbltogrid.js 및 grid.formedit.js이 포함되어야합니다. jquery.jqGrid.min.js을 열면 파일 시작 부분의 주석에 텍스트 * Modules: 뒤에 오는 모든 jqGrid 모듈 목록이 나타납니다. 동일한 모듈을 포함하여 한 번 더 심각한 문제를 해결할 수 있습니다.

그러나 개체를 정의하면 모든 속성 이름을 따옴표로 묶을 필요가 없습니다. 그래서 개체 초기화 ("colNames", "colModel", "name", "index", ...)의 ':'에서 왼쪽에있는 모든 이름은 "" 문자없이 쓸 수 있습니다. 사용하는 많은 속성 (예 : "title": true, "hidden": false, "resizable": true, "sortable": true, "edittype": "text"등)은 기본값을가집니다. 코드를 더 짧고 잘 읽을 수 있도록 제거 할 수 있습니다. the documentation에는 colModel 속성에 대한 기본값과 모두 jqGrid options이 있습니다.