jquery树形ztree插件根据文件目录路径动态生成树形list的算法

摘要: 要求用python遍历一个目录下的所有文件及文件夹，获取相关的所有信息，包括文件名，文件路径，大小，类型等，将获取到的路径信息传输到前端，前端使用基于jquery的树形插件ztree动态生成树形list，查了一些资料都没有查到什么方法，后来自己思考出了一种方法，就是今天我要讲解的。

我使用python遍历目录后得到的路径都是一条条的记录，例如：

e:\\test1\\test2\\ou.h
e:\\test1
e:\\test4\\test3\\test6\\ko.cpp

而ztree的treenode节点数据共有两种形式。

一种是标准json数据格式，标准的 JSON 数据需要嵌套表示节点的父子包含关系：

var nodes = [
{name: "父节点1", children: [
{name: "子节点1"},
{name: "子节点2"}
]}
];

一种是简单json数据格式，简单模式的 JSON 数据需要使用 id / pId 表示节点的父子包含关系：

var nodes = [
{id:1, pId:0, name: "父节点1"},
{id:11, pId:1, name: "子节点1"},
{id:12, pId:1, name: "子节点2"}
];

我本次想到的方法，只针对简单json数据格式，对于标准json数据格式，我没有想到好的方法，如果读者你有好的方法的话，请一定告诉博主，博主感谢你！

我必须要把获取到的路径，转换成简单json数据格式，思考之后，我写下了如下的算法：

设置全局变量 checkid = 0
第一个节点的id从1开始

对每一条路径进行分段：
如 e:\\my1\\my2\\text1
分段为 e: , my1 , my2 , text1 四段

对每一段：
查找当前json数据中，所有pid == checkid的节点的name是否与当前段重合，
如果相同，checkid = 重合节点.id
如果不同，将该段作为新节点加入json，新节点id顺延+1，新节点的pid=checkid，checkid = 新节点.id

一条路径处理完，checkid重置为0

接下来，我们验证算法的正确，假设有两条路径

e:\\my1\\my2\\text
e:\\my3

转换过程如下：

对第一条路径
checkid初始为0
(1)e：没有，加入该节点，id=1,pid=0,name："e:",checkid == 1
(2)my1 没有，加入该节点，id=2,pid=1,name:"my1",checkid == 2
(3)my2 没有，加入该节点，id=3,pid=2,name:"my2",checkid == 3
(4)text 没有，加入该节点，id=4,pid=3,name:"text",checkid == 4
checkid重置为0

对第二条路径
(1)e: 已经存在，跳过,checkid == 1
(2)my3 没有，加入my3, id=5,pid=1,name:"my3",checkid == 5

转换后的格式与预期是一样的！

实际代码：（写的烂不要骂我）

var zNodes =[];

var liststr = 路径数组

for (var i = liststr.length - 1; i >= 0; i--) {
var strarr = liststr[i].route.split('\\');
addtree(strarr);
console.log("success");
}

function addtree(routearray)
{
for (var i = 0; i < routearray.length; i++ ){ //对每一条路径数组
if ( !checkPid(checkid,routearray[i]) ) { //假如相同路径下没有找到同名文件
var newarr = {id:idmake, pId:checkid, name:routearray[i]}//插入新节点
zNodes.push(newarr);
checkid = idmake;
idmake += 1;
}//假如找到了同名文件，那么将checkid 赋值为同名文件的ID，这句代码在checkPid函数里，可能需要优化
else{
checkid = indeid;
}
}
checkid = 0;
}

function checkPid(id,key){
for(i=0;i<zNodes.length;i++){
if (zNodes[i].pId == id)
{
if (zNodes[i].name == key) {
indeid = zNodes[i].id;
return true;
}
}
}
return false;
}

这样，ztree树形list就建立起来了。