jqgrid无法显示变量中的数据

时间:2012-03-01 15:54:09

标签: javascript jquery jqgrid

我这里有一个javascript代码。我想要的是我想存储来自这个网址的数据结果:

'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");

      });
    })

Ť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的返回数据..

1 个答案:

答案 0 :(得分:0)

我终于解决了自己的问题。让我们说例如我将这些数据存储在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"}]

当点击按钮btnEarn时,此数据是来自ajax请求的输出。

这是我的btnEarn的javascript代码。

  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.