本文记录了使用EasyUI实现异步树形表格的过程，通过JSP页面、JavaScript和Java后台代码展示如何动态加载数据。在JSP中设置treegrid的url和onBeforeExpand事件，根据节点ID动态更改请求URL。Java代码处理AJAX请求，返回JSON数据，数据库操作使用MyBatis进行。
JSP 页面
<%@ include file="/WEB-INF/pages/include/taglibs-include.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<html>
<head>
<%@ include file="/WEB-INF/pages/decorators/main-head-include.jsp"%>
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<%@ include file="/WEB-INF/pages/decorators/main-body-include.jsp"%>
<div id="main">
<div id="mainWrapper">
<!-- here is the button area -->
<div class="spacer">
<hr />
</div>
<div class="searchResult">
<table id="menuTree" title="<spring:message code='ruralcreditunioninstUnit.title.summary.search.rslt'/>">
<thead>
<tr class="trStyle">
<th data-options="field:'id',width:fixWidth(0.2),halign:'center'"><spring:message code="ruralCreditUnionInstUnit.label.summary.grid.instName" /></th>
<th data-options="field:'text',width:fixWidth(0.1),halign:'center'"><spring:message code="ruralCreditUnionInstUnit.label.summary.grid.instCode" /></th>
<th data-options="field:'pid',width:fixWidth(0.1),halign:'center'"><spring:message code="ruralCreditUnionInstUnit.label.summary.grid.instType" /></th>
<th data-options="field:'state',width:fixWidth(0.1),halign:'center',align:'center'"><spring:message code="ruralCreditUnionInstUnit.label.summary.grid.agentSalesFlag"/></th>
</tr>
</thead>
</table>
</div>
<div class="spacer">
<hr />
</div>
</div>
</div>
<%@ include file="/WEB-INF/pages/instmgr/ruralcreditunioninstunit/js-ruralCreditUnionInstUnit-include.jsp" %>
<%@ include file="/WEB-INF/pages/decorators/main-foot-include.jsp"%>
</body>
</html>
<script type="text/javascript">
if ($('#menuTree').length > 0) {
$('#menuTree').treegrid({
url:"queryRuralCreditUnionInstUnitDataGrid1.do",
onBeforeExpand:function(node,data){
if (node) {
var url1 ="<c:url value='/operation/instmgr/queryRuralCreditUnionInstUnitDataGrid1.do'/>?pid=" + node.id;
$('#menuTree').treegrid('options').url = url1;
}
},
idField:'id',
treeField:'id',
animate:true,
lines:true,
rownumbers:true,
showHeader:true,
height:'auto',
width:'auto',
autoRowHeight:true,
autoRowWidth:true,
fitColumns:true,
loadMsg: '<spring:message code="pagination.label.loadMsg" />',
onLoadSuccess: function(data){
$('#menuTree').treegrid(
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
