javascript树形总结

最新推荐文章于 2021-01-20 14:55:36 发布

zhyp29

最新推荐文章于 2021-01-20 14:55:36 发布

阅读量151

点赞数

分类专栏： javascript 文章标签： json java xhtml

本文链接：https://blog.csdn.net/zhyp29/article/details/84803611

版权

javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

给个例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
body{ font-size: 12px;}
h2,h3{ margin: 0;}
ul{ margin: 0; padding: 0; list-style: none; }
#outer_wrap li{ padding-left: 30px; line-height: 24px;}
.controlSymbol{ padding: 0 5px; border: 1px solid #adff2f; cursor: pointer;}
</style>
</head>
<body>
<ul id="outer_wrap">
<li>
<h2>标题1</h2>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>
<h3>标题1_1</h3>
<ul>
<li>内容1_1</li>
<li>内容1_2</li>
<li>内容1_3</li>
<li>内容1_4</li>
</ul>
</li>
<li>
<h3>标题1_2</h3>
<ul>
<li>内容1_1</li>
<li>内容1_2</li>
<li>内容1_3</li>
<li>内容1_4</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

然后添加事件：

var innerText = document.innerText ? 'innerText' : 'textContent';
var span = document.createElement('span');
span[innerText] = '-';
span.className = 'controlSymbol';

function $(id){
return document.getElementById(id);
}
function $_(){
var args = arguments;
var ret = [];
for(var i = 0; i < args.length; i++){
var temp = document.getElementsByTagName(args[i]);
try{
ret = ret.concat(Array.prototype.slice.call(temp,0));
}catch(e){
for(var j = 0; j < temp.length; j++){
ret.push(temp[j]);
}
}
}
return ret;
}
function addSymbol(h){
var innerSpan = span.cloneNode(true);
h.insertBefore(innerSpan,h.firstChild);
}
function next(el){
while(el.nextSibling){
if(el.nextSibling.nodeType == 1){
return el.nextSibling;
}
el = el.nextSibling;
}
return null;
}
var outerWrap = $('outer_wrap');
var hs = $_('h2','h3');
for(var i = 0 ; i < hs.length; i++){
addSymbol(hs[i]);
}
outerWrap.onclick = function(event){
event = event || window.event;
var t = event.target || event.srcElement;
if(t.className == 'controlSymbol'){
var sn = next(t.parentNode);
var snStyle = next(t.parentNode).style;
snStyle.display = (snStyle.display == 'block' || snStyle.display == '') ? 'none' : 'block';
t[innerText] = t[innerText] == '+' ? '-':'+';
}
}

不过用的多的可能是动态的添加菜单，也就是动态的生成HTML序列。

一个例子：

var tree = {
'标题2':[
'内容1',
'内容2',
'内容3',
'内容4',
{'标题2_1':['内容2_1','内容2_2','内容2_3','内容2_4']},
{'标题2_2':['内容2_1','内容2_2','内容2_3','内容2_4']},
'内容5'
]
}
var fragment = document.createElement('ul');
function concatTree(tree){
var array = [];
for(var key in tree){
array.push('<li><h3>');
array.push(key);
array.push('</h3><ul>');
for(var i = 0; i < tree[key].length; i++){
if(tree[key][i].constructor == Object){
array = array.concat(concatTree(tree[key][i]));
}else{
array.push('<li>');
array.push(tree[key][i]);
array.push('</li>');
}
}
array.push('</ul></li>');
}
return array;
}
fragment.innerHTML = concatTree(tree).join('');
$('outer_wrap').appendChild(fragment.firstChild);

像上面的方法也可以用来生成表格，扯远了，比如

var oArray = {
thead : ['标题一','标题二','标题三','标题四'],
tbody : [
[1,2,3,4],
[5,6,7,8],
[9,10,11,12],
[13,14,15,16],
[17,18,19,20],
[21,22,23,24]
],
tfoot : [25,26,27,28]
}
function createTable(arr){
var html = [];
html.push('<table>');
for(var key in arr){
html.push('<'+key + '>');
if(key == 'thead'){
assemTag(arr[key],html,'th')
}else if(key == 'tfoot'){
assemTag(arr[key],html,'td')
}else if(key == 'tbody'){
for(var k = 0, len_1 = arr[key].length; k < len_1; k++){
assemTag(arr[key][k],html,'td')
}
}
html.push('</'+key + '>');
}
html.push('</table>');
var temp = document.createElement('div');
temp.innerHTML = html.join('');
return temp.firstChild;
}
function assemTag(array,html,tag){
html.push('<tr>');
var s = '<' + tag + '>';
var e = '</' + tag + '>';
for(var j = 0, len = array.length; j < len; j++){
html.push(s);
html.push(array[j]);
html.push(e);
}
html.push('</tr>');
}
document.body.appendChild(createTable(oArray));

一般可以直接创建一个节点元素，然后直接设置innerHTML，不过innerHTML虽说是IE先搞起的，但是IE又最不彻底，对于table和tr是不可设置innerHTML的（只读），所以只能假div之手了。

于是打算自己尝试弄个简单的树形菜单。在这过程中，我发现: 对于一棵简单的树形菜单，4行代码足矣。
html代码的编写，直接采用了ul-li的嵌套方式。主要的javascript代码如下：
1 $(".menu ul").css("display","none");2 $(".menu a").on("click", function(){3 $(this).next().toggle();4 });
原理很简单：
1. 初始化时，把ul隐藏。
2. 点击菜单时，切换它下面的ul显示或隐藏。
具体和效果如下图：

完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>menu tree</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>

<ul class="menu">
<li> <a href="#">A1</a>
<ul>
<li><a href="#">A1-1</a></li>
<li><a href="#">A1-2</a></li>
<li> <a href="#">A1-3</a>
<ul>
<li><a href="#">A1-3-1</a></li>
<li><a href="#">A1-3-2</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">A2</a>
<ul>
<li><a href="#">A2-1</a></li>
<li><a href="#">A2-2</a></li>
</ul>
</li>

<li><a href="#">A3</a></li>
</ul>
<body>
<script type="text/javascript" src="loginFile/jquery.js">
</script>
<script type="text/javascript"> $(document).ready(function(){ $(".menu ul").css("display","none"); $(".menu a").on("click", function(){ $(this).next().toggle(); }); });
</script>
</body>
</html>

js中：
var zNodes=[
{id:0,pId:-1,name:"Aaaa"},
{id:1,pId:0,name:"A"},
{id:11,pId:1,name:"A1"},
{id:12,pId:1,name:"A2"},
{id:13,pId:1,name:"A3"},
{id:2,pId:0,name:"B"},
{id:21,pId:2,name:"B1"},
{id:22,pId:2,name:"B2"},
{id:23,pId:2,name:"B3"},
{id:3,pId:0,name:"C"},
{id:31,pId:3,name:"C1"},
{id:32,pId:3,name:"C2"},
{id:33,pId:3,name:"C3"},
{id:34,pId:31,name:"x"},
{id:35,pId:31,name:"y"},
{id:36,pId:31,name:"z"},
{id:37,pId:36,name:"z1123"} ,
{id:38,pId:37,name:"z123123123"}
];
function treeMenu(a){
this.tree=a||[];
this.groups={};
};
treeMenu.prototype={
init:function(pid){
this.group();
return this.getDom(this.groups[pid]);
},
group:function(){
for(var i=0;i<this.tree.length;i++){
if(this.groups[this.tree[i].pId]){
this.groups[this.tree[i].pId].push(this.tree[i]);
}else{
this.groups[this.tree[i].pId]=[];
this.groups[this.tree[i].pId].push(this.tree[i]);
}
}
},
getDom:function(a){
if(!a){return ''}
var html='\n<ul >\n';
for(var i=0;i<a.length;i++){
html+='<li><a href="#">'+a[i].name+'</a>';
html+=this.getDom(this.groups[a[i].id]);
html+='</li>\n';
};
html+='</ul>\n';
return html;
}
};
var html=new treeMenu(zNodes).init(0);
alert(html);

/**
* json格式转树状结构
* @param {json} json数据
* @param {String} id的字符串
* @param {String} 父id的字符串
* @param {String} children的字符串
* @return {Array} 数组
*/
function transData(a, idStr, pidStr, chindrenStr){
var r = [], hash = {}, id = idStr, pid = pidStr, children = chindrenStr, i = 0, j = 0, len = a.length;
for(; i < len; i++){
hash[a[i][id]] = a[i];
}
for(; j < len; j++){
var aVal = a[j], hashVP = hash[aVal[pid]];
if(hashVP){
!hashVP[children] && (hashVP[children] = []);
hashVP[children].push(aVal);
}else{
r.push(aVal);
}
}
return r;
}

var jsonData = eval('[
{"id":"4","pid":"1","name":"大家电"},
{"id":"5","pid":"1","name":"生活电器"},
{"id":"1","pid":"0","name":"家用电器"},
{"id":"2","pid":"0","name":"服饰"},
{"id":"3","pid":"0","name":"化妆"},
{"id":"7","pid":"4","name":"空调"},
{"id":"8","pid":"4","name":"冰箱"},
{"id":"9","pid":"4","name":"洗衣机"},
{"id":"10","pid":"4","name":"热水器"},
{"id":"11","pid":"3","name":"面部护理"},
{"id":"12","pid":"3","name":"口腔护理"},
{"id":"13","pid":"2","name":"男装"},
{"id":"14","pid":"2","name":"女装"},
{"id":"15","pid":"7","name":"海尔空调"},
{"id":"16","pid":"7","name":"美的空调"},
{"id":"19","pid":"5","name":"加湿器"},
{"id":"20","pid":"5","name":"电熨斗"}
]');

var jsonDataTree = transData(jsonData, 'id', 'pid', 'chindren');
console.log(jsonDataTree);
//结果如下：
[
{"id":"1","pid":"0","name":"家用电器", "chindren":[
{"id":"4","pid":"1","name":"大家电", "chindren":[
{"id":"7","pid":"4","name":"空调", "chindren":[
{"id":"15","pid":"7","name":"海尔空调"},
{"id":"16","pid":"7","name":"美的空调"}
]},
{"id":"8","pid":"4","name":"冰箱"},
{"id":"9","pid":"4","name":"洗衣机"},
{"id":"10","pid":"4","name":"热水器"}
]},
{"id":"5","pid":"1","name":"生活电器","chindren":[
{"id":"19","pid":"5","name":"加湿器"},
{"id":"20","pid":"5","name":"电熨斗"}
]}
]},
{"id":"2","pid":"0","name":"服饰","chindren":[
{"id":"13","pid":"2","name":"男装"},
{"id":"14","pid":"2","name":"女装"}
]},
{"id":"3","pid":"0","name":"化妆","chindren":[
{"id":"11","pid":"3","name":"面部护理"},
{"id":"12","pid":"3","name":"口腔护理"}
]}
]

如何用JS实现下拉框中的值树形展示

博客分类： .NET
J#
主要的思路：
将全部记录读出，在后台重组读出的Datatable，用JS绑定。
示例：
js代码
Java代码
//设置用户控件中的存放附件的文件路径的下拉框中的值
SubModule_PMS_ProjTask_TaskAdd.SetUploadPath(proname.value,0,SetUploadPathDll);

c#后台代码
Java代码
#region 设置附件存放位置的下拉框中的值 add by shirlly 20100112
    [AjaxPro.AjaxMethod]
    public DataTable SetUploadPath(string str, int pProjFolderID)
    {
        DataSet ds = null;
        if (!Equals("", str))
        {
            int projectID = Int32.Parse(str);
            SMSIPMS.BLL.PMS_ProjFolderInfo ProFolderBll = new SMSIPMS.BLL.PMS_ProjFolderInfo();
            ds = ProFolderBll.GetList(" ProjectID=" + projectID);
            DataTable inDatatable = ds.Tables[0];
            DataTable outDatatable = new DataTable();
            outDatatable.Columns.Add("ProjFolderID", typeof(System.Int32));
            outDatatable.Columns.Add("ProjFolderName", typeof(System.String));
            PMS.PMSCommon.addProFoloderOtherDll("", 0, inDatatable, 1, ref outDatatable);
            return outDatatable;
        }
        else
        {
            return null;
        }

    }
    #endregion

主要展示树形的代码：
Java代码
#region 构造树形结构的DataTable  add by shirlly 20100113
        /// <summary>
        /// 构造树形结构的DataTable
        /// </summary>
        /// <param name="Pading"></param>
        /// <param name="DirId"></param>
        /// <param name="inDatatable">构造之前的DataTable</param>
        /// <param name="deep"></param>
        /// <param name="outDatatable">构造之后的DataTable</param>
        public static void addProFoloderOtherDll(string Pading, int DirId, DataTable inDatatable, int deep, ref DataTable outDatatable)
        {
            DataRow[] rowlist = inDatatable.Select("PProjFolderID='" + DirId + "'");
            foreach (DataRow row in rowlist)
            {
                string strPading = "";
                for (int j = 0; j < deep; j++)
                {
                    strPading += "　";         //用全角的空格
                }
                //添加节点
                string Note = strPading + "|--" + row["ProjFolderName"].ToString();
                DataRow dr = outDatatable.NewRow();
                dr[0] = row["ProjFolderID"].ToString();
                dr[1] = Note;
                outDatatable.Rows.Add(dr);

                //递归调用addOtherDll函数，在函数中把deep加1
                addProFoloderOtherDll(strPading, Convert.ToInt32(row["ProjFolderID"].ToString()), inDatatable, deep + 1, ref outDatatable);
            }
        }
        #endregion

JS代码：
Java代码
//设置用户控件的下拉框中的值
        function SetUploadPathDll(response)
        {
            var dt = response.value;
            document.getElementById("MyUpdateFile_dropFileClass").options.length = 0; //通过用户控件ID+用户控件中想获得控件的ID
            var UploadPathDll = document.getElementById("MyUpdateFile_dropFileClass");
            UploadPathDll.options.add(new Option("--请选择--", ""));
            if (dt != null)
            {
                for (var i = 0; i < dt.Rows.length; i++)
                {
                    var UploadPathDll_text = dt.Rows[i]["ProjFolderName"];
                    var UploadPathDll_value = dt.Rows[i]["ProjFolderID"];
                    UploadPathDll.options.add(new Option(UploadPathDll_text, UploadPathDll_value));
                }
            }
        }

比如这样一段json

{
"name":"1级菜单1",
"link":"###",
"isleaf": false,
"level": 0,
"children": [
{
"name":"2级菜单1",
"link":"###",
"isleaf": false,
"level": 1,
"children": [
{
"name":"3级菜单1",
"link":"###",
"isleaf": true,
"level": 2,
"children": null
},
{
"name":"3级菜单2",
"link":"###",
"isleaf": true,
"level": 2,
"children": null
}
]
},
{
"name":"2级菜单2",
"link":"###",
"isleaf": false,
"level": 1,
"children": [
{
"name":"3级菜单3",
"link":"###",
"isleaf": true,
"level": 2,
"children": null
}
]
}
]
}
我怎样把他转换成

<div>
<a href="###">一级菜单</a>
<ul>
<li>
<a>2级菜单1</a>
<ul>
<li><a href="###">3级菜单1</a></li>
<li><a href="###">3级菜单2</a></li>
</ul>
</li>
<li>
<a href="###">2级菜单2</a>
.......
</li>
</ul>
</div>

3个答案
HVA_hk 2015-08-27 11:27:08
下面的代码render是主函数，用来render你提供的json数据，它调用了renderMenu函数。

javascriptfunction renderMenu(menu, parent) {
var el = $('<a href="' + menu.link +'">' + menu.name + '</a>');
$(parent).append(el);
if (menu.isleaf) {
return parent;
}

var ul = $('<ul/>');
for (var i = 0; i < menu.children.length; ++i) {
var li = $('<li/>');
renderMenu(menu.children[i], li);
ul.append(li);
}

$(parent).append(ul);
return parent;
}

function render(json) {
var div = $('

<div/>

');
return renderMenu(json, div);
}

var json = // 你的那段json代码
var menu = render(json);