列表树形结构显示

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问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
树形结构列表实现(RecyclerView实现)
前言   之前习惯用ListView实现列表功能,但是现在很多项目都开始使用RecyclerView,所以本次实现考虑用RecyclerView实现列表功能,顺便复习一下RecyclerView的使用方法。树形结构的实现,难点在于节点选中或展开收起时需要同时考虑父节点和子节点的展示(展开或收起子节点)和选中情况(部分选中、全部选中、未选中三种状态)。先看一下我实现的效果    当节点A勾选时,其子...
labview树形结构显示文件目录
labview树形结构显示文件目录,选择文件夹之后自动生成目录列表
列表的树形结构展示
要使列表展示如as向下钻取的效果,只有修改前端js代码,如下所示:nn首先制作列表,以一级机构名称分组,并且设置成页眉,在这里不再赘述,rs如图所示,n首先嵌入javascript代码,定义function:nn之后在机构一级名称嵌入:n‘&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){n            //获取一级菜单通过角色n            List> first = imManager.firstMod(rolecode);nn            for(Map map1 : first){n                String moduleone = (S
python数据结构-树的列表展示
列表表示        在由列表表示的树中,我们将从 Python 的列表数据结构开始,并编写上面定义的函数。虽然将接口作为一组操作在列表上编写与我们实现的其他抽象数据类型有点不同,但这样做是有趣的,因为它为我们提供了一个简单的递归数据结构,我们可以直接查看和检查。在列表树的列表中,我们将根节点的值存储为列表的第一个元素。列表的第二个元素本身将是一个表示左子树的列表。列表的第三个元素将是表示右子树...
Ext树状结构展示示例代码
以下为项目应用中的一些示例代码,供以后应用参考。rn rn一.普通树状结构展示rn rn1.前台JS代码rnccs.consultation.deptTreePanel = Ext.extend(Ext.Panel, { rntitle:'组织结构',rnlayout : 'fit',rnid:'deptTreePanel',rnheight : 312, rnborder:false,rni...
android多级树形结构列表(完整代码,可以选择某项)
多级列表是个很常见的功能,发现很多代码都不好扩展,或者由于数据结构设计不好,导致开发维护比较费时间。下面自己写了一个,github连接地址: github地址分享一波。如图所示 n n 看一下节点的代码,最重要的设计TreePointnnpublic class TreePoint {n private String ID; // 7241, //账号i...
wpf 下拉列表树状结构显示
下拉列表以树状结构显示,实用.NET的C# WPF语音结构进行编写,界面简洁,适用作为一个窗体中的下拉控件实用。
iOS 简单实现树形结构列表
#import &quot;ViewController.h&quot;nn@interface ViewController ()n&amp;lt;nUITableViewDelegate,nUITableViewDataSourcen&amp;gt;n@property(nonatomic,strong)UITableView *tableVIew;nn@property(nonatomic,strong)NSMutableAr...
贡献一个 Laravel 树形结构管理包 ClosureTable
Aboutn优雅的树形数据结构管理包,基于Closure Table模式设计.ngithub 欢迎不吝StarnFeaturesnn优雅的树形数据设计模式n数据和结构分表,操作数据不影响结构n一个Eloquent Trait操作简单n无需修改表,兼容旧数据n完善的树操作方法n支持生成树形数据n支持多棵树并存(多个根)n支持节点/树修复n支...
c#显示树形结构xml
c#显示树形结构xmlc#显示树形结构xml
树形结构,父子部门、标签等,列表显示 排序问题
1、树形结构,父子部门、标签等,列表显示 排序问题:nn存数据可存 字符串:nn父部门: &quot;001&quot;  、&quot;002&quot;、&quot;003&quot;nn子部门 : &quot;001001&quot; 、&quot;001002&quot;、&quot;002001&quot;nn根据这个字段排序 , 会自动 先排 父部门 - 父部门所有子部门,第二个父部门 - 第二个父部门所有子部门...
Android中的列表树形展示,AndroidTreeView的使用动态设置树形结构
AndroidTreeView,动态加载树形结构详解
Android 树形结构列表.rar
Android 树形结构列表
Android树形结构列表
Android树形结构列表
如何将数据库中存的树转化为树形列表(以easyui的tree为例)
代码实现 nTree 类public class Tree {n private String id;n private String text;n private String url;n private String state;n private String iconCls;n private String privilegeID;//权限IDn private
java+SpringMvc——查询数据,以树形结构显示
三省农场服务平台有一个业务是从数据库中查询信息,在界面上显示,显示的样式为树形结构,做到动态的变化,以前也实现过这样的功能,可能方法上略有不同,我们看下这个是怎么样实现的吧!rnrn    rn效果图:rnrnrnrnrn红色框中的数据是从数据库中查询出来,显示在界面上的.rnrnrn一、前台jsp页面rn    这里用的是SpringMvc,调用Actionrnrnnn n n n n
关于多层级树形结构的项目列表
这里记录一下rnrnrnpublic static List getTreeDep(List depList,Long parentId){n List mapList=new ArrayList();n for(Department department:depList){n if(department.getParentId()==parentId){n
在java中树形列表信息的查询
nn传统的查询方式nnnnnn  在IT的项目开发中,有时我们会经常遇到树形列表数据的查询等的相关操作,比如下面的情况就是如此:nnnnnn传统的查询方式nn  树形列表数据最基本的展示一共需要三个字段,分别是id,pId以及name。其中id是该条信息的主键,一般是自增的,并且不允许重复。pId是该条信息所归属的父节点的id,该pId允许重复,而顶级的节点其由于没有父节点,故其父节点字段往往以0...
页面树形结构
各路大神,怎么在页面显示树形结构,数据都是从数据库查出来的,谢谢……
QT之树形结构显示说明
一、Qt中QTreeView往往不是单一的树形结构,而是复杂的多级结构。现在以一个复杂的树形数据结构为例,说明QTreeView是怎么显示的。 n二、数据结构如图所示: n(1)虚线1号表示无效的根节点。 n(2)每个节点都有编号。 n n三、QTreeView中的显示。在同一列中的节点,如果不是同一级(有父子关系)则呈树状显示。 n n四、规律: n(1)一个节点与所有直系column为0的子孙
EXT下拉框显示树形结构源代码
EXT下拉框显示树形结构源代码EXT下拉框显示树形结构源代码
AndroidTreeView中的列表树形展示 点击弹出树形结构中的某个列表并关闭已经打开的列表
n想看详情 链接如下:https://download.csdn.net/download/sinat_28238111/10545762nnpublic class MyTestFragment extends Fragment {n private View rootView;n private ViewGroup containerView;n private Androi...
Unity3D 自定义树组件(树形菜单)
这是一个完整的Unity树形菜单项目工程,菜单可以进行折叠,点击某个节点,可以显示出所点击菜单的信息。
实现简单的树形页面显示 treeable (此树不可异步加载 局限性很大)
1.库文件 nntreeTable.min.css、jquery.treeTable.min.jsnn2.jsp 页面显示的corennn&lt;script type="text/javascript"&gt;n$(document).ready(function() {n $("#contentTable").treeTable({expandLevel : 5,column:1})...
iOS 树形结构菜单(参照以前大神写的博客)
iOS 树形结构菜单
将Json数组转换为树形结构,再生成菜单列表(待续)
n&amp;lt;script type=&quot;text/javascript&quot;&amp;gt;n /*将Json数组转换为树形结构*/n $(function(){n var list = ${functionList};n var data = transDate(list,&quot;moduleid&quot;,&quot;parentid&quot;);n n console.log(data);n n function transDate(li...
【笔记】Android使用RecyclerView实现树形列表升级版
这是一个功能多样的树形列表,树形列表最基本的功能是能够进行节点的收拢和展开,响应每一级节点的点击事件也是必须的,本篇说的是在我之前实现的树形列表1.0基础上修改完善之后的升级版树形列表。树形列表1.0具有如下功能:展开收拢;响应点击和选中事件;自定义每个节点的布局和保持的数据结构;升级版功能:展开收拢时不会改变子节点列表的状态,之前只记录了选中状态;升级版可以根据自己需要来设置选中子节点时是否也需...
查询菜单列表 封装成javaBean,并生成树形结构json字符串返回给前端
数据库设计nnnn nn实体类nnnpackage com.heeexy.example.entity;nnimport com.alibaba.fastjson.annotation.JSONField;nnimport java.util.ArrayList;nimport java.util.List;nn//菜单实体类npublic class Menu {n private Str...
IDEA中project展示树形结构
首先将项目导入到IDEA中,设置SDK,我的web项目的sdk即为设置jdk,然后点击view-&amp;gt;ToolWindows-&amp;gt;project,即可展示树形结构。
js 页面加载树形菜单结构
1.通过sql语句查询子父关系结构rrrnselect a.eventid as grouppeventid,a.groupname as groupNamernfrom (select t.eventid,rnt.groupname,rnt.grouppeventidrnfrom gps_groups trnconnect by prior t.eventid = t.grouppeventid
java递归生成树形结构菜单
一、mysql表,数据自行准备nnnCREATE TABLE `sys_menu` (n `id` int(11) NOT NULL AUTO_INCREMENT,n `pid` bigint(20) DEFAULT NULL,n `title` varchar(255) CHARACTER SET utf8 DEFAULT NULL,n `path` varchar(255) CHARA...
ext树形列表
效果nnnn页面nvar smDevCat = Ext.create('Ext.selection.CheckboxModel', { mode: 'single'});nvar gridDevCat = Ext.create('Ext.tree.Panel', {n region: 'center',n margins: '0 3 0 3',n store: stor
Android打造一个高性能无限层级显示的树形控件(Android树形控件)
最近公司的Android项目里有一个地方需要选择某公司的所有部门,因为手机屏幕有限所以并不能像网页那样显示树状结构,但是如果只是用列表依次显示所有的部门又会让用户很难找到想要找的部门(即使加上搜索功能也很难表现出层级关系),由于系统控件ExpandableListView 只能显示两级,加上数据集的组织比较麻烦,所以就使用ListView来实现如下的树形展示效果。至于为什么使用listview最大
【JavaWeb】Java列表转树形结构列表
【JavaWeb-Java列表转树形结构列表】nn表结构:nnnCREATE TABLE `test2` (n `id` varchar(32) DEFAULT NULL,n `prarentid` varchar(32) DEFAULT NULL,n `name` varchar(255) DEFAULT NULLn) ENGINE=InnoDB DEFAULT CHARSET=utf8;...
Unity树形结构
插件名称: Script Based Runtime Tree-View Control v1.1前面我有写过一篇关于unity树形结构插件的基本使用,可以动态的创建树,并且为这个树绑定方法这篇文章我们接着讨论,如何实现点击某个节点,其下所有的子孙节点全部勾选或全部不勾选我们通过CreateObject创建一个节点时,会返回一个FoldObject对象,通过这个对象的Obj就可以拿到场景面板中的该节
javaEE 部门树状结构显示以及要注意的问题
递归显示部门树状结构,部门信息树是采用双亲表示法存储的(不知道的去看数据结构)rn一:首先写个递归算法,在控制台打印一下看是否正确。rnrn(1)将顶级部门查找出来,作为参数调用递归函数;rn(2)遍历传递过来的顶级部门,先打印名称,然后递归调用(因为它的孩子又是几棵树),同时每一层调用前缀rn加一个空格。rnrn二:下面我们要在jsp界面上显示,可以将递归得到的部门树放到一个list集合中,然后
视图解决树形结构数据查询
如果是树形结构,展示在列表中,我们希望按照树形结构的排序,怎么做呢?可以使用视图。nnnnUSE [ADataBase]nGOnSET ANSI_NULLS ONnGOnSET QUOTED_IDENTIFIER ONnGOnCREATE VIEW [dbo].[VW_RP_CLASSIFY]nASnWITH temp AS (n SELECT ID, Level, IsUse, L...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 数据库课程列表 大数据课程列表