ajax返回值弹窗显示

浏览数：28 / 时间：2015年06月09日

需求是：要求给一些数据加上链接，根据不同的数据，向后台传入不同的参数。得到返回值后，弹窗显示。

采用ajax，即时查询信息。根据返回的json数据动态添加table行。

写代码在以下几个地方遇到困难。

1.添加链接时的openPositionDialog函数，由于单双引号的缘故，使js的触发函数，无法将员工ID传到函数页面。

2.返回数据，前台页面无法解析。原因是，实体类Dealer中有Date、Set等其他类型，json无法解析，因此将要展示的数据，重新定义一个新类，只有最基本的数据类型。

3.遍历json数据。利用json自带的函数each函数，之前接触较少。

4.根据返回的数据动态添加table行，关闭对话框时，需要另加代码将生成的tabl行删掉，否则影响下一次展示。

代码：
1.页面采用jqGrid，给数据添加链接

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

2.展示页面，用的是freemaker

 1 <div id=‘positionpanel‘ style=‘display:none‘>
 2   <div>
 3   <span><b><@s.text name=‘staff.property.dealer.name‘ />:</b></span>
 4   &nbsp;
 5   <span id="dealerName"></span>
 6   &nbsp;&nbsp;
 7   <span id="dealerBrand"></span>
 8   &nbsp;&nbsp;
 9   <span id="serviceType"></span>
10   <br/>
11   <span><b><@s.text name=‘staff.property.job.Title‘ />:</b></span>
12   &nbsp;&nbsp;&nbsp;&nbsp;
13   <span id="jobTitle"></span>
14   </div>
15   <div>
16   <table id="positionTable">
17    <thead>
18    <tr height=22px>
19    <th width="200px"><@s.text name=‘staff.property.employee.name‘ /></th>
20    <th width="38%"><@s.text name=‘staff.property.employee.startDate‘ /></th>
21    <th width="39%"><@s.text name=‘staff.property.employee.endDate‘ /></th>
22    </tr>
23    </thead>
24    <span><hr/></span>
25    <tbody style="border: solid 1px #AAAAAA;">
26    </tbody>
27   </table>
28   </div>
29 </div>
30 <script language="javascript">
31 function openPositionDialog(employeeId){
32 var $positionPanelHtml = $(‘#positionpanel‘).html();
33 var $positionForm = $("<div id=‘positionpanel‘ title=‘<@s.text name=‘staff.property.position.records‘/>‘>").html($positionPanelHtml);
34 $.ajax({
35 type:‘POST‘,
36             url:"${base}/${c.macro_config.async}/dealerPositionRecords.do",
37             data:{employeeId:employeeId},
38             success:function(data){
39              for(var i = 0; i < data.length; i++){
40          $("#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>");
41          }
42     $(data).each(function(index,item){   
43                 $positionForm.find("#dealerName").html(item.dealerName);
44                 $positionForm.find("#dealerBrand").html(item.dealerBrand);
45                 $positionForm.find("#serviceType").html(item.dealerService);
46                 $positionForm.find("#jobTitle").html(item.jobTitle);
47                 $positionForm.find("#employeeName"+index).html(item.employeeName);
48                 $positionForm.find("#startDate"+index).html(item.startDate);
49                 $positionForm.find("#endDate"+index).html(item.endDate);
50              });
51          for(var i = 0; i < data.length; i++){
52          $("#positionTable_tr"+i).remove();
53          }      
54          }
55         });
56         
57         $positionForm.find("#dealerBrand").val(dealerBrand);
58         
59         var $leavedialog = $positionForm.dialog({ 
60          width: 600,
61          height: 300,
62             modal:true,
63             buttons: {
64                 "<@s.text name=‘employee.leave.button.ok‘/>": function() {
65                     $(this).dialog("destroy");
66                     $("#positionForm").remove();
67                 }
68             },
69             close: function() {
70                 $(this).dialog("destroy");
71                 $("#positionForm").remove();
72             }
73             });
74 $("#positionpanel").dialog("open");
75 }
76 </script>

3.json数据展示类

 1 public class PositionRecord extends KpiPager {
 2     private String employeeName;
 3     private String dealerId;
 4     private String dealerName;
 5     private String startDate;
 6     private String endDate;
 7     private String dealerBrand;
 8     private String dealerService;
 9     private String jobTitle;
10    
11     public PositionRecord() {
12       super();
13     }
14 
15       public String getEmployeeName() {
16             return employeeName;
17      }
18 
19       public void setEmployeeName(String employeeName) {
20             this. employeeName = employeeName;
21      }
22 
23       public String getDealerId() {
24             return dealerId;
25      }
26 
27       public void setDealerId(String dealerId) {
28             this. dealerId = dealerId;
29      }
30 
31       public String getDealerName() {
32             return dealerName;
33      }
34 
35       public void setDealerName(String dealerName) {
36             this. dealerName = dealerName;
37      }
38 
39       public String getStartDate() {
40             return startDate;
41      }
42 
43       public void setStartDate(String startDate) {
44             this. startDate = startDate;
45      }
46 
47       public String getEndDate() {
48             return endDate;
49      }
50 
51       public void setEndDate(String endDate) {
52             this. endDate = endDate;
53      }
54 
55       public String getDealerBrand() {
56             return dealerBrand;
57      }
58 
59       public void setDealerBrand(String dealerBrand) {
60             this. dealerBrand = dealerBrand;
61      }
62 
63       public String getDealerService() {
64             return dealerService;
65      }
66 
67       public void setDealerService(String dealerService) {
68             this. dealerService = dealerService;
69      }
70 
71       public String getJobTitle() {
72             return jobTitle;
73      }
74 
75       public void setJobTitle(String jobTitle) {
76             this. jobTitle = jobTitle;
77      }
78 
79 }

4.xml配置文件

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