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>