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>