与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的默认值。