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

easyui在datagrid中显示行详情（二）
一、引用文件
注：1.datagrid-detailview.js是在easyui的datagrid中显示详情需要的js文件；2.<table id="dg"></table>的具体内容在js中编辑，所以这里只有一行HTML代码。

<!-- 1.页面引入样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/jquery-easyui-1.4.2/themes/metro/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>
..
<table id="dg"></table>
..

二、编辑struts配置文件
这里主要配置显示员工详情的路径

<action name="emplAction" class="com.chen.action.EmplAction">
      <result name="tolist" type="redirectAction">emplAction!listEmpl.action</result>
      <result name="false">/login.jsp</result>
      <result name="list">/WEB-INF/jsp/userManager.jsp</result>
      <!-- 显示员工详情的地址 -->
      <result name="userDetail">/WEB-INF/jsp/userDetail.jsp</result>
      <result name="toAddEmpl">/WEB-INF/jsp/addEmpl.jsp</result>
      <result name="toEditEmpl" type="dispatcher">/WEB-INF/jsp/editEmpl.jsp</result>
</action>

三、编辑userDetail.jsp
这是显示员工详情的页面

<table class="dv-table" border="0" style="width:auto;">
		<tr>
			<td class="dv-label" style="border:0;padding-left:6px;width:61px">员工姓名: </td>
			<td style="border:0;width:50px">${empl.ename}</td>
			<td class="dv-label" style="border:0;width:41px">性别:</td>
			<td style="border:0;width:40px">${empl.sex}</td>
			<td class="dv-label" style="border:0;width:61px">出生日期: </td>
			<td style="border:0;width:80px" id="birthday">${empl.birthday}</td>
			<td class="dv-label" style="border:0;width:41px">职责:</td>
			<td style="border:0;width:80px">
			<c:if test="${empl.admin == 0}">
			   前台
			</c:if>
			<c:if test="${empl.admin == 1}">
			   后台
			</c:if> 
			
			</td>
		</tr>

</table>

四、编辑控制器
这里使用的是struts2作为控制器

//显示用户详情。注：BeanHandler无法封装to_char格式化后的日期，所以在此设置日期格式，设置后的格式为：1999-01-01。
	public String showUseDetail(){
		empl=empService.findEmplById(id);
		String birthday = empl.getBirthday();
		empl.setBirthday(birthday.substring(0,10));
		return "userDetail";
	}

五、编辑js
注：显示“idField:'id',”主要是说明相关js一般写在这个属性后面。

//主键
		idField:'id',
		//显示用户详情
		view: detailview,
		detailFormatter:function(rowIndex,rowData){
	        return '<div class="ddv" style="padding:5px 0"></div>';
	    },
	    onExpandRow: function(rowIndex,rowData){
	        var ddv = $(this).datagrid('getRowDetail',rowIndex).find('div.ddv');
	        ddv.panel({
	            border:false,
	            cache:false,
	            href:'emplAction!showUseDetail.action?id='+rowData.eid+'',
	            onLoad:function(){
	                $('#dg').datagrid('fixDetailRowHeight',rowIndex);
	            }
	        });
	        $('#dg').datagrid('fixDetailRowHeight',rowIndex);
	    },

大功告成，点击datagrid行号后面的“+”，效果如下：
easyui在datagrid中显示行详情（2）

小结：每次点击一下“+”，js均会向控制器发送请求，所以当修改员工信息后，能够即时在显示详情的视图中看到修改后的信息而不用担心缓存亦或其他问题。

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

相关推荐