easy UI异步树的动态加载treegrid(实践记录)

本文记录了使用EasyUI实现异步树形表格的过程,通过JSP页面、JavaScript和Java后台代码展示如何动态加载数据。在JSP中设置treegrid的url和onBeforeExpand事件,根据节点ID动态更改请求URL。Java代码处理AJAX请求,返回JSON数据,数据库操作使用MyBatis进行。
摘要由CSDN通过智能技术生成

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(

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值