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 apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
Vue中图片Src使用变量的方法
Oct 30 Javascript
js实现无缝轮播图插件封装
Jul 31 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 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
php MessagePack介绍
2013/10/06 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
python基础教程之缩进介绍
2014/08/29 Python
python中while和for的区别总结
2019/06/28 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
药学专业个人的自我评价
2013/12/31 职场文书
负责人任命书范本
2014/06/04 职场文书
教师学期末个人总结
2015/02/13 职场文书
Vue2.0搭建脚手架
2022/03/13 Vue.js
Python使用openpyxl模块处理Excel文件
2022/06/05 Python