Jquery easyui 实现动态树

2024-05-06 16:25:08

字体：大中小

来源：转载

供稿：网友

本文给大家介绍jquery easyui实现动态树，本文通过代码实例相结合的方式给大家展示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+

"{/n" +

" /"id/":"+wfTo.getWfid()+",/n" +

" /"text/":/"<a href='javaScript:void(0)' target='mainFrame'>"+wfTo.getWfname()+"</a>/",/n" +

" /"state/":/"closed/"/n" +

" },";

}

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+

"{/n" +

" /"id/":"+wfNodesTo.getNodeid()+",/n" +

" /"text/":/"<a href='" + request.getContextPath()+

"/formconfig/loadGroupByWfIdAndNodeId.do?wfId="+wfId+"&nodeId="+wfNodesTo.getNodeid()+"' target='mainFrame'>"+wfNodesTo.getGenstepname()+"("+wfNodesTo.getNodeid()+")</a>/",/n" +

" /"state/":/"closed/"/n" +

" },";

}

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>