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>