做树状图的总结

开发工具与关键技术：做树状图的总结 
作者：李梓良
撰写时间：2019年6月8日

一， 做树状图的思路总结
(1).首先是引用插件

(2).引用完插件之后，就是再在div的代码里面分好区域，因为我是一边是树状图，另外 一边是表格，所以分成两边，一边靠左，所以在class那里就有左的代码，因为在插 件里面是被ul标签包裹的，所以直接可以在ul标签上加上ztree的插件名称就可以了，再最后设置树状图的大小，高度，还有隐藏属性 (3).然后是script的里面的代码，要注意的是，不要在原来的那些设置点击事件的script中添加代码，因为这样会报错，然后你要另外再创建一个script的标签，并且，还要在那个script标签下，加上方式type的"text/javascript"，在插件中，刚用代码的做树形图的时候，会出现url=”#”这样的代码的，在这里，我是把这个部分删掉了的，因为，我要的效果是伸缩，然后其他的代码就是按照插件来的就行了

二．做树状图代码部分

<script type="text/javascript">
var setting =
{
};
var zNodes = [
{
id: 1, pId: 0, name: "服装", open: true,
children: [
{ id: 11, pId: 1, name: "上衣", "url": "#" },
{ id: 12, pId: 1, name: "裤子", "url": "#" },
{ id: 13, pId: 1, name: "裙子", "url": "#" },
{ id: 14, pId: 1, name: "套装", "url": "#" }
]
},
{
id: 2, pId: 0, name: "鞋子", open: true,
children: [
{ id: 21, pId: 2, name: "男鞋", "url": "#" },
{ id: 22, pId: 2, name: "女鞋", "url": "#" }
]
},
{
id: 3, pId: 0, name: "内衣", open: true,
children: [
{ id: 31, pId: 3, name: "文胸", "url": "#" },
{ id: 32, pId: 3, name: "内裤", "url": "#" }
]
},
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

三．做树状图效果图部分：