Jquery easyui 实现动态树


Posted in Javascript onNovember 17, 2015

在上篇文章给大家介绍了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>
Javascript 相关文章推荐
jquery validate.js表单验证的基本用法入门
May 13 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
vue循环数组改变点击文字的颜色
Oct 14 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 #Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 #Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 #Javascript
基于Jquery easyui 选中特定的tab
Nov 17 #Javascript
jquery实现简单的表单验证
Nov 17 #Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 #Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 #Javascript
You might like
PHP中$this和$that指针使用实例
2015/01/06 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
js 匿名调用实现代码
2009/06/19 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
Python Matplotlib库入门指南
2015/05/18 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
国培教师自我鉴定
2014/02/12 职场文书
企业员工培训感言
2014/02/26 职场文书
献爱心活动总结
2014/05/07 职场文书
企业法人代表任命书
2014/06/06 职场文书
辞职申请书范本
2019/05/20 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript