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。您还应该从widthOrg中删除colModel属性，该属性将用于内部用途。

还有一个问题。如果您添加jquery.jqGrid.min.js，则不包括grid.tbltogrid.js和grid.formedit.js。如果您打开jquery.jqGrid.min.js，您将在文本* Modules:之后的文本开头的注释中看到包含的所有jqGrid模块的列表。包括相同的模块可以再次出现严重的问题。

顺便说一下，如果定义对象，则不需要将所有属性名称都放在引号中。因此，对象初始化（"colNames"，"colModel"，"name"，"index"，...）中左侧的所有名称都可以写成{{1字符。您使用的许多属性（例如，“title”：true，“hidden”：false，“resizable”：true，“sortable”：true，“edittype”：“text”，...）具有默认值。您可以删除它以使代码更短，更易读。在the documentation中，您会找到所有""属性和所有jqGrid options的默认值。

具有tabletogrid和navgrid问题的多个表

1 个答案: