插入和更新后，jqGrid Act奇怪地重新加载数据 [英] jqGrid Act Strange Reloading Data After Insert and Update

问题描述

JqGrid表现奇怪.我只是创建了一个包含jqGrid的主页面，该页面引用了数据库中的某个表.

JqGrid acting strange. I just create some master page which contains jqGrid refering to some table in my database.

此页面正常运行，然后我需要使用相同的逻辑，并且我复制了包含其他php文件的确切页面，并进行了一些调整，使其指向正确的表.

This page is working pefectly, then i need to use the same logic and i copied exact page with additional php file and create some adjustment so it pointing to the right table.

在我的母版页(部门页面-这是第一页(工作100％))中，jqgrid函数正常工作，但是在基于第一页的第二和第三页中，jqgrid的行为很奇怪.

In my master page (department page --which is the first page (works 100%)) the jqgrid function working normal, BUT in my second and third page which is based on the first page, the jqgrid is acting strange.

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

When i create new value or update some value, the jqgrid should be automatically reloads the grid with NEW data. But in my case, the grid reloads the data but NOT writing at all.

在我的第一个jQGrid页面(部门页面)中没有发生这种奇怪的行为.

This strange behaviour is NOT happened in my first jQGrid page (dept page).

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

I also insert some screenshot to make it more clear

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

Then simple add value to the grid, referring to some php file. The value is executed and then STORED in database. This method using POST method.

然后，jQgrid会自动从数据库中获取新数据，并且应该在GRID上写入.但是在我的情况下，网格未写入数据.

Then the jQgrid automatically GET the new data from database, and should be Write on the GRID. But in my CASE, the grid is not writing the data.

如您所见，在屏幕截图的右下方，有11个值，从第一个屏幕截图中，只有10个值.因此，网格实际上执行了INSERT语句，但是当它重新加载时，它就坏了.

As you can see the the bottom right of the screen shot, there are 11 values, from the 1st screenshot, there are only 10 values. So, the grid actually execute the INSERT statement, but when it reloads, it's broken.

有没有可能克服这个困难?谢谢.

Is there any possibilities how to overcome this?? Thank you.

已编辑:HTML代码:

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

JavaScript代码:

JavaScript code:

$(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");
});

推荐答案

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

I verified the code which you used and found the reason. You had id duplicate problem in your code. You defined <table> element used for jqGrid as following

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

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

It has "location" as the id. Later you defined

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名称.此外，表单编辑将列名直接用作表示位置的<input>字段的id值.使用添加"表单后，以下元素

where the name location will be used as the column name. The problem is that the column name will be used to build id name of different elements of the grid. Moreover the form editing uses the column name direct as id value of the <input> field which represent location. After usage of Add form the following element

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

也存在于页面中，并带有id="location".如果用户关闭表单，它将被隐藏，但不会被破坏.因为编辑表单将放置在之前 <table id="location">页面上，而

exists on the page with id="location" too. If thhe user close the form it will be hidden, but not destroyed. Because the edit form will be placed on the page before <table id="location"> the next $("#location tbody:first") used in the line don't find the table more and the grid stay empty.

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

What you should do is just rename <table id="location"> to something like <table id="grid-location">` or choose any other name. You should update the JavaScript code corresponded.

应在网格中进行的其他更改:

Other changes which should be done in the grid:

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

• change jsonReader: {repeatitems: true, idms_location: "idms_location" } to jsonReader: {id: "idms_location" }.
• add gridview: true option.
• add autoencode: true option.
• remove non-existing options add:true, del:true properties from colModel
• remove index properties from colModel.
• you should fix Content-Type HTTP header which you use in the server response with JSON data. It should be Content-Type: application/json instead of Content-Type: text/html which you use currently. It's just one line of PHP code.
• you can remove {edit:true,add:true,del:true} options of navGrid - it's default options.

这篇关于插入和更新后，jqGrid Act奇怪地重新加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！