【Lua】Lua+LWT+ExtJS构建目录树

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› LUA›LUA教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

　　Lua处理后台逻辑，Lua lwt搭建后台程序，ExtJS根据后台传来的json数据构建目录树。

　　前台html和ExtJS代码不用多讲，直接上代码：

　　treePanel.html

 1 <html>
 2     <head>
 3         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4         
 5         <title>ExtJS TreePanel</title>
 6         <link rel="stylesheet" type="text/css" href="../../ext-5.0.0/examples/shared/example.css" />
 7         
 8         
 9         <script type="text/javascript" src="../ext-5.0.0/examples/shared/include-ext.js"></script>
10         <script type="text/javascript" src="../ext-5.0.0/examples/shared/options-toolbar.js"></script>
11         
12         <script type="text/javascript" src="treePanel.js" charset="utf-8" ></script>
13   
14     </head>
15     <body style=" margin: 0; padding: 0;">
16     </body>
17 </html>

　　treePanel.js

 1 Ext.require('Ext.tree.Panel')
 2 
 3 Ext.onReady(function(){    
 4     Ext.Ajax.request({
 5         url: 'treePanel.lua',   
 6         method: 'post',
 7         params: {
 8             id: "123",
 9             action: 'getDir'
10         },
11         success: function(response){
12             var text = response.responseText; 
13             var obj = eval('(' + text + ')'); 
14             var treePanel = Ext.create('Ext.tree.Panel',{
15                 width: 200,
16                 rootVisible: false,
17                 store: obj,
18                 renderTo: Ext.getBody(),
19             });      
20         }, 
21         failure: function() {
22             Ext.Msg.alert("失败","失败了");
23         }
24     });
25 });

　　在treePanel.js中，通过后台传递过来的json字符串无法直接使用，需要将其转化为json对象才可以作为treePanel的数据源。

　　转换方法：jsonObj = eval('('+jsonString'+)')

　　接下来是逻辑处理部分，也就是遍历目录数据的部分。

　　一开始我使用的方法是先将所有文件path遍历至一个table内，然后处理table将其转化为treePanel可以用的json格式，这样遍历过程比较简单，不过处理过程太过繁琐，处理方法结构脆弱且BUG不断，效率也是惨不忍睹。最后还是放弃了。

　　其实最合适的方法是直接在遍历时就生成所需要的json格式，好吧，现在就来实现他：

　　lua遍历目录需要达成的格式为：

 1 local s = {root = { 
 2         text = "rootNode",
 3         expanded = true,
 4         leaf = false,
 5         children = {
 6             {
 7                 text = 'book1',
 8                 leaf = false,
 9                 children = nil
10             },
11             {
12                 text = "book2",
13                 leaf = false,
14                 expanded = true,
15                 children = {
16                     {
17                         text = "con1",
18                         leaf = false,
19                         children = {
20                           {
21                             text = "ccc1",
22                             leaf = true
23                           }
24                         }
25                     },{
26                         text = "con2",
27                         leaf = true
28                     }
29                 }
30             },
31             {
32                 text = "book3",
33                 expanded = true,
34                 leaf = true
35             }
36         }
37     }
38 }

　　用lfs模块提供的方法遍历目录，并创建一个table，操作table使之成为这样的结构。其中：

　　　　"leaf = true"表示这个节点是一个文件，所以不必加上"children = {}"属性;

　　　　如果节点是一个文件夹，那给节点设置"leaf = false"表示为文件夹(如果不设置这个属性默认为文件夹，不过这里用来作为判断的条件，所以加上)，并且加上"children = {}" 用来作为该文件夹下文件的根节点。

　　方法getDirTable(filePath)用以遍历目录，并生成指定的table结构数据：

 1 function getDirTable(filePath)
 2     local table = {root = {text = "rootNode", leaf = false, children = {}}}
 3     function getDir(path,table)
 4         for file in lfs.dir(path) do
 5             if file ~= "." and file ~= ".." then
 6                 p = path .. "/" .. file
 7                 if isDir(p) == "directory" then
 8                     local node = {text = file, leaf = false, children = {}}
 9                     table[#table + 1] = node                   
10                     local nObj = table[#table].children
11                     local nPath = path .. file .. "/"
12                     getDir(nPath, nObj)
13                 else 
14                     local node = {text = file, leaf = true}
15                     table[#table + 1] = node
16                 end
17              end   
18         end
19     end
20     getDir(filePath,table.root.children) 
21     return table
22 end

　　其中遍历了当下文件夹，如果文件夹下存在子文件夹，则递归遍历子文件夹，并且将子文件夹下的文件和文件夹依照规则添加到该文件夹节点的"children = {}"内。

　　在这个方法中，还有一个辅助方法，用来判断path是文件还是文件夹：

1 function isDir(path)
2    return lfs.attributes(path).mode
3 end

　　获取目录遍历table后，使用cjson方法转换为json字符串：

1 function table2Json(table)
2     local cjson = require("cjson")
3     return cjson.encode(table)
4 end

　　最后通过lwt将json字符串传到前台：

1 httpd.set_content_type("text/json") 
2 if request.method == "POST" then
3     if args.action == "getDir" then
4         httpd.write(table2Json(getDirTable(request.filedir)))
5     end
6 elseif request.method == "GET" then
7     httpd.write("是个字符串")
8 end

　　完整代码：

 1 require "lfs"
 2 require "httpd"
 3 
 4 request, args = ... 
 5 
 6 function isDir(path)
 7    return lfs.attributes(path).mode
 8 end
 9 
10 function table2Json(table)
11     local cjson = require("cjson")
12     return cjson.encode(table)
13 end
14 
15 function getDirTable(filePath)
16     local table = {root = {text = "rootNode", leaf = false, children = {}}}
17     function getDir(path,table)
18         for file in lfs.dir(path) do
19             if file ~= "." and file ~= ".." then
20                 p = path .. "/" .. file
21                 if isDir(p) == "directory" then
22                     local node = {text = file, leaf = false, children = {}}
23                     table[#table + 1] = node                   
24                     local nObj = table[#table].children
25                     local nPath = path .. file .. "/"
26                     getDir(nPath, nObj)
27                 else 
28                     local node = {text = file, leaf = true}
29                     table[#table + 1] = node
30                 end
31              end   
32         end
33     end
34     getDir(filePath,table.root.children) 
35     return table
36 end
37 
38 httpd.set_content_type("text/json") 
39 if request.method == "POST" then
40     if args.action == "getDir" then
41         httpd.write(table2Json(reTable(getDirTable(request.filedir))))
42     end
43 elseif request.method == "GET" then
44     httpd.write("GET请求")
45 end

　　访问treePanel.html

　　这里有一个问题，看asd.sda文件夹下

　　这里出现了一个没有名字的空文件夹。这是由于遍历时，检测到是目录时默认给其赋值了"children = {}"的缘故，由于在treePanel中，当不设置"leaf: true"时，默认leaf为false，即将其认为是一个文件夹。所以ExtJS给这个文件夹节点添加了一个没有名字的空子文件夹。

　　要解决这个问题，只要将为空的文件夹设置为children = nil，这样就可以了。

 1 function reTable(table)
 2     local obj = table.root.children
 3     function re(obj)
 4         if #obj == 0 then
 5             obj = nil
 6         else
 7             for i = 1, #obj do
 8                 if obj[i].leaf == false then
 9                     if #(obj[i].children) == 0 then
10                         obj[i].children = nil
11                     else
12                         re(obj[i].children)
13                     end
14                 end
15             end
16         end
17     end
18     re(obj)
19     return table
20 end

　　最后把lwt响应改一下：

httpd.write(table2Json(reTable(getDirTable(request.filedir))))

　　看看效果：

　　这样就显示了一个空文件夹，问题解决！

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

Lua非常有用的工具——递归打印表数据发布时间：2022-07-22

Lua For windows 编辑器的使用发布时间：2022-07-22

客服电话

电子邮件

【Lua】Lua+LWT+ExtJS构建目录树

请发表评论

全部评论

上一篇：

下一篇：

关于我们

产品与服务

解决方案

139-2527-9053