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