jstree和dtree

jstree：https://www.jstree.com/docs/config/
dtree:http://www.destroydrop.com/javascripts/tree/
近期从框架转到用原生代码开发一个tree的查看工具，两个项目，需求不同，但是显示形式相同。
第一个项目选用jstree,其实在选择的时候也有考虑过dtree,因为数据的原因，改用jstree，jstree的功能网上查了一圈也是很强大了。

jstree:
引入：
使用：

dtree:
我觉得用法和功能要比jstree要强大 要好的多 也可能是因为在dtree上研究的时间比较长，花的精力较多。所有的核心都在dtree.js中，可以根据自己的需要进行代码修改。
1.引入：

<link rel="StyleSheet" href="../tree/cssnew/dtree.css" type="text/css" />
<script type="text/javascript" src="../tree/jsnew/dtree.js"></script>

2.使用：

var d = new dTree('d');
var dataList = []; // 这里是数据（我的这个数据是请求过来的）
for(var i = 0; i < dataList.length; i++) {
    d.add(
        dataList[i][0],  // 父ID
        dataList[i][1],  // 子ID
        dataList[i][2],	 // 名称
        dataList[i][4],  // url
        "",
        "myframe", // 这个参数是通过iframe窗口url打开,是iframe的标识
        '../tree/' + dataList[i][3], // 这个是图标
        '../tree/' + dataList[i][3], // 这个是文件打开的图标
        false
    );
}
document.getElementById("ulList").innerHTML = d.toString();

反正就是引入，使用，上手贼方便。

3.再说需求：

<frameset cols="22%,*">
  <frame src="menu.html" name="menu" id="menu" />
   <frame src="1.html" id="myframe" name="myframe" />
</frameset>

1.使用老掉牙frameset，因为是原始的项目的优化修改，说实话，我在接触这个项目之前都没听过… 然后就学习了一个这个frameset，貌似是已经被淘汰掉的了…
2.通过其中[myframe]的frame，上一页下一页翻页，当翻页的时候做[menu]dtree的展开高亮记录cookie。
这时，就要看dtree.js了：
1.节点高亮，记录cookie,dtree代码如下图
在[myframe]翻页等触发页面加载的位置，向[menu]回传参数id,

parent.document.getElementById('menu').contentWindow.menuReturn($("#pageNo").val());

在[menu]对应js
// menu的回显

function menuReturn(url) {
    var aList = $(".dTreeNode a"); // 获取所有的a标签
    for (let i = 0; i < aList.length; i++) {
        if($(aList[i]).attr("href") == (url + '.html')) {
            $(".leftCon").scrollTop(0);
            $(".leftCon").scrollTop($(aList[i]).offset().top - 300);
            // 打开当前页设置cookie及菜单高亮; -- 调用dtree方法
            d.s($(aList[i]).attr("id").split("sd")[1]);
            // 点击展开
            $(aList[i]).parents(".clip").attr('style', 'display:block');
            var imgArr = $(aList[i]).parents(".clip").prev().find("img");
            for (let i = 0; i < imgArr.length; i++) {    
                // 找到需要变为展开的img;            
                if ($(imgArr[i]).attr("src") == '../tree/imgtree/plusbottom.gif') {
                    // 展开方法; -- 调用dtree方法
                    d.o($(imgArr[i]).attr("id").split("jd")[1]);
                } else if (($(imgArr[i]).attr("src") == '../tree/imgtree/plus.gif')) {
                	// 展开方法; -- 调用dtree方法
                    d.o($(imgArr[i]).attr("id").split("jd")[1]);
                }
            }
        }
    }
}

图片为dtree点击节点的代码，图片中this.o(id)是另一个需求加上去的：点击节点展开，不要点击+/-才展开收起，然后就在这个位置加了这行~，这行加上去之后，在修改图片的位置可能会报错，元素找不到，需要判断一下

完美结束~~
我是真的学到了dtree！！！！