jqGrid - 在编辑时检测后端HTTP响应代码

时间:2013-08-07 11:17:01

标签: javascript jquery jqgrid edit

我有一个jqGrid,我通过PHP脚本添加了编辑功能。 我已经看到,当编辑行并通过ajax / jquery http请求发布行数据时。

我的PHP脚本进行编辑,运行SQL语句,一切都很好。

尽管如此,我希望检查数据是否未正确插入并使用非200响应代码进行响应。

我想知道如何解析php脚本中的响应代码,以便在服务器未返回200时取消行编辑。

到目前为止,我已将回调函数reloadTable添加到editTable调用,但这只返回已编辑行的ID。

$('#grid').jqGrid("editRow", id, true, '', '', '', '', reloadTable);

function reloadTable(result) {
        //alert(result);
    }

更新

根据jqgrid reload grid after successfull inline update / inline creation of record的答案,我尝试添加以下内容,但不会刷新网格......

function reloadTable(rowid, result) {
  $("#grid").trigger("reloadGrid"); 
}

使用Javascript:

<script language="javascript">

function typeSelect() {
    return "['a','b','c']";
}

function getCharacteristics() {

    $.getJSON('json/getCharacteristics.php?category_id=3', function (data) {
        $("#grid").jqGrid("GridUnload");
        data.length = data.length - 1;

        $("#grid").jqGrid({ //set your grid id
            data : data, //insert data from the data object we created above
            datatype : 'local',
            width : 500, //specify width; optional
            colNames : ['character_id', 'gr_name', 'en_name', 'charType'], //define column names
            colModel : [{
                    name : 'character_id',
                    editable : true,
                    index : 'character_id',
                    key : true,
                    width : 50
                }, {
                    name : 'gr_name',
                    editable : true,
                    index : 'gr_name',
                    width : 100,
                    editable : true
                }, {
                    name : 'en_name',
                    editable : true,
                    index : 'en_name',
                    width : 100,
                    editable : true
                }, {
                    name : 'charType',
                    editable : true,
                    index : 'charType',
                    width : 100,
                    editable : true,
                    edittype : "select",
                    editrules : {
                        required : true
                    },
                    editoptions : {
                        size : 5
                    }
                },
            ], //define column models
            pager : '#pager', //set your pager div id
            sortname : 'id', //the column according to which data is to be sorted; optional
            viewrecords : true, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
            sortorder : "asc", //sort order; optional
            editurl : 'json/getCharacteristics.php',
            cellsubmit : 'json/getCharacteristics.php',
            gridview : true,
            caption : "jqGrid Example", //title of grid
            onSelectRow : function (id) {
                console.log('onSelectRow');
                editRow(id);
            },
            loadComplete : function () {
                $('#grid').setColProp('charType', {
                    editoptions : {
                        value : ['input', 'ListOptionYesNo', 'select']
                    }
                });
            }
        });

    });
}

var lastSelection = -1;
function editRow(id) {

    console.log("editRow");
    if (id && id !== lastSelection) {
        console.log("setRowToEdit");
        var grid = $("#grid");
        grid.restoreRow(lastSelection);
        console.log("id " + id);
        $('#grid').jqGrid("editRow", id, true, '', '', '', '', reloadTable);
        lastSelection = id;
    }
}

function reloadTable(result) {
    //alert(result);
}

</script>

HTML头

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
div.scrollCategories{
  height:200px;
  overflow-y: scroll;
  overflow-x: hidden;
}

td th 
{
font-size:10px;
border:1px solid #98bf21;
padding:10px 10px 10px 7px;
}
th 
{
font-size:11px;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#fff;
}
tr.alt td 
{
color:#000;
background-color:#EAF2D3;
}

#overlay_form{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
#pop{
display: block;
border: 1px solid gray;
width: 65px;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}
</style>

<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" media="screen" type="text/css" />
<link href="jquery.jqGrid-4.5.2/css/ui.jqgrid.css" rel="stylesheet" media="screen" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.jqGrid-4.5.2/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.jqGrid-4.5.2/js/jquery.jqGrid.src.js"></script>

</head>

<body>

<h3> Edit Category Characteristics</h3><hr/>
<a name="test"/>
<table id="grid"></table>
<div id="pager"></div>

</body>

</html>

示例JSON文档

[{"character_id":"477","en_name":"Menios","charType":"0","gr_name":"????2","categories_id":"27"},{"character_id":"479","en_name":"Nikos","charType":"1","gr_name":"bb","categories_id":"27"},false]

1 个答案:

答案 0 :(得分:0)

reloadTable函数的第二个参数包含一个具有以下对象的结果对象:

readyState  
responseText
status
statusText

响应代码包含在状态中,如下面的firebug输出所示: enter image description here