jqgrid не может отображать данные из переменной

Question

У меня здесь есть код JavaScript. Я хочу сохранить данные из этого URL:

'processjson.php?path=' + encodeURI('display/payTempEarn') + '&json=' + encodeURI(JSON.stringify(dataTempEarn)), в мою переменную 'tempIncDed' и отобразить эти данные в моей jqgrid.

Мой вопрос здесь и сейчас заключается в следующем: почему, когда я предупреждаю переменную tempIncDed, она показывает, что она хранит правильные данные, но не отображается в моей jqgrid? Я что-то пропустил в своем коде?

Ниже мой код JS:

   var tempIncDed =  [];
    $(document).ready( function() { 
      $("#tblIncDed").jqGrid({ data: tempIncDed, 
        datatype: "local",     
        colNames:['Code','Description', 'Taxable','Amount'],
            colModel:[
          {name:'ded_code',width: 85},
                {name:'ded_desc'},
                {name:'taxable',width: 95},
                {name:'amount', formatter:'currency', align:'right',width: 85}
        ], 
        rowNum:20,                                              
            viewrecords: true,
            rowList:[20,50,100],        
        ppager: '#tblIncDedPager',
        viewrecords: true, 
        caption: "Details" 
      });

      $( "#btnEarn" ).click(function() {
        var empNo = $("#tblPayroll").jqGrid('getCell',($("#tblPayroll").jqGrid('getGridParam', 'selrow')),'emp_no');
        var dataTempEarn = {
            "SessionID": $.cookie("SessionID"),
            "dataType": "data",
            "per_id":$("#payPeriod").val(),
            "emp_no":empNo
        };
        $.ajax({
            type: 'GET',
            url:'processjson.php?path=' + encodeURI('display/payTempEarn') + '&json=' + encodeURI(JSON.stringify(dataTempEarn)), 
            dataType: primeSettings.ajaxDataType,
            success: function(data) {
                if ('error' in data)
                {
                    showMessage('ERROR: ' + data["error"]["msg"]);
                }
                else{                 
                    var resLen = data.result.length;

                    tempIncDed = JSON.stringify(data.result);
          alert('this is the tempDed ' + tempIncDed);                       

                    $("#tblIncDed").jqGrid('setGridParam',{
                                      datatype: 'local', 
                                      data:tempIncDed}
                                      ).trigger("reloadGrid");

                }
            }
        });
        $("#dialOtherIncDed").dialog( "open" );
        $("#dialOtherIncDed").attr("name","earnings");

      });
    })

T his is the tempDed sample data: [{"ded_id":"10000000845","ded_code":"100","ded_desc":"MEAL ALL","taxable":"N","amount":"10"},{"ded_id":"10000000849","ded_code":"101","ded_desc":"TRANSPORTATION","taxable":"N","amount":"40"},{"ded_id":"10000000851","ded_code":"103","ded_desc":"LAUNDRY","taxable":"N","mOther_amnt":"50.00"}]

Некоторые из моих HTML-код:

<!--master grid-->         
      <div style="width:100%"> 
                <table id="tblPayroll"></table> 
                <div id="tblPayrollPager"></div> 
            </div> 
            <!--dialog that contains the table for other earnings, deductions, loans-->
            <div id="dialOtherIncDed" style="width:100%"> 
                <table id="tblIncDed"></table> 
                <div id="tblIncDedPager"></div><br><br>
                Total amount: <b><span id="totalAmnt"></span></b>
            </div> 

            <!--dialog that contains the dialog edit earnings, deductions, loans-->
            <div id="editIncDed""> 
                <table>
                <tr>
                  <span id="incDed_name"></span>
                    <td>Amount:</td>
          <td><input class="numeric" type="text" id="amount" value = ""/></td></tr>
                </table> 
            </div> 
<!--edit-->
    <div id="dialogPayrollEdit" title="Payroll Entry"> 
      <table>
                <tr>
                    <td>Payroll Period:</td>
                    <td><b><span id="periodDateL" style="color:blue"></span></b></td>
                    <td>Type:</td><td><b><span id="rateType" style="color:blue"></span></b></td>
                    <td>Rate:</td><td><b><span id="payRate" style="color:blue"></span></b></td>
                </tr>
                <tr>
          <td>Employee Name:</td>
          <td><b><span id="empName" style="color:blue"></span></b></td>
        </tr>

</table>
            <hr/>
            <fieldset><legend>Payroll Details</legend>
                <p><center><b>EARNINGS</b></center></p>


            <table>
                <tr>
                    <td>
                        ....
                    </td>
                    <td>
                        <table >

                            <tr...tr>
                            <tr>...</tr>
                            <tr>...</tr>
                            <tr><td>Other earnings</td><td><input class="numeric" style="width:60px" id="mOther_amnt" value = ""/></td><td><input type='button' value='...' id="btnEarn"></td></tr>
                            <tr><td><b>GROSS PAY</b></td><td></td><td><b><span style="width:60px;color:blue" id="grossPay"/></b></td></tr>
                        </table>
                    </td>
                </tr>
            </table>
            <hr/>


<p><center><b>DEDUCTIONS</b></center></p>
                <table width = "100%">
                    <tr>
                        <td>
                            ....
                        </td>
                        <td>
                            <table >

                                <tr>
                                    <td>Other deductions</td>
                                    <td><input class="numeric" style="width:60px;color:black" id="mOther_ded" value = "" disabled/></td>
                                    <td><input type='button' value='...' id="btnDed"/></td>
                                </tr>
                                <tr>
                                    <td>Advances/Loans</td>
                                    <td><input class="numeric" style="width:60px;color:black" id="mLoan_ded" value = "" disabled/></td>
                                    <td><input type='button' value='...' id="btnLoan"></td>
                                </tr>
                                <tr></tr>
                                <tr></tr>
                                <tr><td><b>NET PAY</b></td><td></td><td><b><span class="numeric" style="width:60px;color:blue" id="netPay" value = "" disabled/></b></td><td></td></tr>

                            </table>
                        </td>
                    </tr>
                </table>
                <br>                
            </fieldset><br>
            Suggest lowest NET PAY >>> <input type="text" id="lowNetPay" value = "" style="width:80px;color: black" value='0.00' disabled/>
    </div><br><br>
                <br><br> 
                <button id="btnPayrollEdit">Edit</button>

btnLoan, btnDed и btnEarn будут использовать одну и ту же сетку. Я также использовал переменную tempIncDed для сохранения возвращенных данных из ajax ..

Answer 1

Я наконец-то решил свою проблему.Допустим, например, что я храню эти данные в var tempInc,

[{"ded_id":"10000000845","ded_code":"100","ded_desc":"MEAL ALL","taxable":"N","amount":"10"},{"ded_id":"10000000849","ded_code":"101","ded_desc":"TRANSPORTATION","taxable":"N","amount":"40"},{"ded_id":"10000000851","ded_code":"103","ded_desc":"LAUNDRY","taxable":"N","mOther_amnt":"50.00"}]

Эти данные были получены в результате запроса ajax, когда кнопка btnEarn нажата.

Вот мой код JavaScriptof btnEarn.

  var tempInc = []; // global variable

  $( "#btnEarn" ).click(function() {
      $("#tblIncDed").clearGridData();
        var empNo = $("#tblPayroll").jqGrid('getCell',($("#tblPayroll").jqGrid('getGridParam', 'selrow')),'emp_no');
        var dataTempEarn = {
            "SessionID": $.cookie("SessionID"),
            "dataType": "data",
            "per_id":$("#payPeriod").val(),
            "emp_no":empNo
        };
        $.ajax({
            type: 'GET',
            url:'processjson.php?path=' + encodeURI('display/payTempEarn') + '&json=' + encodeURI(JSON.stringify(dataTempEarn)), 
            dataType: primeSettings.ajaxDataType,
            success: function(data) {
              var tempIncDed = [];
                if ('error' in data)
                {
                    showMessage('ERROR: ' + data["error"]["msg"]);
                }
                else{       
                    $.each(data.result, function(rowIndex, rowDataValue) {
                        var fldName = rowDataValue;
                        tempInc[rowIndex] = fldName;
                    });

                    var resLen = data.result.length;                    
                    $("#totalAmnt").text(data.result[resLen -1].mTot_amnt);

                    $("#disTemp").text((JSON.stringify(tempInc)));
                    $("#tblIncDed").jqGrid('setGridParam',{
            datatype: 'local', 
            data:tempInc}
            ).trigger("reloadGrid");
                }
            }
        });    
    $("#dialOtherIncDed").dialog( "open" );
        $("#dialOtherIncDed").attr("name","earnings");                      
    });

Каждый раз, когда я нажимаю эту кнопку, он отправляет запрос ajax на сервер.Возвращенные данные (в частности, объект, так как у меня есть массив объектов), будут сохранены в глобальной переменной tempInc.После этого у меня есть этот код:

$("#tblIncDed").jqGrid('setGridParam',{
    datatype: 'local', 
    data:tempInc}
    ).trigger("reloadGrid");

that will display the tempInc in my jqgrid. Hope this will help someone out there.