Question

我的jsp中有简单的表。

<table class="table table-bordered">
    <tr>
        <th>#</th>
        <th>Name</th>
        <th>Surname</th>
        <th>Age</th>
        <th>Email</th>
    </tr>
    <c:forEach var="employee" items="${employeeList}">
        <tr class=row>
            <td>${employee.id}</td>
            <td>${employee.name}</td>
            <td>${employee.surname}</td>
            <td>${employee.age}</td>
            <td>${employee.email}</td>
        </tr>
    </c:forEach>
</table>

我的控制器：

   @Controller
public class BrowseController {

    @Autowired
    private SpringJdbcDao springJdbcDao;

    public void setSpringJdbcDao(SpringJdbcDao springJdbcDao) {
        this.springJdbcDao = springJdbcDao;
    }

    @RequestMapping(value = "/browse")
    public String browseEmployees(Model model) {
        List<Employee> employeeList = new ArrayList<Employee>(springJdbcDao.getEmployeesList());
        model.addAttribute("employeeList", employeeList);
        return "browse";
    }

    @RequestMapping(value = "/browse/details/{id}", method = RequestMethod.GET)
    public String viewDetails(@PathVariable("id") int id, Model model) {
        Employee employee = springJdbcDao.getEmployeeById(id);
        model.addAttribute("data", employee);
        return "details";
    }
}

我需要重定向到“/ browse / details / {id}”，通过单击表格的行来查看有关员工的详细信息。我怎么能这样做？

Answer 1

建议在行中添加data-属性，以便更轻松地获取员工ID：

<tr class=row data-emp_id="${employee.id}"></tr>

现在，当点击行时，对服务器进行AJAX调用：

var dataType='html';/* this is default and argument for `$.get` not needed for default, is shown for understanding*/
$('tr').click(function(){        
   $.get('/path/to server/', { id: $(this).data('emp_id') }, function( response){
       /* do something with response be it html, xml or JSON response*/
   }, dataType)
});

在服务器上接收id，就像使用name="id"的任何表单控制元素一样，并发回相应的数据

单击表格行查看详细信息

1 个答案: