下面是Extjs的脚本
Ext.onReady(function() {
Ext.QuickTips.init();
var mytree = new Ext.tree.TreePanel({
el: "container",
animate: true,
title: "简单Extjs动态树",
id : 'divtree',
collapsible: true,
enableDD: true,
enableDrag: true,
rootVisible: true,
autoScroll: true,
autoHeight: true,
width: 150,
lines: true,
loader: new Ext.tree.TreeNode({
dataUrl: "json.ashx",
listeners: {
"loadexception": function(loader, node, response) {
node.loaded = false;
node.reload.defer(10, node);
}
}
}),
tools : [{
id : 'refresh',
handler : function() {
var tree = Ext.getCmp('divtree');
tree.root.reload();
}
}]
}); //根节点
var root = new Ext.tree.TreeNode({
id: "root",
test: "控制面板",
expanded: true
}); mytree.setRootNode(root);
mytree.render();
})
下面是json.ashx代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;
namespace ExtTree
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class jsondata
{
//定义jsondata类,存放节点数据
public string id;
public string text;
public bool leaf;
//存放子节点
public List<jsondata> children = new List<jsondata>();
} public class json : IHttpHandler
{
public List<jsondata> jsdata = new List<jsondata>();
public void ProcessRequest(HttpContext context)
{
for (int i = 0; i < 5; i++)
{
jsondata jd = new jsondata();
jd.id = "num" + i;
jd.text = "节点" + i;
jd.leaf = false;
for (int j = 0; j < 3; j++)
{
jsondata subjd = new jsondata();
subjd.id = "sub" + j;
subjd.text = "子节点" + j;
subjd.leaf = true;
jd.children.Add(subjd);
}
jsdata.Add(jd);
}
//context.Response.ContentType = "text/plain";
context.Response.Write(ToJson(jsdata.ToArray()));
} public bool IsReusable
{
get
{
return false;
}
} public string ToJson(object o)
{
JavaScriptSerializer j = new JavaScriptSerializer();
return j.Serialize(o);
}
}
}下面是前台页面的<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ExtTree._Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/tree1.css" rel="stylesheet" type="text/css" />
<link href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="ext/adapter/ext/ext-base.js" type="text/javascript"></script> <script src="ext/ext-all.js" type="text/javascript"></script> <script src="js/tree1.js" type="text/javascript"></script> <script src="js/tree2.js" type="text/javascript"></script> <script src="js/tree3.js" type="text/javascript"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>EXT版本用的是3.2.1 extjs和ashx放在同一目录
现在的时候显示根目录其他什么都没有求助大神
Ext.onReady(function() {
Ext.QuickTips.init();
var mytree = new Ext.tree.TreePanel({
el: "container",
animate: true,
title: "简单Extjs动态树",
id : 'divtree',
collapsible: true,
enableDD: true,
enableDrag: true,
rootVisible: true,
autoScroll: true,
autoHeight: true,
width: 150,
lines: true,
loader: new Ext.tree.TreeNode({
dataUrl: "json.ashx",
listeners: {
"loadexception": function(loader, node, response) {
node.loaded = false;
node.reload.defer(10, node);
}
}
}),
tools : [{
id : 'refresh',
handler : function() {
var tree = Ext.getCmp('divtree');
tree.root.reload();
}
}]
}); //根节点
var root = new Ext.tree.TreeNode({
id: "root",
test: "控制面板",
expanded: true
}); mytree.setRootNode(root);
mytree.render();
})
下面是json.ashx代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;
namespace ExtTree
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class jsondata
{
//定义jsondata类,存放节点数据
public string id;
public string text;
public bool leaf;
//存放子节点
public List<jsondata> children = new List<jsondata>();
} public class json : IHttpHandler
{
public List<jsondata> jsdata = new List<jsondata>();
public void ProcessRequest(HttpContext context)
{
for (int i = 0; i < 5; i++)
{
jsondata jd = new jsondata();
jd.id = "num" + i;
jd.text = "节点" + i;
jd.leaf = false;
for (int j = 0; j < 3; j++)
{
jsondata subjd = new jsondata();
subjd.id = "sub" + j;
subjd.text = "子节点" + j;
subjd.leaf = true;
jd.children.Add(subjd);
}
jsdata.Add(jd);
}
//context.Response.ContentType = "text/plain";
context.Response.Write(ToJson(jsdata.ToArray()));
} public bool IsReusable
{
get
{
return false;
}
} public string ToJson(object o)
{
JavaScriptSerializer j = new JavaScriptSerializer();
return j.Serialize(o);
}
}
}下面是前台页面的<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ExtTree._Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/tree1.css" rel="stylesheet" type="text/css" />
<link href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="ext/adapter/ext/ext-base.js" type="text/javascript"></script> <script src="ext/ext-all.js" type="text/javascript"></script> <script src="js/tree1.js" type="text/javascript"></script> <script src="js/tree2.js" type="text/javascript"></script> <script src="js/tree3.js" type="text/javascript"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>EXT版本用的是3.2.1 extjs和ashx放在同一目录
现在的时候显示根目录其他什么都没有求助大神
解决方案 »
- CNLTreeMenu 代码分析
- 哪位高手能说下js作用域是怎么回事?
- 求一正则
- 如何取得checkbox 选中的当前行其他控件值?
- 同一页面不断刷新,如何在js中定义全局变量?
- 关于一段在线测试代码的问题?(网上已经发布的)
- 请问javascript设置WEB打印时,如何能去掉页眉和页脚呢?又如何设置页眉和页脚的显示内容呢?
- 怎样可以知道COOKIE已用了的大少?
- 如何用javascript实现按钮的隐藏???
- 哪位有javascript参考手册CHM版?我本来有的误删了,以前那个lostinet也不能用了!!
- jquery 关于插件自动补充以及trigger手动触发事件紧急!!跪求高手解答疑问
- 求网页选项卡源代码。
loader: new Ext.tree.TreeNode({
dataUrl: "json.ashx",//这里的路径对不对,后台的代码有没有运行,后台不需要跳转页面
在浏览器中请求这个地址后,页面是否是显示的json的tree格式的字符串其中数据格式是:
[{
id: 1,
text: 'A leaf Node',
leaf: true
},{
id: 2,
text: 'A folder Node',
children: [{
id: 3,
text: 'A child Node',
leaf: true
}]
}]
这样的格式,如果格式不对也是不能显示数据的
我也试过用js 里面写数据 树就是不出来
再强调一下 数据文件和 js放在一个路径下dataUrl: "json.js"json.js
[{
id: 1,
text: 'A leaf Node',
leaf: true
},{
id: 2,
text: 'A folder Node',
children: [{
id: 3,
text: 'A child Node',
leaf: true
}]
}]
节点如果是放在单独的文件里的时候,把loader的获取方式改成GET
改成这样:
loader: new Ext.tree.TreeNode({
dataUrl: "json.ashx",
requestMethod: 'GET',
listeners: {
"loadexception": function(loader, node, response) {
node.loaded = false;
node.reload.defer(10, node);
}
}
})
还有注意文件的格式,有些格式可能服务器是不支持的。
如果是用处理文件的方式,把输出的编码格式改成UTF-8