Jquery easyui 实现动态树

在上篇文章给大家介绍了jquery中EasyUI实现异步树，本文给大家介绍jquery easyui实现动态树。
首先是在jsp页面中引入相关的js文件
在body中加入流程列表，通过后天拼接json数据
具体内容请看下面代码详情吧。
首选在jsp页面中引入相关的js

<link rel="stylesheet" type="text/css" href="<%=path %>/css/jquery_easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="<%=path %>/css/jquery_easyui/themes/icon.css"> <script type="text/javascript" src="<%=path %>/js/jquery_easyui/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="<%=path %>/js/jquery_easyui/jquery.easyui.min.js"></script>

添加script

<script> $（function（）{ $（"#tt2"）.tree（{checkbox: false,url: "<%=path%>/formconfig/loadWfNodes.do",onBeforeExpand: function（node）{ $（"#tt2"）.tree（"options"）.url = "<%=path%>/formconfig/loadWfNodes.do?wfId="+node.id;} }）;}）; </script>

在body中加入

<body> <ul id="tt2"><li state="closed" id="0"><span>流程列表</span></li></ul> </body>

后台拼接json数据

package com.aegon_cnooc.oa.formconfig.action;import java.io.PrintWriter;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.struts.action.ActionForm;import org.apache.struts.action.ActionForward;import org.apache.struts.action.ActionMapping;import com.aegon_cnooc.framework.base.action.BaseAction;import com.aegon_cnooc.oa.formconfig.service.FormConfigService;import com.aegon_cnooc.oa.ibatis.to.TuOafWfTO;import com.aegon_cnooc.oa.ibatis.to.TuOafWfnodesTO;import com.aegon_cnooc.util.StringUtil;/** * 加载流程下的节点的名称 * @Author: liuxinghui * @Date: 2011-9-8 * @Version: 2.0 * @Despcrition: */public class LoadWfNodesAction extends BaseAction{ private FormConfigService formConfigService; public ActionForward executeAction（ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response） throws Exception {String wfId=request.getParameter（"wfId"）;String jsonstr = "[";if（StringUtil.isNotEmpty（wfId）&&"0".equals（wfId））{ List wfList=formConfigService.findWf（）; for（int i=0;i<wfList.size（）;i++）{TuOafWfTO wfTo=（TuOafWfTO）wfList.get（i）; jsonstr=jsonstr+"{
" +""id":"+wfTo.getWfid（）+",
" + ""text":"<a href="javaScript:void（0）" target="mainFrame">"+wfTo.getWfname（）+"</a>",
" +""state":"closed"
" + " },"; } int end=jsonstr.length（）-1;//去掉最后一个逗号 String json=jsonstr.substring（0,end）; json=json+"]";response.setContentType（"application/json;charset=gbk"）;response.setCharacterEncoding（"gbk"）;PrintWriter pw = response.getWriter（）;pw.write（json）;pw.flush（）;}else{List wfNodes=formConfigService.findWfNodesById（wfId）; for（int i=0;i<wfNodes.size（）;i++）{TuOafWfnodesTO wfNodesTo=（TuOafWfnodesTO）wfNodes.get（i）; jsonstr=jsonstr+"{
" +""id":"+wfNodesTo.getNodeid（）+",
" + ""text":"<a href="" + request.getContextPath（）+"/formconfig/loadGroupByWfIdAndNodeId.do?wfId="+wfId+"&nodeId="+wfNodesTo.getNodeid（）+"" target="mainFrame">"+wfNodesTo.getGenstepname（）+"（"+wfNodesTo.getNodeid（）+"）</a>",
" +""state":"closed"
" + " },"; } int end=jsonstr.length（）-1;//去掉最后一个逗号 String json=jsonstr.substring（0,end）; json=json+"]";response.setContentType（"application/json;charset=gbk"）;response.setCharacterEncoding（"gbk"）;PrintWriter pw = response.getWriter（）;pw.write（json）;pw.flush（）;}return null; } public void setFormConfigService（FormConfigService formConfigService） {this.formConfigService = formConfigService; }}

下面一段代码是EasyUI Jquery 动态加载树，点击节点加载

<script type="text/javascript"> $（function（） { $（document）.ready（function（） { $.post（"./test/tree.action", {}, function（json） { $（"#tt"）.tree（{ data : json.itemsList, onClick : function（node） { $.post（"./test/tree.action", { "id" : node.id }, function（json） { $（"#tt"）.tree（"append", { parent : node.target, data : json.data }）; }, "json"）; } }）; }, "json"）; }）; }）; </script> </head> <body> <ul id="tt"></ul> </body>