【Lua】Lua + LWT + ExtJS构建目录树
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构建目录树的更多相关文章
- 【Lua】LWT遍历指定目录并输出到页面中
首先用lua遍历目录: function getDirs(path) local s = {} function attrdir(p) for file in lfs.dir(p) do if fil ...
- 【Lua】LWT后台用JSON与 ExtJS传递数据
要完成目录树的构建,需要前台ExtJS构筑页面,后台处理逻辑,中间由JSON传递数据. 首先搭建后台环境: require "httpd" require "lfs&qu ...
- Lind.DDD.ExpressionExtensions动态构建表达式树，实现对数据集的权限控制
回到目录 Lind.DDD框架里提出了对数据集的控制,某些权限的用户为某些表添加某些数据集的权限,具体实现是在一张表中存储用户ID,表名,检索字段,检索值和检索操作符,然后用户登陆后,通过自己权限来构 ...
- HBase 在HDFS 上的目录树
总所周知,HBase 是天生就是架设在 HDFS 上,在这个分布式文件系统中,HBase 是怎么去构建自己的目录树的呢? 这里只介绍系统级别的目录树. 一.0.94-cdh4.2.1版本 系 ...
- 原创的基于HTML/CSS/JavaScript的层级目录树
之前参加过一些基于HTML/CSS/JavaScript的项目,当在页面中需要生成一颗目录树时,总是首先想着网上有没有现成的生成树的源代码,比如dtree.zthee,或者使用一些javascript ...
- 从Chrome源码看浏览器如何构建DOM树
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 1 ...
- 表达式目录树(Expression)
一:什么是表达式树 Expression我们称为是表达式树,是一种数据结构体,用于存储需要计算,运算的一种结构,这种结构可以只是存储,而不进行运算.通常表达式目录树是配合Lambda一起来使用的,la ...
- 【专家坐堂Q&A】在 petalinux-config 中选择外部来源时，可将符号链路添加内核来源目录树
问题描述 作为 petalinux-config 菜单的一部分,现在可以将 Linux 内核指定为外部来源. 如果选择了该选项,可为内核来源目录树添加两个符号链路. 这会带来两个问题: 1. 符号链路 ...
- HBase在HDFS上的目录树
众所周知,HBase 是天生就是架设在 HDFS 上,在这个分布式文件系统中,HBase 是怎么去构建自己的目录树的呢? 这里只介绍系统级别的目录树: 一.0.94-cdh4.2.1版本 系统级别的一 ...
随机推荐
- 对于nginx为什么能提高性能
对于后端是动态服务来说,比如Java和PHP.这类服务器(如JBoss和PHP-FPM)的IO处理能力往往不高.Nginx有个好处是它会把Request在读取完整之前buffer住,这样交给后端的就是 ...
- Verilog MIPS32 CPU（三）-- ALU
Verilog MIPS32 CPU(一)-- PC寄存器 Verilog MIPS32 CPU(二)-- Regfiles Verilog MIPS32 CPU(三)-- ALU Verilog M ...
- Intel Galileo development documentation
Intel Galileo development Documentation Author:Liutianchen 1552227, Department of Computer Science,E ...
- vmware之VMware Remote Console (VMRC) SDK（二）
在上篇文章中,我们用winform结合vmware的api做了一个demo,在vmrc sdk中作为plugin单独打包出来vmware-vmrc-win32-x86.exe,上篇文章的demo只能基 ...
- Replication--使用备份初始化订阅--请求订阅
1. 修改发布属性"许从备份文件初始化"置为TRUE 脚本修改:USE [DB01]GODECLARE @publication AS sysnameSET @publicatio ...
- 安装和使用 Elasticsearch(1.1.1)+marvel插件、Kibana插件
Elasticsearch是开源搜索平台的新成员,实时数据分析的神器,发展迅猛,基于 Lucene.RESTful.分布式.面向云计算设计.实时搜索.全文搜索.稳定.高可靠.可扩展.安装+使用方便,介 ...
- 反射：获取Class对象的三种方式
获取Class对象的三种方式 package lianxiApril18; /** * 获取Class对象的三种方式 * 1 Object ——> getClass(); * 2 任何数据类型( ...
- MongoDB复制集与Raft协议异同点分析
此文已由作者温正湖授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 一.日志复制流程: a.raft leader节点在接收client请求后,先将请求写到日志中,再将日志通过 ...
- 解决$ git clone fatal: Authentication failed
今天在使用git clone克隆项目的时候报如下错误: $ git clone XXXXXX Cloning into 'XXXX'... fatal: Authentication failed f ...
- MongoDB 学习笔记四 C#调用MongoDB
驱动 下载 https://github.com/mongodb/mongo-csharp-driver/downloads 项目地址: https://github.com/mongodb/mong ...