Jquery easyui 实现动态树

2024-09-28 21:35:10

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

Easy UI动态树点击文字实现展开关闭功能

只需要在JSP处,点击树的函数中,添加一段代码即可: 整体如下: <span style="white-space:pre"> </span>$("#tt").tree({ onClick: function(node){ if(node.url != null){ parent.frames["content"].location.href="${ctx}" rel="external no
Jquery easyui 实现动态树

在上篇文章给大家介绍了jquery中EasyUI实现异步树,本文给大家介绍jquery easyui实现动态树. 首先是在jsp页面中引入相关的js文件在body中加入流程列表,通过后天拼接json数据具体内容请看下面代码详情吧. 首选在jsp页面中引入相关的js <link rel="stylesheet" type="text/css" href="<%=path %>/css/jquery_easyui/themes/defau
jQuery Easyui 下拉树组件combotree

jQuery EasyUI 组合树(ComboTree) 和组合框的用法差不多,只是在显示上有点差别:一个显示成树状结构,一个显示成列表结构. 项目中做角色授权时,需要做一个下拉框带树结构的并且可以多选的组件,就想到了easyui的combotree,有关这个组件的用法废话不多说,直接上代码 $('#bianhao').combotree({ url : urlg2 + '/tbdefaultroll/selectByLevel?belongLevel=' + $('#jibie').comb
jquery easyui dataGrid动态改变排序字段名的方法

jQuery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序,这里以JAVA为例,后端的实体类字段有可能和数据库的字段不一致: 如:实体类中的属性为userName,前台filed="userName"而数据库的字段为user_name,这个时候如果把userName设置为排序列,然后去进行点击,就会抛出异常,因为dataGrid在排序的时候会以filed="userName"中的字段名为排序字段: 问题:
jQuery easyui datagrid动态查询数据实例讲解

该插件组小巧使用方便,以下是一个从前台提交查询条件,从MSSQL返回json数据的一个事例 HTML前端代码复制代码代码如下: <?php include_once("auth.php"); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel=&qu
jQuery EasyUI 布局之动态添加tabs标签页

在没看下文之前先给大家简单介绍easyui相关知识. easyui是一种基于jQuery的用户界面插件集合.ddd easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面. easyui是个完美支持HTML5网页的完整框架. easyui节省您网页开发的时间和规模. easyui很简单但功能强大的. 通过使用 jQuery EasyUI 可以很容易地添加 Tabs.您只需要调用
jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

在上篇文章给大家介绍了jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单先上代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&g
jQuery EasyUI中DataGird动态生成列的方法

EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍EasyUI中DataGird动态生成列的方法. DataGird动态生成列,实际上就是控制DataGird的 columns 属性值,下面通过ajax异步调用后台columns的数据,进行绑定. <table id="dg"></table> <script>
jquery中EasyUI实现异步树

前台使用EasyUI实现 . EasyUI向后台传递一个id参数 . 第一次加载 , 向后台传递的id为null . 之后每次将树节点展开 , 会向后台传递一个当前节点的 id . Control层 : 复制代码代码如下: /** * tree */ @RequestMapping(value = "/tree.do") public void mytree(HttpServletResponse response, String id) { this.writeJs
jquery中EasyUI实现同步树

在JS中,将显示树的url地址写成control的地址即可. control: 复制代码代码如下: @RequestMapping(value = "/tree") public void tree(HttpServletRequest request, HttpServletResponse response) throws IOException { this.writeJson(response, bookService.getTree()); } dao: 复制代码
实例代码讲解jquery easyui动态tab页

通过使用 jQuery EasyUI 可以很容易地添加 Tabs.您只需要调用 'add' 方法即可. function addTab(title, href,icon){ var tt = $('#tabs'); if (tt.tabs('exists', title)){//如果tab已经存在,则选中并刷新该tab tt.tabs('select', title); refreshTab({tabTitle:title,url:href}); } else { if (href){ var

Jquery easyui 实现动态树

相关推荐

随机推荐