Jquery easyui 实现动态树
在上篇文章给大家介绍了jquery中EasyUI实现异步树,本文给大家介绍jqueryeasyui实现动态树。
首先是在jsp页面中引入相关的js文件
在body中加入流程列表,通过后天拼接json数据
具体内容请看下面代码详情吧。
首选在jsp页面中引入相关的js
<linkrel="stylesheet"type="text/css"href="<%=path%>/css/jquery_easyui/themes/default/easyui.css"> <linkrel="stylesheet"type="text/css"href="<%=path%>/css/jquery_easyui/themes/icon.css"> <scripttype="text/javascript"src="<%=path%>/js/jquery_easyui/jquery-1.4.4.min.js"></script> <scripttype="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> <ulid="tt2"> <listate="closed"id='0'><span>流程列表</span></li> </ul> </body>
后台拼接json数据
packagecom.aegon_cnooc.oa.formconfig.action; importjava.io.PrintWriter; importjava.util.List; importjavax.servlet.http.HttpServletRequest; importjavax.servlet.http.HttpServletResponse; importorg.apache.struts.action.ActionForm; importorg.apache.struts.action.ActionForward; importorg.apache.struts.action.ActionMapping; importcom.aegon_cnooc.framework.base.action.BaseAction; importcom.aegon_cnooc.oa.formconfig.service.FormConfigService; importcom.aegon_cnooc.oa.ibatis.to.TuOafWfTO; importcom.aegon_cnooc.oa.ibatis.to.TuOafWfnodesTO; importcom.aegon_cnooc.util.StringUtil; /** *加载流程下的节点的名称 *@Author:liuxinghui *@Date:2011-9-8 *@Version:2.0 *@Despcrition: */ publicclassLoadWfNodesActionextendsBaseAction{ privateFormConfigServiceformConfigService; publicActionForwardexecuteAction(ActionMappingmapping,ActionFormform, HttpServletRequestrequest,HttpServletResponseresponse) throwsException{ StringwfId=request.getParameter("wfId"); Stringjsonstr="["; if(StringUtil.isNotEmpty(wfId)&&"0".equals(wfId)){ ListwfList=formConfigService.findWf(); for(inti=0;i<wfList.size();i++){ TuOafWfTOwfTo=(TuOafWfTO)wfList.get(i); jsonstr=jsonstr+ "{\n"+ "\"id\":"+wfTo.getWfid()+",\n"+ "\"text\":\"<ahref='javaScript:void(0)'target='mainFrame'>"+wfTo.getWfname()+"</a>\",\n"+ "\"state\":\"closed\"\n"+ "},"; } intend=jsonstr.length()-1;//去掉最后一个逗号 Stringjson=jsonstr.substring(0,end); json=json+"]"; response.setContentType("application/json;charset=gbk"); response.setCharacterEncoding("gbk"); PrintWriterpw=response.getWriter(); pw.write(json); pw.flush(); }else{ ListwfNodes=formConfigService.findWfNodesById(wfId); for(inti=0;i<wfNodes.size();i++){ TuOafWfnodesTOwfNodesTo=(TuOafWfnodesTO)wfNodes.get(i); jsonstr=jsonstr+ "{\n"+ "\"id\":"+wfNodesTo.getNodeid()+",\n"+ "\"text\":\"<ahref='"+request.getContextPath()+ "/formconfig/loadGroupByWfIdAndNodeId.do?wfId="+wfId+"&nodeId="+wfNodesTo.getNodeid()+"'target='mainFrame'>"+wfNodesTo.getGenstepname()+"("+wfNodesTo.getNodeid()+")</a>\",\n"+ "\"state\":\"closed\"\n"+ "},"; } intend=jsonstr.length()-1;//去掉最后一个逗号 Stringjson=jsonstr.substring(0,end); json=json+"]"; response.setContentType("application/json;charset=gbk"); response.setCharacterEncoding("gbk"); PrintWriterpw=response.getWriter(); pw.write(json); pw.flush(); } returnnull; } publicvoidsetFormConfigService(FormConfigServiceformConfigService){ this.formConfigService=formConfigService; } }
下面一段代码是EasyUIJquery动态加载树,点击节点加载
<scripttype="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> <ulid="tt"></ul> </body>