列表树形结构显示

id name content parentid
1001 电气 aaa 0
1002 土建 bbb 0
1003 电气一级节点 ccc 1001
1004 电气一级节点二 ddd 1001
1005 电气二级节点 eee 1003
1006 电气二级节点二 fff 1003
1007 土建一级节点 ggg 1002

需要在页面上以列表的形式显示:

电气        aaa      
    电气一级节点     bbb  
    电气二级节点      eee
    电气二级节点二       fff
    电气一级节点二   ccc     
土建   bbb 
    土建一级节点      ggg 

有那个兄弟帮忙解决下,先谢过!

0

6个回答

[code="java"]
function getTree(parentid,blackSpace){
//使用同步Ajax方式请求菜单数据
var conn = Ext.lib.Ajax.getConnectionObject().conn;
conn.open("POST", 'logindata.jsp?parentid='+parentid+'&date='+new Date().getTime(), false); //使用同步方式时设置第三个参数为false
conn.send(null);
var contentTable = document.getElementById("contentTable");
if (conn.status == "200"){
var json = Ext.util.JSON.decode(conn.responseText);

            if (json.length == 0){
                return;
            }
            for (var i=0; i<json.length; i++){
                var tr = contentTable.insertRow();
                var nameTd = tr.insertCell();
                var contentTd = tr.insertCell();
                nameTd.innerHTML = blackSpace+json[i].name;
                contentTd.innerHTML = blackSpace+json[i].content;
                                    getTree(json[i].id,blackSpace+"&nbsp;&nbsp;");
            }
        }else{
            showExtAlert("消息提示", "获取菜单失败,请检测网络是否畅通", Ext.MessageBox.WARNING);
        }
    }





[/code]
兄弟上面的代码可以帮你自动创建出一个树形结构,我的是用Ext中的ajax,你只需要把我ajax调用地方改为其它你用的ajax框架即可。后台数据格式可以是最好使用json格式,标准化。有数据的格式:[{id:1001,name:'电气',content:'aaa',parentid:0},{id:1002,name:'土建',content:'bbb',parentid:0}]
无数据的格式:[]
0

你将查询结果以一个list返回,然后在客户端用js来解析它。

先写一下如下的列表结构

  • 0级
    • 一级
      • 二级
      • 二级
      • 二级

这个把它搞成js数组:逗号自己补满。。。
var a = [

[1001 ,电气 ,aaa ,0 ]
[1002 ,土建 ,bbb ,0 ]
[1003 ,电气一级节点 ,ccc ,1001 ]
[1004 ,电气一级节点二 ,ddd ,1001 ]
[1005 电气二级节点 eee 1003 ]
[1006 电气二级节点二 fff 1003 ]
[1007 土建一级节点 ggg 1002]

];
然后写一个js,for循环
for(a){
a[i][4]==0,
添加到0级,然后那个li加上一个class比如说 li class="m1001"
a[i][4]!=0,添加,添加到
m+a[i][4]这个li的ul下面。也给自己加上一个class="m1003"
添加完之后将a[i]从数组里面pop扔掉。

这样循环添加直到整个数组为空

0

你再用jquery的treeview,可以直接把整个ul li转换成可以伸缩展开的树。

0

在补充一下,如用这样的方式的话,你的ajax请求方式要改为同步请求,不能使用异步请求

0

哥们,我做了一个例子,就是你这种方式的,用的是DTREE,我把地址发给你,你看看,我做的例子是AJAX做的树形目录管理,表设计和你这个是一样的
http://leonelwong.iteye.com/admin/blogs/323073

0

采用js tree 看看,

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
labview树形结构显示文件目录
labview树形结构显示文件目录,选择文件夹之后自动生成目录列表
QT之树形结构显示说明
一、Qt中QTreeView往往不是单一的树形结构,而是复杂的多级结构。现在以一个复杂的树形数据结构为例,说明QTreeView是怎么显示的。 二、数据结构如图所示: (1)虚线1号表示无效的根节点。 (2)每个节点都有编号。 三、QTreeView中的显示。在同一列中的节点,如果不是同一级(有父子关系)则呈树状显示。 四、规律: (1)一个节点与所有直系column为0的子孙
列表的树形结构展示
要使列表展示如as向下钻取的效果,只有修改前端js代码,如下所示: 首先制作列表,以一级机构名称分组,并且设置成页眉,在这里不再赘述,rs如图所示, 首先嵌入javascript代码,定义function: 之后在机构一级名称嵌入: ‘&amp;lt;img onclick=’‘ExpandCollapse(this)’’ src=’’…/ags/images/expand_plus.gif’’ st...
java动态树形菜单与分页
java的动态树形菜单,和分页的实现,源码加数据库,可直接运行。
android树形菜单,树形结构,多级展示
树形菜单,用来展示有层次结构的数据,像文件管理器,一个文件夹下面有很多文件,文件夹,可能文件夹下面还有文件还有文件夹。我们需要展示这些结构,但是安卓并没有提供一个比较方便的控件来展示,所以就需要我们自定义。博客详解:http://blog.csdn.net/wangjie1310/article/details/47026937
Java代码获取菜单列表的树形结构
public  List> menulist(String rolecode){             //获取一级菜单通过角色             List> first = imManager.firstMod(rolecode);             for(Map map1 : first){                 String moduleone = (S
python数据结构-树的列表展示
列表表示        在由列表表示的树中,我们将从 Python 的列表数据结构开始,并编写上面定义的函数。虽然将接口作为一组操作在列表上编写与我们实现的其他抽象数据类型有点不同,但这样做是有趣的,因为它为我们提供了一个简单的递归数据结构,我们可以直接查看和检查。在列表树的列表中,我们将根节点的值存储为列表的第一个元素。列表的第二个元素本身将是一个表示左子树的列表。列表的第三个元素将是表示右子树...
ListView/RecycleView与树结构实现多级目录
很久前做过一个多级ListView的多级目录结构,终于有闲时间来分享了。先看效果图吧: 常规做法  ListView为多级的显示方式,与此类似的有文件系统、省市区分级等等,类似于B树。   其数据结构一般如下可能:   A. 通过索引连接树的节点,主要特点如下:   某一点通过索引将所有点联系,类似于链表,任何两点间没有直接关系,如果要得到某个点需要算法和当前表/总表来遍历。存
wpf 下拉列表树状结构显示
下拉列表以树状结构显示,实用.NET的C# WPF语音结构进行编写,界面简洁,适用作为一个窗体中的下拉控件实用。
Ext树状结构展示示例代码
以下为项目应用中的一些示例代码,供以后应用参考。   一.普通树状结构展示   1.前台JS代码 ccs.consultation.deptTreePanel = Ext.extend(Ext.Panel, { title:'组织结构', layout : 'fit', id:'deptTreePanel', height : 312, border:false, i...
c#显示树形结构xml
c#显示树形结构xmlc#显示树形结构xml
AndroidTreeView中的列表树形展示 点击弹出树形结构中的某个列表并关闭已经打开的列表
想看详情 链接如下:https://download.csdn.net/download/sinat_28238111/10545762 public class MyTestFragment extends Fragment { private View rootView; private ViewGroup containerView; private Androi...
树形结构,父子部门、标签等,列表显示 排序问题
1、树形结构,父子部门、标签等,列表显示 排序问题: 存数据可存 字符串: 父部门: &quot;001&quot;  、&quot;002&quot;、&quot;003&quot; 子部门 : &quot;001001&quot; 、&quot;001002&quot;、&quot;002001&quot; 根据这个字段排序 , 会自动 先排 父部门 - 父部门所有子部门,第二个父部门 - 第二个父部门所有子部门...
java+SpringMvc——查询数据,以树形结构显示
三省农场服务平台有一个业务是从数据库中查询信息,在界面上显示,显示的样式为树形结构,做到动态的变化,以前也实现过这样的功能,可能方法上略有不同,我们看下这个是怎么样实现的吧!      效果图: 红色框中的数据是从数据库中查询出来,显示在界面上的. 一、前台jsp页面     这里用的是SpringMvc,调用Action
Android 树形结构列表.rar
Android 树形结构列表
Android树形结构列表
Android树形结构列表
贡献一个 Laravel 树形结构管理包 ClosureTable
About 优雅的树形数据结构管理包,基于Closure Table模式设计. github 欢迎不吝Star Features 优雅的树形数据设计模式 数据和结构分表,操作数据不影响结构 一个Eloquent Trait操作简单 无需修改表,兼容旧数据 完善的树操作方法 支持生成树形数据 支持多棵树并存(多个根) 支持节点/树修复 支...
视图解决树形结构数据查询
如果是树形结构,展示在列表中,我们希望按照树形结构的排序,怎么做呢?可以使用视图。 USE [ADataBase] GO SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE VIEW [dbo].[VW_RP_CLASSIFY] AS WITH temp AS ( SELECT ID, Level, IsUse, L...
【笔记】Android使用RecyclerView实现树形列表升级版
这是一个功能多样的树形列表,树形列表最基本的功能是能够进行节点的收拢和展开,响应每一级节点的点击事件也是必须的,本篇说的是在我之前实现的树形列表1.0基础上修改完善之后的升级版树形列表。树形列表1.0具有如下功能:展开收拢;响应点击和选中事件;自定义每个节点的布局和保持的数据结构;升级版功能:展开收拢时不会改变子节点列表的状态,之前只记录了选中状态;升级版可以根据自己需要来设置选中子节点时是否也需...
【记录】使用BootStrapTable构造树形结构
需求:原使用 BootStrapTable 生成表格,现在需要形成树形结构,即有上下级,类似菜单的样式 测试版本,后面的列已省略 源码: &lt;!DOCTYPE HTML&gt; &lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-U...
在java中树形列表信息的查询
传统的查询方式   在IT的项目开发中,有时我们会经常遇到树形列表数据的查询等的相关操作,比如下面的情况就是如此: 传统的查询方式   树形列表数据最基本的展示一共需要三个字段,分别是id,pId以及name。其中id是该条信息的主键,一般是自增的,并且不允许重复。pId是该条信息所归属的父节点的id,该pId允许重复,而顶级的节点其由于没有父节点,故其父节点字段往往以0...
页面树形结构
各路大神,怎么在页面显示树形结构,数据都是从数据库查出来的,谢谢……
html结合js实现简单的树状目录
最近在学jsp,期末了要做项目,需要用到树状目录,百度了很多,都没有找到想要的答案,最后自己折腾了半天,才搞定。下面我就来分享一下怎么实现一个简单的树状目录:1. 下载jquery-treeview插件:github 百度云2. 解压刚才下载的压缩包,并将images文件夹的中gif复制到项目中的图片管理文件夹中,如下图: 当然复制到什么地方是你自己选择3. 然后将jquery.
如何将数据库中存的树转化为树形列表(以easyui的tree为例)
代码实现 Tree 类public class Tree { private String id; private String text; private String url; private String state; private String iconCls; private String privilegeID;//权限ID private
android多级树形结构列表(完整代码,可以选择某项)
多级列表是个很常见的功能,发现很多代码都不好扩展,或者由于数据结构设计不好,导致开发维护比较费时间。下面自己写了一个,github连接地址: github地址分享一波。如图所示 看一下节点的代码,最重要的设计TreePoint public class TreePoint { private String ID; // 7241, //账号i...
树形结构列表实现(RecyclerView实现)
前言   之前习惯用ListView实现列表功能,但是现在很多项目都开始使用RecyclerView,所以本次实现考虑用RecyclerView实现列表功能,顺便复习一下RecyclerView的使用方法。树形结构的实现,难点在于节点选中或展开收起时需要同时考虑父节点和子节点的展示(展开或收起子节点)和选中情况(部分选中、全部选中、未选中三种状态)。先看一下我实现的效果    当节点A勾选时,其子...
【JavaWeb】Java列表转树形结构列表
【JavaWeb-Java列表转树形结构列表】 表结构: CREATE TABLE `test2` ( `id` varchar(32) DEFAULT NULL, `prarentid` varchar(32) DEFAULT NULL, `name` varchar(255) DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8;...
EXT下拉框显示树形结构源代码
EXT下拉框显示树形结构源代码EXT下拉框显示树形结构源代码
js 页面加载树形菜单结构
1.通过sql语句查询子父关系结构 select a.eventid as grouppeventid,a.groupname as groupName from (select t.eventid, t.groupname, t.grouppeventid from gps_groups t connect by prior t.eventid = t.grouppeventid
java 将查询结果集转为树形结构
在需要使用树形菜单的时候,z-tree是可以直接传数据父级id 对应子集pid自动生成树形结构,但z-tree这个框架毕竟年级较大了大家都知道年纪大的人都长得丑毕竟像我这么年轻才能天下第一帅,在使用很多树形控件时候需要的数据格式是固定的也就是子集需要在父级的一个集合属性里。(好了,可能是我们的前端太菜了不会写,非逼着我转结构) 比如 这样就需要我们在后台将数据处理成指定格式在转成json了...
Android中的列表树形展示,AndroidTreeView的使用动态设置树形结构
AndroidTreeView,动态加载树形结构详解
实现简单的树形页面显示 treeable (此树不可异步加载 局限性很大)
1.库文件 treeTable.min.css、jquery.treeTable.min.js 2.jsp 页面显示的core &lt;script type="text/javascript"&gt; $(document).ready(function() { $("#contentTable").treeTable({expandLevel : 5,column:1})...
Android-listview实现多级树列表(文件夹目录结构和企业级通讯录结构)
企业级的通讯录,我们把企业级的通讯录做成多级树结构,并且做到分步加载。使用listview,实现单选、多选、侧滑等情况下的通讯录。
iOS 树形结构菜单(参照以前大神写的博客)
iOS 树形结构菜单
iOS 简单实现树形结构列表
#import &quot;ViewController.h&quot; @interface ViewController () &amp;lt; UITableViewDelegate, UITableViewDataSource &amp;gt; @property(nonatomic,strong)UITableView *tableVIew; @property(nonatomic,strong)NSMutableAr...
将Json数组转换为树形结构,再生成菜单列表(待续)
&amp;lt;script type=&quot;text/javascript&quot;&amp;gt; /*将Json数组转换为树形结构*/ $(function(){ var list = ${functionList}; var data = transDate(list,&quot;moduleid&quot;,&quot;parentid&quot;); console.log(data); function transDate(li...
TreeTableJava实现树形结构表格
treeTable是跨浏览器、性能很高的jquery的树表组件,它使用非常简单,只需要引用jquery库和一个js文件,接口也很简单。 优点 兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari 接口简洁: 在普通表格的基础上增加父子关系的自定义标签就可以 组件性能高: 内部实现了只绑定了table的事件、使用了css sprite合并图片等 提供两种风格: 通过参数来设置风格
Android打造一个高性能无限层级显示的树形控件(Android树形控件)
最近公司的Android项目里有一个地方需要选择某公司的所有部门,因为手机屏幕有限所以并不能像网页那样显示树状结构,但是如果只是用列表依次显示所有的部门又会让用户很难找到想要找的部门(即使加上搜索功能也很难表现出层级关系),由于系统控件ExpandableListView 只能显示两级,加上数据集的组织比较麻烦,所以就使用ListView来实现如下的树形展示效果。至于为什么使用listview最大
基于RecyclerView的树形结构
基于RecyclerView的树形结构一、使用方式Usage二、设计理念三、代码解析 一、使用方式Usage 实现效果 演示代码 导入相关模块 andnext_recyclerview基于RecyclerView的封装,包含了本文中的树形实现; andnext_overscrollRecyclerView的OverScroll依赖; andnext_java部分代码依赖于JavaSE; ...
Extjs下拉列表树形图
//点击用户新增 new Ext.Button({ text:'新增用户', id:'addUser', icon:'../../image/user_add.png', cls:'x-btn-text-icon', handler:function(){ ...