要完成目录树的构建,需要前台ExtJS构筑页面,后台处理逻辑,中间由JSON传递数据。
首先搭建后台环境:
require "httpd"
require "lfs" request, args = ... local s = {root = {
text = "rootNode",
expanded = true,
children = {
{
text = 'book1',
leaf = true
},
{
text = "book2",
expanded = true,
children = {
{
text = "con1",
leaf = true
},{
text = "con2",
leaf = true
}
}
},
{
text = "book3",
expanded = true,
leaf = true
}
}
}
} local cjson = require("cjson")
local tJson = cjson.encode(s) httpd.set_content_type("text/json")
httpd.write(tJson)
这里虚拟了一个树数据结构s,将其打包后返回给请求方。
然后是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="test.js" charset="utf-8" ></script> </head>
<body style=" margin: 0; padding: 0;">
</body>
</html>
最后是ExtJS部分:
Ext.require('Ext.tree.Panel') Ext.onReady(function(){
Ext.Ajax.request({
url: 'm.lua', //后台文件path
method: 'post',
params: {
action: 'getDir',
},
success: function(response){
var text = response.responseText;
var obj = eval('(' + text + ')');
console.log(obj);
},
failure: function() {
Ext.Msg.alert("失败","失败了");
}
});
});
其中response内容是这样的:
所以可以用"response.responseText"来调用响应内容的主体。
在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。
JSON字符串转换为JSON对象:
var obj = eval('(' + str + ')');
这样就能获取一个可供使用的JSON对象了。