0

JqG​​rid 行为怪异。我只是创建了一些母版页，其中包含引用数据库中某个表的 jqGrid。

此页面运行良好，然后我需要使用相同的逻辑，并复制带有附加 php 文件的确切页面并创建一些调整，使其指向正确的表。

在我的母版页（部门页——这是第一页（100% 工作））中，jqgrid 函数工作正常，但是在基于第一页的第二页和第三页中，jqgrid 表现得很奇怪。

当我创建新值或更新某些值时，jqgrid 应该自动重新加载带有新数据的网格。但就我而言，网格重新加载数据但根本不写入。

这种奇怪的行为不会发生在我的第一个 jQGrid 页面（部门页面）中。

我还插入了一些屏幕截图以使其更清晰

首先，我重新加载页面。 firebug 控制台说，它从服务器加载 JSON 数据

然后简单地将值添加到网格中，参考一些 php 文件。该值被执行，然后存储在数据库中。此方法使用 POST 方法。

将 POST 数据从文本框发送到 db

然后 jQgrid 会自动从数据库中获取新数据，并且应该在 GRID 上写入。但在我的案例中，网格没有写入数据。

获取新数据，它应该写在网格中，但不是:(

如您在屏幕截图的右下角看到的，有 11 个值，从第一个屏幕截图开始，只有 10 个值。所以，网格实际上执行了 INSERT 语句，但是当它重新加载时，它就坏了。

有没有可能克服这个问题？谢谢你。

编辑：HTML代码：

<table id="location"><tr><td /></tr></table>
<div id="pager-location"></div>

JavaScript 代码：

$(document).ready(function() {
    //alert("start");
    jQuery("#location").jqGrid({
        mtype:'GET',
        url:'functions/get_location.php',
        editurl:'functions/edit_location.php',
        datatype: "JSON",
        colNames:['Location ID','Location'],
        colModel:[
            {name:'idms_location',index:'idms_location', width:150, editable:true,add:true, del:true, key:true},
            {name:'location',index:'location', width:800,editable:true, add:true, del:true}     
        ],
        loadComplete: function () {
        alert("OK");
        },    
        loadError: function (jqXHR, textStatus, errorThrown) {
            alert('HTTP status code: ' + jqXHR.status + '\n' +
                  'textStatus: ' + textStatus + '\n' +
                  'errorThrown: ' + errorThrown);
            alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
        },
        rowNum:10,
        rowList:[5,10,15],
        pager: '#pager-location',
        sortname: 'idms_location',
        viewrecords: true,
        jsonReader: {repeatitems: true, idms_location: "idms_location" },
        sortorder: "asc",
        caption:"MSC Locations"
    });
    jQuery("#location").jqGrid('navGrid','#pager-location',{edit:true,add:true,del:true},{},{},{},{closeAfterSearch:true},{});
    jQuery("#location").jqGrid('gridResize',{minWidth:350,maxWidth:850,minHeight:80, maxHeight:350});
    //alert("end");
});
4

1 回答 1

1

我验证了您使用的代码并找到了原因。您的代码中有id重复的问题。您定义<table>了用于 jqGrid 的元素如下

<table id="location"><tr><td /></tr></table>
<div id="pager-location"></div>

它具有"location"作为id. 后来你定义了

colModel: [
    {name:'idms_location',index:'idms_location', width:150, editable:true,add:true, del:true, key:true},
    {name:'location',index:'location', width:800,editable:true, add:true, del:true}     
],

其中名称location将用作列名。问题是列名将用于构建id网格不同元素的名称。而且表单编辑使用列名直接作为表示位置id的字段的值<input>。使用后添加表单以下元素

<input name="location" class="FormElement ui-widget-content ui-corner-all" id="location" role="textbox" type="text">

也存在于页面上id="location"。如果用户关闭表单，它将被隐藏，但不会被销毁。因为编辑表单将被放置在下一个使用行之前 的页面上，所以找不到更多表格并且网格保持空白。<table id="location">$("#location tbody:first")

您应该做的只是重命名<table id="location">为<table id="grid-location">` 或选择任何其他名称。您应该更新相应的 JavaScript 代码。

应在网格中完成的其他更改：

  • 更改jsonReader: {repeatitems: true, idms_location: "idms_location" }为jsonReader: {id: "idms_location" }.
  • 添加gridview: true选项。
  • 添加autoencode: true选项。
  • 从中删除不存在的选项add:true, del:true属性colModel
  • 从中删除index属性colModel。
  • 您应该使用 JSON 数据修复Content-Type在服务器响应中使用的 HTTP 标头。它应该Content-Type: application/json代替Content-Type: text/html您当前使用的。这只是一行 PHP 代码。
  • 您可以删除{edit:true,add:true,del:true}选项navGrid- 这是默认选项。
于 2013-07-02T08:55:44.157 回答