ajax返回值彈窗顯示

需求是：要求給一些數據加上鏈接，根據不同的數據，向后台傳入不同的參數。得到返回值后，彈窗顯示。

采用ajax，即時查詢信息。根據返回的json數據動態添加table行。 

 

寫代碼在以下幾個地方遇到困難。

1.添加鏈接時的openPositionDialog函數，由於單雙引號的緣故，使js的觸發函數，無法將員工ID傳到函數頁面。

2.返回數據，前台頁面無法解析。原因是，實體類Dealer中有Date、Set等其他類型，json無法解析，因此將要展示的數據，重新定義一個新類，只有最基本的數據類型。

3.遍歷json數據。利用json自帶的函數each函數，之前接觸較少。

4.根據返回的數據動態添加table行，關閉對話框時，需要另加代碼將生成的tabl行刪掉，否則影響下一次展示。

 

代碼：
1.頁面采用jqGrid，給數據添加鏈接

function showPositionLink(cellvalue, options, rowObject) {
     var dealerId = $(rowObject).children("dealerId").text();
     var employeeId = $(rowObject).children("id").text();
     return "<a href='#' onclick=\"openPositionDialog('"+employeeId+"')\" style='color:#569AD5;'>" + cellvalue + "</a>";
}

2.展示頁面，用的是freemaker

<div id='positionpanel' style='display:none'>
  <div>
  <span><b><@s.text name='staff.property.dealer.name' />:</b></span>
  &nbsp;
  <span id="dealerName"></span>
  &nbsp;&nbsp;
  <span id="dealerBrand"></span>
  &nbsp;&nbsp;
  <span id="serviceType"></span>
  <br/>
  <span><b><@s.text name='staff.property.job.Title' />:</b></span>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <span id="jobTitle"></span>
  </div>
  <div>
  <table id="positionTable">
   <thead>
   <tr height=22px>
   <th width="200px"><@s.text name='staff.property.employee.name' /></th>
   <th width="38%"><@s.text name='staff.property.employee.startDate' /></th>
   <th width="39%"><@s.text name='staff.property.employee.endDate' /></th>
   </tr>
   </thead>
   <span><hr/></span>
   <tbody style="border: solid 1px #AAAAAA;">
   </tbody>
  </table>
  </div>
</div>
<script language="javascript">
function openPositionDialog(employeeId){
var $positionPanelHtml = $('#positionpanel').html();
var $positionForm = $("<div id='positionpanel' title='<@s.text name='staff.property.position.records'/>'>").html($positionPanelHtml);
$.ajax({
type:'POST',
            url:"${base}/${c.macro_config.async}/dealerPositionRecords.do",
            data:{employeeId:employeeId},
            success:function(data){
             for(var i = 0; i < data.length; i++){
         $("#positionTable tbody").append("<tr id=\'positionTable_tr"+i+"\' align='center'><td id=\'employeeName"+i+"\'></td><td id=\'startDate"+i+"\'></td><td id=\'endDate"+i+"\'></td></tr>");
         }
    $(data).each(function(index,item){   
                $positionForm.find("#dealerName").html(item.dealerName);
                $positionForm.find("#dealerBrand").html(item.dealerBrand);
                $positionForm.find("#serviceType").html(item.dealerService);
                $positionForm.find("#jobTitle").html(item.jobTitle);
                $positionForm.find("#employeeName"+index).html(item.employeeName);
                $positionForm.find("#startDate"+index).html(item.startDate);
                $positionForm.find("#endDate"+index).html(item.endDate);
             });
         for(var i = 0; i < data.length; i++){
         $("#positionTable_tr"+i).remove();
         }      
         }
        });
        
        $positionForm.find("#dealerBrand").val(dealerBrand);
        
        var $leavedialog = $positionForm.dialog({ 
         width: 600,
         height: 300,
            modal:true,
            buttons: {
                "<@s.text name='employee.leave.button.ok'/>": function() {
                    $(this).dialog("destroy");
                    $("#positionForm").remove();
                }
            },
            close: function() {
                $(this).dialog("destroy");
                $("#positionForm").remove();
            }
            });
$("#positionpanel").dialog("open");
}
</script>

3.json數據展示類

public class PositionRecord extends KpiPager {
    private String employeeName;
    private String dealerId;
    private String dealerName;
    private String startDate;
    private String endDate;
    private String dealerBrand;
    private String dealerService;
    private String jobTitle;
   
    public PositionRecord() {
      super();
    }

      public String getEmployeeName() {
            return employeeName;
     }

      public void setEmployeeName(String employeeName) {
            this. employeeName = employeeName;
     }

      public String getDealerId() {
            return dealerId;
     }

      public void setDealerId(String dealerId) {
            this. dealerId = dealerId;
     }

      public String getDealerName() {
            return dealerName;
     }

      public void setDealerName(String dealerName) {
            this. dealerName = dealerName;
     }

      public String getStartDate() {
            return startDate;
     }

      public void setStartDate(String startDate) {
            this. startDate = startDate;
     }

      public String getEndDate() {
            return endDate;
     }

      public void setEndDate(String endDate) {
            this. endDate = endDate;
     }

      public String getDealerBrand() {
            return dealerBrand;
     }

      public void setDealerBrand(String dealerBrand) {
            this. dealerBrand = dealerBrand;
     }

      public String getDealerService() {
            return dealerService;
     }

      public void setDealerService(String dealerService) {
            this. dealerService = dealerService;
     }

      public String getJobTitle() {
            return jobTitle;
     }

      public void setJobTitle(String jobTitle) {
            this. jobTitle = jobTitle;
     }

}

4.xml配置文件

<action name="dealerPositionRecords" class="com.bmw.assessment.action.StaffAction" method="dealerPositionRecords">
       <result name="success" type="json">
                <param name="root">positionRecords</param>
       </result> 
</action>