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 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))))
看看效果：
这样就显示了一个空文件夹，问题解决！