easyui在datagrid中显示行详情（一）

一、页面引用

<!-- 1.页面引入样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/jquery-easyui-1.4.2/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/jquery-easyui-1.4.2/themes/icon.css">
<!-- 2.页面引入脚本 -->
<script type="text/javascript"src="${pageContext.request.contextPath }/jquery-easyui-1.4.2/jquery-1.8.0.min.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath }/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath }/jquery-easyui-1.4.2/datagrid-detailview.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script> 
<!-- 3.页面引入自定义脚本 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/userManager.js" ></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/validate.js" ></script>
<!-- 4.页面引入其他脚本 -->
<link href="${pageContext.request.contextPath }/myDatePicker_2.2/datePicker.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="${pageContext.request.contextPath }/myDatePicker_2.2/jquery.datePicker-min.js"></script>

注意：经测试需引用jquery-1.8.0.min.js这个版本的js，低版本可能不使用，我用的是easyui的版本是1.4.2

二、后台代码
其中，sex、birthday、admin是在datagrid中的行详情中显示的，也就是说在datagrid中不能直接看到它们，需要点击datagrid中行前面那个“+”号查看这一行的详情信息才能看到这三个信息。

//显示员工信息列表
	public void listEmpl() throws IOException{
  

		   resp.setCharacterEncoding("UTF-8");

		   Empl currEmpl = (Empl) session.getAttribute("emp1");
		   int currId = currEmpl.getEid();

		   int offset=!"".equals(req.getParameter("page"))&&null!=(req.getParameter("page"))?Integer.parseInt(req.getParameter("page")):1;

		   Pager<Object[]> pager=null;
		   //查询条件：员工名称、职位、部门名称、状态
           pager=empService.search(emp