Jquery easyui 實現動態樹，jqueryeasyui

最後更新：2015-11-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在上篇文章給大家介紹了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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Jquery easyui 實現動態樹，jqueryeasyui

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support