列表树形结构显示

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 

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

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}]
无数据的格式:[]

你将查询结果以一个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扔掉。

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

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

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

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

采用js tree 看看,

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
列表的树形结构展示
要使列表展示如as向下钻取的效果,只有修改前端js代码,如下所示: 首先制作列表,以一级机构名称分组,并且设置成页眉,在这里不再赘述,rs如图所示, 首先嵌入javascript代码,定义function: 之后在机构一级名称嵌入: ‘&amp;lt;img onclick=’‘ExpandCollapse(this)’’ src=’’…/ags/images/expand_plus.gif’’ st...
iOS 简单实现树形结构列表
#import &quot;ViewController.h&quot; @interface ViewController () &amp;lt; UITableViewDelegate, UITableViewDataSource &amp;gt; @property(nonatomic,strong)UITableView *tableVIew; @property(nonatomic,strong)NSMutableAr...
asp.net树形结构列表
完整的asp.net树形结构实现源码,能运行
Android 树形结构列表.rar
Android 树形结构列表
Android树形结构列表
Android树形结构列表
树形结构显示
可以根据自己的需求,修改相应的js代码,实现树形结构的展示,例如菜单栏的显示
【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;...
Java代码获取菜单列表的树形结构
public  List> menulist(String rolecode){             //获取一级菜单通过角色             List> first = imManager.firstMod(rolecode);             for(Map map1 : first){                 String moduleone = (S
树形结构列表实现(RecyclerView实现)
前言   之前习惯用ListView实现列表功能,但是现在很多项目都开始使用RecyclerView,所以本次实现考虑用RecyclerView实现列表功能,顺便复习一下RecyclerView的使用方法。树形结构的实现,难点在于节点选中或展开收起时需要同时考虑父节点和子节点的展示(展开或收起子节点)和选中情况(部分选中、全部选中、未选中三种状态)。先看一下我实现的效果    当节点A勾选时,其子...
用javascript实现树形结构列表
只是用javascript输出页面样式的,数据获取都交给其他语言去完成.请高手给指点一下吧.
网页树形结构的列表菜单源代码
网页树形结构的列表菜单源代码,对于初学者可以根据这个来学习如何用树形结构来制作列表菜单。希望你能够举一反三。
树形结构数据库设计和显示
树形结构数据库设计,和java获取json到前台显示。
Android 多级树形结构显示
1.项目截图实体类1MyNodeBeanpublic class MyNodeBean {    private String ids;    private String pIds;    /**     * 节点Id     */    private int id;    /**     * 节点父id     */    private int pId;    /**     * 节点na...
labview树形结构显示文件目录
labview树形结构显示文件目录,选择文件夹之后自动生成目录列表
Winform的comboBox显示树形结构
如图,[img=http://img.my.csdn.net/uploads/201209/11/1347339250_7033.jpg][/img]rn然后才能用comboBox显示出树形结构?可以给个例子吗?rnrn数据库建表如下,rn[img=http://img.my.csdn.net/uploads/201209/11/1347339250_5456.jpg][/img]
php树形结构显示
数组array(array(7,5),array(7,6,1),array(7,6,2,3,5),array(7,6,2,3,6))rn在前端想显示成树形[img=https://img-bbs.csdn.net/upload/201501/20/1421742969_875878.jpg][/img],请问如何处理?
动态树形结构显示
数据库表结构:rnid --唯一标识一个节点rnname --节点名称rnparentid --父节点idrngrade --几级节点,如;1表示跟节点rnrnrn怎么根据这个表结构显示一个树形结构?rnrn方法不限。
树形结构显示插件zTree_v3-3.5.28
树形结构显示插件zTree_v3-3.5.28的用法十分简单,只需要在前端页面中包含相关的js包和css样式包与jQuery包即可。其中还包含中文的说明文档,可以参考。
idea目录树形结构显示
点两下,将图中所示的勾去掉,再次点击齿轮,显示为下图中的即可
【easyui】treeGrid显示树形结构
返回数据结构:var data = [{"id":1,"name":"name1","pid":null},{"id":2,"name":"name2","pid":1}]列表初始化function initDataGrid() { treeGrid = $('#treeGrid').treegrid({ idField : 'id',
树形结构的显示问题?
先谢谢大家了.rnrn有一个表,两个字段ID和PID.PID为本记录的父ID,PID为0的表示没有父ID.rnrn比如记录如下:rnrnID | PIDrnrn1 | 0rn2 | 1rn3 | 1rn4 | 2rnrn要求显示的时候,能体现他们之间的关系:rnrn1-|---2----4rn |---3rnrn应该如何写程序,谢谢大家!
怎么样显示树形结构?
有一表,结构如下rn Arn |rn ------------------rn | |rn B Crn |rn --------rn | |rn D E rn即: item_no componet parentcomp lelelrn A B A 1rn A C A 1rn A D C 2rn A E C 2rn要做成象WINDOWS 的资源管理器一样的样子,怎么做啊? 就是要可以展开和折叠,多谢了。rnrn
vue递归显示树形结构
我需要实现一个评论回复功能,任何人可以回复 (评论和评论的回复),如下图: 在递归显示回复的时候我遇到了问题,我需要在显示每一条回复的时候判断它是否有子回复 用vue实现评论的渲染,评论数据如下: data:{ commentList:[ { &quot;Id&quot;:&quot;1&quot;,...
xml文件以树形结构显示
将xml文档的各节点以及属性用树形控件显示,属性显示在文本框中
树形结构数据显示函数
测试表:fmenurnrn字段menuid int ,menuname varchar(50),parentmenu int rn分别为 菜单编号 ,名称,上级编号rn数据:rn1 系统 0rn2 管理系统 1rn3 财务 2rn4 分销 2rn5 组织 1rn6 公司 5 rnrn实现显示结构有:rn 系统rn 管理系统rn 财务rn 分销rn 组织rn 公司rnrn即数据结构! rn
java显示树形结构
+---------+-----------+------+------------+-------------------------------+---------+rn| ID | ICONCLS | SEQ | TEXT | URL | PID |rn+---------+-----------+------+------------+-------------------------------+---------+rn| 0 | icon-tip | 1 | 首页 | | NULL |rn| buggl | NULL | 5 | BUG管理 | /admin/buggl.jsp | xtgl |rn| cdgl | NULL | 4 | 菜单管理 | /admin/cdgl.jsp | xtgl |rn| druidgl | NULL | 2 | 连接池管理 | | 0 |rn| druidjk | icon-tip | 1 | 连接池监控 | /druidController/druid.action | druidgl |rn| jsgl | NULL | 2 | 角色管理 | /admin/jsgl.jsp | xtgl |rn| xtgl | icon-sum | 1 | 系统管理 | | 0 |rn| yhgl | icon-back | 1 | 用户管理 | /admin/yhgl.jsp | xtgl |rn| zygl | NULL | 3 | 资源管理 | /admin/zygl.jsp | xtgl |rn+---------+-----------+------+------------+-------------------------------+---------+rnrn现有如下表 请教如何按照树形结构显示在页面上 我用的jquery easyUI rnrnpublic List treegrid(String pid) throws Exception rn rn StringBuffer hql = new StringBuffer();rn hql.append(" from TMenu t where 1=1 and t.pid is null order by t.seq ");rn if(pid!=null && !pid.trim().equals(""))rn rn hql.delete(0, hql.length());rn hql.append(" from TMenu t where t.pid = '"+pid+"' order by t.seq ");rn rn List menuList = base.query(hql.toString());rn List meList = new ArrayList();rn for(int i=0;i m = new ArrayList();rn m.addAll(menuList);rn meList = IteratorTree(mm,m);rn rn menuList.add(meList);rn return meList;rn rnrnrn public List IteratorTree(TMenu tmenu,List menuList)rn rn try rn StringBuffer hql = new StringBuffer();rn hql.append(" from TMenu t where t.pid ='"+tmenu.getId()+"' ");rn List mlist = base.query(hql.toString());rn rn for(TMenu menu:mlist)rn rn if(menu.getPid()!= null)rn rn menuList.add(menu);rn IteratorTree(menu,menuList);rn rn rn rn return menuList;rn catch (Exception e) rn e.printStackTrace();rn rn return null;rn rnrnrnrnpublic class TMenu implements java.io.Serializable rnrn // Fieldsrnrn /**rn * rn */rn private static final long serialVersionUID = -6235504400109707818L;rn rn @Idrn @Column(name = "ID")rn @GeneratedValue(strategy = GenerationType.AUTO)rn private String id;rnrn @Column(name = "ICONCLS")rn private String iconcls;rnrn @Column(name = "SEQ")rn private int seq;rnrn @Column(name = "TEXT")rn private String text;rnrn @Column(name = "URL")rn private String url;rnrn @Column(name = "PID")rn private String pid;rn ················rnrnrn以上是我的方法 但是只是全部查询出来 没有按树显示
c#显示树形结构xml
c#显示树形结构xmlc#显示树形结构xml
QT之树形结构显示说明
一、Qt中QTreeView往往不是单一的树形结构,而是复杂的多级结构。现在以一个复杂的树形数据结构为例,说明QTreeView是怎么显示的。 二、数据结构如图所示: (1)虚线1号表示无效的根节点。 (2)每个节点都有编号。 三、QTreeView中的显示。在同一列中的节点,如果不是同一级(有父子关系)则呈树状显示。 四、规律: (1)一个节点与所有直系column为0的子孙
bootstrap的table列表,怎么让某一列显示树形结构??
显示一个【人员】的列表页面 , 有一列是【科室】列 , 怎么让【科室】列用树形结构显示???rn[img=https://img-bbs.csdn.net/upload/201705/24/1495586445_824103.png][/img]
基于z-tree树形结构的多级下拉选择列表
最近项目需要一个基于树形结构的多选下拉列表的功能,,网上搜了搜也没发现有啥好的,,,一生气决定自己搞一个。。。。。。 首先,树形的结构是用的zTree,,所以项目需要引入ztree的相关脚本,下图是这个插件的目录结构  下图是引入的相关脚本和样式:   &amp;lt;script type=&quot;text/javascript&quot; src=&quot;&amp;lt;%=request.getContextPat...
c#显示SHAREPOINT网站的树形结构
c#显示SHAREPOINT网站的树形结构,程序非常稳定,而且功能很强大。多线程操作,效率很高。在SPSITE,SPWEB,SPLIST,SPLISTITEM级别都可以进行添加、删除和查询的操作,全部使用SharePoint API操作。是很适合SharePoint API初学者的程序
java-根据过滤条件显示树形结构
java根据过滤条件显示树形结构,其中包括所需要的jar包
JSP在页面显示一个树形结构。
想从数据库取出数据,然后在网页上显示成一个属性结构的图,不知道JSP怎么实现。rn有没有现成的空间什么的。rnrn大概效果是这样:rn---------------------rn -浙江rn -杭州市rn +xx村rn +xx村rn +温州市rn +丽水市rn +福建rn +xx市rn +xx市rn +安徽rn-----------------------rn谢谢大家rn最好有现成的代码发来供研究下
关于多层级树形结构的项目列表
这里记录一下 public static List getTreeDep(List depList,Long parentId){ List mapList=new ArrayList(); for(Department department:depList){ if(department.getParentId()==parentId){
DataGridView以树形结构显示数据
示例:我上传的公文为父级、附件为子级rn 在DataGridView中以树形列表显示其详细信息.rn 高手指点。。
EXT下拉框显示树形结构源代码
EXT下拉框显示树形结构源代码EXT下拉框显示树形结构源代码
求助!!! ext+ssh2实现树形结构显示
问题描述:rn 遇到了一个问题,想用ext+ssh2实现树形结构的显示。树形结构的节点是一个模块实体类,模块下面可能有子模块实体类或者操作实体类,这样我前台传入一个模块ID,就将这个模块ID对应的树形结构显示出来。rnrn 模块1rn --子模块1rn --操作1rn --操作2rn --子模块1rn --子模块2rn --子模块1rn --操作1rn --···rnrn最好给出思路和代码实现!谢谢!!!
树形结构菜单,节点显示问题
需求:rn不显示没有记录的菜单节点。rn子节点无记录,子节点隐藏。rn父节点下的子节点,孙节点都没有记录,父节点和子、孙节点都隐藏。rnrn解决这个问题,可以从两个方向考虑rn1.调取菜单时rn2.向菜单节点写入记录时rnrn第一种如果使用了缓存,性能问题可以控制rn第二种给节点加个持久化的状态标记,写入记录时,设置标记,我这里想到一个思路,采用第二种,这样在写入记录时设置了一个规则:“插入删除记录时,必须设置所属菜单的状态”rn代码如下:rn public interface IMenu1rn rn int Add(Menu1 t);rn rnrn public abstract class BaseMenurn rn public int Add(T t)rn rn var result = this.Insert(t);rn //设置父节点为显示rn //T是记录对象,这里只能考虑用反射对应 T 的 父节点对象,或者每个抽象类只对应一个同类型的派生类rn return result;rn rn protected abstract int Insert(T t);rn rnrn public class Menu1 : BaseMenu, IMenu1rn rn protected override int Insert(T t)rn rn //调用仓储写入记录rn return 0;rn rn rnrn欢迎大家提意见了
java+SpringMvc——查询数据,以树形结构显示
三省农场服务平台有一个业务是从数据库中查询信息,在界面上显示,显示的样式为树形结构,做到动态的变化,以前也实现过这样的功能,可能方法上略有不同,我们看下这个是怎么样实现的吧!      效果图: 红色框中的数据是从数据库中查询出来,显示在界面上的. 一、前台jsp页面     这里用的是SpringMvc,调用Action
oracle sql语句 显示树形结构
有三张表 rnrn表名:grand_fatherrn表结构:grand_father_id grand_grand_father_id rnrn表名:fatherrn表结构:father_id grand_father_id rnrn表名:sonrn表结构:son_id father_id rnrn如何把这个树形结构放到一张表中,用select * from就可以查询的rn注意:grand_grand_father_id有可能等于grand_father_idrn我自己用connect by写了半天都没写出来,太有挑战性了
相关热词 c# login 居中 c# 考试软件 c# 自然语言分析 c# 分段读取文件 c# 泛型反射 c#打断点 c# 时间转多少秒 c# 线程函数加参数 c# modbus 读取 c#查询集合表