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 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 Javascript
vue的webcamjs集成方式
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
phpwind中的数据库操作类
2007/01/02 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
pyramid配置session的方法教程
2013/11/27 Python
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
什么是.net
2015/08/03 面试题
名人演讲稿范文
2013/12/28 职场文书
挑战杯创业计划书的写作指南
2014/01/07 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
小学四年级作文之写景
2019/08/23 职场文书
Android实现图片九宫格
2022/06/28 Java/Android