本文共 1311 字，大约阅读时间需要 4 分钟。

我实现的树结构使用的是Jquery中的Ztree技术。不同技术不同对待

首先看一下完整的html代码

    
           
       
               
   
   
    
    
        
     
文章栏目
        
     
    
    
   

讲解一下，首先写一个ul标签，id的值自定义

然后在script标签中写

//首先还要定义一个变量，与下面保持一致var zTreeObj; $(document).ready(function(){        $.post(            "/api/getSysColumnAll",  	//接口请求路径            function(data){                console.log(data)                zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, data);                zTreeObj.expandAll(true);            }        )    });

注意 $.fn.zTree.init($("#treeDemo"), setting, data);

var setting = {        callback: {            onClick: zTreeOnClick        },        data: {            key: {                name:"columnName"		//实体类中的属性名            },            simpleData: {                //enable:true   采用简单数据模式 (Array)                enable: true,                idKey: "id",		//二级id	                pIdKey: "parentId",	//一级id(父id)                rootPId: 0          //父id的值            }        }    };

具体有的内容我已经在代码中讲解，请大家仔细观看代码。 大家还应当在head标签中引入如下jquery库 和 css样式

这几个文件没办法放在博客中，大家可以加群进行索取。

下面说一下后端的代码，其实后端的代码更加简单，就是一个查询所有的功能返回给前端即可，前端会自动进行树结构的展示。

转载地址：http://lzoai.baihongyu.com/