`
jinjingxiang
  • 浏览: 24969 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

juery treeview 动态加载(实现)

阅读更多
最近一直在做一个树的动态加载,可在网上找了半天也没找到太合适的答案,不过有一个写的还是不错的,只不过在第一次加载的时候是完全加载树,而不是动态实现的,今天本想引用一下,再他的基础上修改的,但没有找到。

本树的说明如下:
1、树实现动态加载
2、要传递一个按钮的参数,比如是单选,还是复选
3、只有是叶子节点才有按钮出现
如果有需要可以在此基础上进行修改,我的并不完善,只是实现了功能。

用的struts1.2框架
首先、从页面开始写: html代码如下:
<ul id="back">
</ul>
树将在id为back的位置进行展示。
   js代码如下:
<script type="text/javascript">
$(document).ready(function(){
  //初始化树
  $("#back").treeview({
  animated: "fast",
collapsed: true,
unique: true,
persist: "location",
        url:"<%=url%>"
  });
                 });

</script>
这个是展示树的页面,进入这个页面的时候会自动加载这个treeview,调用url地址,  url的参数可以接收过来,demo.do?method=findChildren&viewBox=1这地方的viewBox代表按钮的是单选还是复选。
在此页面要要引入jquery  treeview ,可以参照juerytreeview的例子async.html
其次、配置struts 1.2action
<action path="/demoTreeAction" scope="request" parameter="method" type="DemoTreeAction"/>

最后 actioin中代码如下:
public ActionForward findChildren(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
            throws Exception {
            //此处动态加载要设置的头信息
            response.setHeader("Cache-Control", "no-cache");
            response.setContentType("text/json;charset=UTF-8");
            request.setCharacterEncoding("utf-8");
            PrintWriter out = response.getWriter();
            String viewBox = request.getParameter("viewBox");
            String root = request.getParameter("root");
            if("source".equals(root)){
                root="parent";
            }
            String output= getNode(root,viewBox);
            out.write(output);
            out.flush();
            out.close();
            return null;
    }
//以下代码为业务代码,用来查询子节点,生成json格式数据,具体的json格式请参
//考treeview例子中的 source.html,这里用了spring服务注入,DemoVo 为是javaBean 有三个字段  其中 根据 code name 还有父节点 parent
  private String getNode(String code,String viewBox) throws Exception{
            StringBuffer sb = new StringBuffer();
            sb.append("[");
            List<DemoVo> temp = null;
            if(demoService.hasSubItem(code)){//有孩子执行
                temp = demoService.findChildrenByParent(code);//根据code查询其孩子
                int j=0;
               for (int i = 0; i < temp.size(); i++,j++) {
                   if(j>0){
                       sb.append(",");
                   }
                    sb.append(" {");
                    DemoVo item = (DemoVo)temp.get(i);
                    if(demoService.hasSubItem(item.getCode())){//有孩子
                        sb.append("  \"text\": \""+item.getName()+"\""); //这里是显示的名称
                        sb.append(",");
                        sb.append(" \"hasChildren\": true");  //设为true预留会显示+号
                    }else{//叶子节点 显示按钮
                        sb.append("  \"text\": ");
                        if("1".equals(viewBox)){
                            sb.append("\"<input type='checkbox' value='");
                        }else{
                            sb.append("\"<input type='radio' name='s' value='");
                        }
                        sb.append(item.getCode());
                        sb.append("' />");
                        sb.append(item.getName());
                        sb.append("\"");
                    }
                    sb.append(",");
                    sb.append("  \"expanded\": false ");
                    sb.append(",");
                    sb.append(" \"id\": \""+item.getCode()+"\"");//给<li>添加id此处为code在树中唯一,以后点击节点动态加载时根据此rot=id的值进行查询
                    sb.append(" }"); 
                }
            }
            sb.append("]");
    return sb.toString();
}
  javaBean如下:
  public class DemoVo {
    private String code;  //在数据库中唯一
    private String name;
    private String parent; //父节点就是code
   //setter getter 省略
}

总结:简单说明一下,treeView 在首次访问的时候会传参数 root 默认值为source,此代码的跟节点,为parent
在首次访问url后,查询到一级节点,此url被存起来了,再次点击节点,url中多了root参数,
其值根据点击的<li>中的id而变,于是便动态加载
本人邮箱 jingxiangj@163.com
3
0
分享到:
评论

相关推荐

    bootstrap-treeview树节点实现动态加载(懒加载)

    本项目在官方Bootstrap Treeview的基础上进行了扩展,实现了懒加载功能。这意味着当用户首次访问树形视图时,只会加载根节点,当用户展开某个节点时,该节点的子节点才会在后台请求数据并动态添加到视图中。这样,...

    动态树的管理程序(基于jQuery Treeview实现)

    在实现的时候也会有很多的方法,例如可以用extjs,jquery treeview等一些js开发包。 但是在开发的时候我种想找个例子来参考下,发现有很多这样的例子,包括extjs和jquery treeview的官方也有,但结合java后台实现的...

    Bootstrap treeview实现动态加载数据并添加快捷搜索功能

    Bootstrap Treeview 实现动态加载数据并添加快捷搜索功能 Bootstrap Treeview 是一个基于 Bootstrap 的 jQuery 插件,用于显示树形结构数据。该插件支持多级列表树结构,能够以简单和优雅的方式显示继承树结构,如...

    jQuery插件TreeView异步加载树

    本篇文章将深入探讨jQuery插件中的“TreeView”组件,特别是关于其异步加载树的实现。 TreeView是一种常见的UI元素,它通常用于展示层次结构的数据,如文件系统、组织结构等。在网页应用中,TreeView插件能够以树形...

    jQuery Treeview异步树实现

    在这个异步树实现中,我们专注于如何在jQuery Treeview中集成异步加载功能,特别是与.NET 3.5及以上版本的后端接口协同工作。 异步加载对于大型数据集至关重要,因为它允许用户逐步加载数据,而不是一次性加载所有...

    jquery treeview demo

    3. **初始化TreeView**:在文档加载完成后,使用jQuery选择器找到`&lt;ul&gt;`元素,并调用`.treeview()`方法进行初始化。例如: ```javascript $(document).ready(function() { $("#myTree").treeview(); }); ``` 4...

    Jquery TreeView支持大数据加载树

    在提供的压缩包文件“myTreeView”中,很可能是包含了示例代码或者已经配置好的jQuery TreeView实例,用户可以通过查看和运行这些代码来理解和学习如何实现大数据加载树的功能。这有助于快速掌握实际应用中的技巧和...

    动态树的管理程序(基于jQuery Treeview实现)-java源码

    总的来说,这个项目展示了如何结合使用jQuery Treeview进行前端展示,以及Struts2、Spring和Hibernate这三大Java EE框架进行后端处理,构建一个动态的、交互式的树状数据管理界面。理解并掌握这些技术对于提升Web...

    jquery实现的一个treeview效果

    下面我们将深入探讨jQuery Treeview的基本概念、实现原理以及使用方法。 首先,jQuery Treeview是一个插件,它扩展了jQuery的功能,允许开发者将HTML表格或无序列表转换为具有折叠/展开功能的树状视图。这个插件...

    jquery TreeView源码实例

    此外,jQuery TreeView还支持异步加载数据,这对于处理大量数据或者动态生成树结构特别有用。你可以通过`data-url`属性指定一个返回JSON数据的URL,当节点展开时,TreeView会自动请求数据并渲染。 总之,jQuery ...

    Jquery TreeView结合.NET用户控件的树

    在本文中,我们将深入探讨如何将Jquery TreeView与.NET用户控件相结合,构建一个功能丰富的树形视图。Jquery TreeView是一个流行的JavaScript库,它允许开发者在网页上创建可交互的、层次化的列表。而.NET用户控件则...

    Jquery TreeView 树形插件

    对于大数据量或者需要动态加载的情况,jQuery TreeView支持异步加载。你可以通过`data-url`属性指定每个节点的加载地址,当节点展开时,会自动发送请求获取子节点数据。 **7. 自定义样式与图标** `jquery.tree.css...

    jquery treeview

    1. **节点操作**:jQuery Treeview支持动态添加、删除和修改节点。你可以通过调用特定的方法来展开或折叠节点,根据需要更新树的状态。 2. **样式自定义**:它允许开发者通过CSS来定制节点的外观,包括颜色、字体、...

    bootstrap-treeview动态加载后台数据菜单

    Bootstrap Treeview是一款基于...通过这些步骤,你就可以实现一个功能完备的Bootstrap Treeview,它能够动态地从后台加载数据,并在用户交互时按需加载更多内容。这不仅提高了页面性能,也提供了良好的用户体验。

    jquery treeview async

    在“jquery treeview async”这个场景下,我们关注的是如何利用Java后端和Servlet技术来实现异步(async)加载树形菜单。这种方法能够显著提高用户体验,因为它仅在用户需要时加载数据,而不是一次性加载所有节点。 ...

    jquery.treeview的实现

    在本文中,我们将深入探讨`jQuery.treeview`的实现原理、使用方法以及如何结合提供的`demo_treeview`示例文件进行实践。 首先,`jQuery.treeview`依赖于核心的jQuery库。因此,在使用这个插件之前,需要确保你的...

    jquery treeview实例

    综上所述,jQuery Treeview实例通过Ajax与PHP后台配合,实现了动态加载数据的功能。用户界面因此能够根据需求只加载必要的数据,提高页面性能。同时,通过jQuery Treeview提供的丰富API和事件,我们可以轻松地扩展和...

    jquery.treeview.zip

    2. 初始化Treeview:在文档加载完成后,使用jQuery选择器找到要转换的列表,并调用`treeview`方法。 ```javascript $(document).ready(function() { $("#treeview").treeview(); }); ``` 四、配置选项与事件 ...

    jQuery-Treeview.js v1.4 官方版.rar

    在ASP.NET MVC框架中,jQuery Treeview.js 可以帮助构建动态的、层次化的视图。你可以在控制器中处理数据,将其转换为适合树形结构的模型,然后在视图中使用这些模型生成HTML列表。例如,你可能有一个`Category`模型...

    struts2+Jquery+json+treeview 动态加载树菜单

    标题中的“struts2+Jquery+json+treeview 动态加载树菜单”涉及的是一个Web开发中的技术组合,主要用于创建交互式的、可动态加载的数据展示界面。下面将详细解释这些技术及其在实现动态树菜单中的作用。 Struts2是...

Global site tag (gtag.js) - Google Analytics