jquery中EasyUI实现异步树

前台使用EasyUI实现 . EasyUI向后台传递一个id参数 .

第一次加载 , 向后台传递的id为null .

之后每次将树节点展开 , 会向后台传递一个当前节点的 id .

Control层 :

代码如下:

/**
  * tree
  */
 @RequestMapping(value = "/tree.do")
 public void mytree(HttpServletResponse response, String id) {
  this.writeJson(response, bookService.getChildrenTree(id));
 }

Service层 :

代码如下:

@Transactional
 @Override
 public List<Tree> getChildrenTree(String pid) {
  try {
   List<Tree> result = new ArrayList<Tree>();
   //获得儿子节点的列表
   List<TBookType> childrenList = this.getChildrenType(pid);
   if (childrenList != null && childrenList.size() > 0) {
    for (TBookType child : childrenList) {
     // 获取孙子的个数
     long count = bookDao.getChildrenCount(String.valueOf(child.getId()));
     Tree node = new Tree();
     node.setId(String.valueOf(child.getId()));
     node.setPid(String.valueOf(child.getPid()));
     node.setText(child.getName());
     node.setChildren(null);
     node.setState(count > 0 ? "closed" : "open");
     //将儿子列表childrenList数据逐个存到树当中
     result.add(node);
    }
   }
    return result;
  } catch (Exception e) {
   throw new BusinessException("获取图书类型数据出现错误！", e);
  }
 }

Dao层 :

代码如下:

@Override
 public List<TBookType> getChildrenType(String pid) {
 //这个的pid就是当前展开节点的id , 通过父节点的 id 来获得子节点
 StringBuilder sqlstr = new StringBuilder();
  if (StringUtils.isBlank(pid))
   sqlstr.append("select * from booktype bt where bt.pid=0");
  else
   sqlstr.append("select * from booktype bt where bt.pid=" + pid );
  return this.search2(TBookType.class, sqlstr.toString());
 }

代码如下:

@Override
 public long getChildrenCount(String pid) {
 //这个的pid就是当前展开节点的id , 通过父节点的 id 来获得子节点的个数
  StringBuilder sqlstr = new StringBuilder();
  if (StringUtils.isBlank(pid))
   sqlstr.append("select count(*) from booktype tb where tb.pid='0'");
  else
   sqlstr.append("select count(*) from booktype tb where tb.pid='" + pid + "'");
  return this.count(sqlstr.toString());
 }

以上所述就是本文关于EasyUI实现异步树的全部代码了，希望对大家能有所帮助

赞 (0)

相关推荐

  • EasyUI Tree+Asp.net实现权限树或目录树导航的简单实例

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Manage_Main" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

  • EasyUi combotree 实现动态加载树节点

    推荐阅读: 简介EasyUI datagrid editor combogrid搜索框的实现 EasyUi中的Combogrid 实现分页和动态搜索远程数据 easyui 1.2.4例子中并没有给出动态加载树节点的例子,只好自己研究. 从源码中可知可以看出combotree 是继承 combo 和 tree两个控件,所以在展开其下级子节点时,把combotree内置的tree的options选项的url重置成一个动态取选择值的url,代码如下: $('#cc').combotree({ url:

  • 轻松学习jQuery插件EasyUI EasyUI创建树形菜单

    轻松学习jQuery插件EasyUI EasyUI创建树形菜单

    一.EasyUI使用标记创建树形菜单 一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 <ul> 元素中.无序列表的 <ul> 元素提供一个基础的树(Tree)结构.每一个 <li> 元素将产生一个树节点,子 <ul> 元素将产生一个父树节点. 创建树形菜单(Tree) <ul class="easyui-tree"> <li> <span>Folder</s

  • 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

  • EasyUI创建人员树的实例代码

    EasyUI创建人员树的实例代码

    最近做了一个树状的下拉列表,在这里记录一下,以后可以直接使用 项目中的树状下拉列表是用来选择人员用的,具体实现展示如下: 先说一说功能,左边的人员数是提供选人的,当点击中间的按钮,选中的人员会直接移到右边,如果要删除已选中的人员,只需要双击右边人的姓名即可,点击确定进行集体的业务逻辑操作,一般就是新增人员到某一个表中. 我们再来看看这个DIV的具体代码,由于项目中在多个地方都使用到了这个人员树,所以我把这个DIV抽象出来当作一个公共的jsp页面.如需调用,只需要include这个jsp即可 us

  • 浅谈EasyUi ComBotree树修改 父节点选择的问题

    本人在使用 Easy UI 期间发现了一个不太适合项目的bug,可能也不算bug把 . 毕竟不同项目背景 取舍不同. 我在做网元树选择的时候  发现当选取父节点后,子节点都会被选择  返回  .但是如果我们选中父节点后没有必要选择子节点. 故对源脚本作适当修改 下拉框树修改 父节点选中后只显示父节点  取消返回子节点 修改方法 找到树的选择函数 进行遍历判断  查找关键字 combotree multiple 大约行数 10564 function _7d5(_7d6) { var opts=$

  • jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍

    扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults. 依赖 datagrid 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').treegrid({ url:'treegrid_data.json', treeField:'name', columns:[[ {title:'Task Name',field:'name'

  • 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实现异步树

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

  • jquery中的ajax异步上传

    找了好久终于在网上找到了ajax异步上传文件的方法,不过网上大多数是php的 ,我改为struts2写的 大同小异,希望对学习java的人有一定的帮助.我上传的是音乐文件. ajaxfileupload.js这个js文件是主要文件,一定要导入. jsp页面 ,其中我还做了div的隐藏***************************** <%@ page language="java" import="java.util.*" pageEncoding=&

  • jquery使用EasyUI Tree异步加载JSON数据（生成树）

    这几天因为工作需要,要做一个支持无限级的菜单. 我也是菜鸟一只,能想到的东西不多,所以用了Easy UI的tree组件. 不得不说,easyui确实很强大. 因为是无限级菜单,数据量可能有点大,所以考虑采用异步加载. 但是因为后台默认传来的数据是 一个实体,所以又在后台进行了JSON字符串拼接. 最后,在网上找了N多代码,然后又去问了好几个群里的网友,终于搞出来这个小东西. 一.HTML部分代码 <div id="categoryChooseDiv" title="请选

  • jquery中EasyUI使用技巧小结

    combobox组件 一.禁用combobox里面的输入框 复制代码 代码如下: $("选择器").combo('textbox').attr("readonly", "readonly"); $('选择器').combobox({ editable:false ,     panelheight:300 }); 二.禁用 复制代码 代码如下: $('选择器').combobox('disable'); 三.获取选项文本和值 复制代码 代码如下:

  • 解析jquery easyui tree异步加载子节点问题

    easyui中的树可以从标记中建立,也可以通过指定一个URL属性读取数据建立.如果想建立一棵异步树,需要为每个节点指定一个id属性值,这样在加载数据时会自动向后台传递id参数. <ul id="tt"></ul> 编写前台代码: $('#tt').tree({ url:'/demo2/node/getNodes' // The url will be mapped to NodeController class and getNodes method }); 为

  • jQuery Easyui 下拉树组件combotree

    jQuery Easyui 下拉树组件combotree

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

  • 以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题

    Promises是一种令代码异步行为更加优雅的抽象,它很有可能是JavaScript的下一个编程范式,一个Promise即表示任务结果,无论该任务是否完成. 在一些现代浏览器中已经提供了原生的Promise对象,其遵循Promise/A+标准.在jQuery1.5+,提供了$.Deferred(其可以被转化为promise对象).很多知名的框架中,也提供了promise对象.promise对象在javascript中已经是一种很重要的模式,它在解决异步问题时表现出的优雅,正是javascript

  • jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法

    本文实例讲述了jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法.分享给大家供大家参考,具体如下: 我们在使用EasyUI Tabs框架时,在框架最顶层的弹出窗体中需要操作当前Tab的iframe窗体内容或方法,这时候我们就可以使用以下方法来实现. 具体实现代码如下所示: function getTabWindow() { var curTabWin = null; var curTab = parent.$('#main-center').tabs('getSelected

随机推荐