與tabletogrid和navgrid問題的多個表

Question

我使用的是jQuery 1.5.1，jQuery UI 1.8.13和jqGrid 4.2.0。

這裏是我想要做的事：

我想要的jqGrid應用到幾個表（均具有相同的結構）使用tabletoGrid。每個表具有相同的類，但也具有唯一的自動生成的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的默認值。