需求是：要求给一些数据加上链接，根据不同的数据，向后台传入不同的参数。得到返回值后，弹窗显示。
采用ajax，即时查询信息。根据返回的json数据动态添加table行。
写代码在以下几个地方遇到困难。
1.添加链接时的openPositionDialog函数，由于单双引号的缘故，使js的触发函数，无法将员工ID传到函数页面。
2.返回数据，前台页面无法解析。原因是，实体类Dealer中有Date、Set等其他类型，json无法解析，因此将要展示的数据，重新定义一个新类，只有最基本的数据类型。
3.遍历json数据。利用json自带的函数each函数，之前接触较少。
4.根据返回的数据动态添加table行，关闭对话框时，需要另加代码将生成的tabl行删掉，否则影响下一次展示。
代码：
1.页面采用jqGrid，给数据添加链接
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
5 <span id="dealerName"></span>
6
7 <span id="dealerBrand"></span>
8
9 <span id="serviceType"></span>
10 <br/>
11 <span><b><@s.text name='staff.property.job.Title' />:</b></span>
12
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>
来源：https://www.cnblogs.com/wwawp66/p/4365790.html