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

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

　　treePanel.html

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <title>ExtJS TreePanel</title>

         <link rel="stylesheet" type="text/css" href="../../ext-5.0.0/examples/shared/example.css" />

         <script type="text/javascript" src="../ext-5.0.0/examples/shared/include-ext.js"></script>

         <script type="text/javascript" src="../ext-5.0.0/examples/shared/options-toolbar.js"></script>

         <script type="text/javascript" src="treePanel.js" charset="utf-8" ></script>

     </head>

     <body style=" margin: 0; padding: 0;">

     </body>

 </html>

　　treePanel.js

 Ext.require('Ext.tree.Panel')

 Ext.onReady(function(){

     Ext.Ajax.request({

         url: 'treePanel.lua',

         method: 'post',

         params: {

             id: "123",

             action: 'getDir'

         },

         success: function(response){

             var text = response.responseText;

             var obj = eval('(' + text + ')');

             var treePanel = Ext.create('Ext.tree.Panel',{

                 width: 200,

                 rootVisible: false,

                 store: obj,

                 renderTo: Ext.getBody(),

             });

         },

         failure: function() {

             Ext.Msg.alert("失败","失败了");

         }

     });

 });

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

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

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

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

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

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

 local s = {root = {

         text = "rootNode",

         expanded = true,

         leaf = false,

         children = {

             {

                 text = 'book1',

                 leaf = false,

                 children = nil

             },

             {

                 text = "book2",

                 leaf = false,

                 expanded = true,

                 children = {

                     {

                         text = "con1",

                         leaf = false,

                         children = {

                           {

                             text = "ccc1",

                             leaf = true

                           }

                         }

                     },{

                         text = "con2",

                         leaf = true

                     }

                 }

             },

             {

                 text = "book3",

                 expanded = true,

                 leaf = true

             }

         }

     }

 }

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

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

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

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

 function getDirTable(filePath)

     local table = {root = {text = "rootNode", leaf = false, children = {}}}

     function getDir(path,table)

         for file in lfs.dir(path) do

             if file ~= "." and file ~= ".." then

                 p = path .. "/" .. file

                 if isDir(p) == "directory" then

                     local node = {text = file, leaf = false, children = {}}

                     table[#table + ] = node

                     local nObj = table[#table].children

                     local nPath = path .. file .. "/"

                     getDir(nPath, nObj)

                 else

                     local node = {text = file, leaf = true}

                     table[#table + ] = node

                 end

              end

         end

     end

     getDir(filePath,table.root.children)

     return table

 end

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

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

 function isDir(path)

    return lfs.attributes(path).mode

 end

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

 function table2Json(table)

     local cjson = require("cjson")

     return cjson.encode(table)

 end

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

 httpd.set_content_type("text/json")

 if request.method == "POST" then

     if args.action == "getDir" then

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

     end

 elseif request.method == "GET" then

     httpd.write("是个字符串")

 end

　　完整代码：

 require "lfs"

 require "httpd"

 request, args = ... 

 function isDir(path)

    return lfs.attributes(path).mode

 end

 function table2Json(table)

     local cjson = require("cjson")

     return cjson.encode(table)

 end

 function getDirTable(filePath)

     local table = {root = {text = "rootNode", leaf = false, children = {}}}

     function getDir(path,table)

         for file in lfs.dir(path) do

             if file ~= "." and file ~= ".." then

                 p = path .. "/" .. file

                 if isDir(p) == "directory" then

                     local node = {text = file, leaf = false, children = {}}

                     table[#table + ] = node

                     local nObj = table[#table].children

                     local nPath = path .. file .. "/"

                     getDir(nPath, nObj)

                 else

                     local node = {text = file, leaf = true}

                     table[#table + ] = node

                 end

              end

         end

     end

     getDir(filePath,table.root.children)

     return table

 end

 httpd.set_content_type("text/json")

 if request.method == "POST" then

     if args.action == "getDir" then

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

     end

 elseif request.method == "GET" then

     httpd.write("GET请求")

 end

　　访问treePanel.html

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

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

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

 function reTable(table)

     local obj = table.root.children

     function re(obj)

         if #obj ==  then

             obj = nil

         else

             for i = , #obj do

                 if obj[i].leaf == false then

                     if #(obj[i].children) ==  then

                         obj[i].children = nil

                     else

                         re(obj[i].children)

                     end

                 end

             end

         end

     end

     re(obj)

     return table

 end

　　最后把lwt响应改一下：

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

　　看看效果：

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

【Lua】Lua + LWT + ExtJS构建目录树的更多相关文章

  1. 【Lua】LWT遍历指定目录并输出到页面中

    首先用lua遍历目录: function getDirs(path) local s = {} function attrdir(p) for file in lfs.dir(p) do if fil ...

  2. 【Lua】LWT后台用JSON与 ExtJS传递数据

    要完成目录树的构建,需要前台ExtJS构筑页面,后台处理逻辑,中间由JSON传递数据. 首先搭建后台环境: require "httpd" require "lfs&qu ...

  3. Lind.DDD.ExpressionExtensions动态构建表达式树，实现对数据集的权限控制

    回到目录 Lind.DDD框架里提出了对数据集的控制,某些权限的用户为某些表添加某些数据集的权限,具体实现是在一张表中存储用户ID,表名,检索字段,检索值和检索操作符,然后用户登陆后,通过自己权限来构 ...

  4. HBase 在HDFS 上的目录树

         总所周知,HBase 是天生就是架设在 HDFS 上,在这个分布式文件系统中,HBase 是怎么去构建自己的目录树的呢? 这里只介绍系统级别的目录树. 一.0.94-cdh4.2.1版本 系 ...

  5. 原创的基于HTML/CSS/JavaScript的层级目录树

    之前参加过一些基于HTML/CSS/JavaScript的项目,当在页面中需要生成一颗目录树时,总是首先想着网上有没有现成的生成树的源代码,比如dtree.zthee,或者使用一些javascript ...

  6. 从Chrome源码看浏览器如何构建DOM树

    .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 1 ...

  7. 表达式目录树(Expression)

    一:什么是表达式树 Expression我们称为是表达式树,是一种数据结构体,用于存储需要计算,运算的一种结构,这种结构可以只是存储,而不进行运算.通常表达式目录树是配合Lambda一起来使用的,la ...

  8. 【专家坐堂Q&A】在 petalinux-config 中选择外部来源时，可将符号链路添加内核来源目录树

    问题描述 作为 petalinux-config 菜单的一部分,现在可以将 Linux 内核指定为外部来源. 如果选择了该选项,可为内核来源目录树添加两个符号链路. 这会带来两个问题: 1. 符号链路 ...

  9. HBase在HDFS上的目录树

    众所周知,HBase 是天生就是架设在 HDFS 上,在这个分布式文件系统中,HBase 是怎么去构建自己的目录树的呢? 这里只介绍系统级别的目录树: 一.0.94-cdh4.2.1版本 系统级别的一 ...

随机推荐

  1. CodeForces 907F Power Tower(扩展欧拉定理)

    Priests of the Quetzalcoatl cult want to build a tower to represent a power of their god. Tower is u ...

  2. git 恢复被修改的文件

    恢复到最后一次提交的改动:   git checkout filename 如果该文件已经 add 到暂存队列中,恢复文件:   git reset HEAD filename

  3. 【C#】泛型

    泛型是一个非常有用的技术,在博客园里面有太多说到泛型的好文章,这里我推荐一篇我个人觉得非常全面,也非常齐全的文章. (重造轮子很傻!!!) C# -- 泛型(1) C# -- 泛型(2) C# -- ...

  4. ajax 解析

    1.通过适当的Ajax应用达到更好的用户体验; 2.把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的. 二 ...

  5. CSS：如何清除a标签之间的默认留白间距

    即使我们使用了类似 *{margin: 0;padding: 0;} 这样的代码重置了浏览器默认样式,也会发现类似<a>标签这种inline-block元素,它们之间也还存在着间距. de ...

  6. Win7系统下搭建FTP

    一.创建FTP站点  1.打开:控制面板---系统和安全---管理工具---Internet 信息服务 2. 建站:右键点击网站---添加FTP站点 3. 输入FTP 站点名称---选择你的 FTP ...

  7. 【QTP专题】04_对象及操作方法

    本节介绍知识点包括 1.QTP自动化的原理 2.两类对象:TO(测试对象).RO(运行对象) 3.操作方法:SetTOProperty,GetROProperty,GetTOProperty 1.QT ...

  8. 解决$ git clone fatal: Authentication failed

    今天在使用git clone克隆项目的时候报如下错误: $ git clone XXXXXX Cloning into 'XXXX'... fatal: Authentication failed f ...

  9. Hbase的安装与测试

    实验环境 虚拟机伪分布式 Ubuntu 17.10 JDK 1.8 Hadoop 2.7.6 Hbase 1.3.3 ①安装和配置HBase. 首先从官网http://archive.apache.o ...

  10. [Maven实战-许晓斌]-[第二章]-2.2基于UNIX系统安装maven

    >> >> >>3