ext tree json

最新推荐文章于 2024-06-14 10:23:44 发布
最新推荐文章于 2024-06-14 10:23:44 发布
阅读量92 收藏
点赞数
文章标签： EXT json JavaScript Struts JSP ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuzijingaip/article/details/83554244
版权
[color=red]以前用的，现在建议用 jquery[/color]

[img]http://dl.iteye.com/upload/attachment/202987/a496a72d-6257-385c-836b-f9255cea55bc.jpg[/img]

jsp:
<%@ page language="java" contentType="text/html; charset=GBK"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="${pageContext.request.contextPath }/ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/ext3/ext-all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/public.js"></script>

<script>
Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;

var tree = new Tree.TreePanel({
el:'tree-div',
autoScroll:true,
animate:true,
height:300,
enableDD:true,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'tree.json'
})
});

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'AAA',
draggable:false,
id:'source'
,"allowDrag":false //false表示不能被拖动
});

// Tree.TreeLoader({dataUrl:'tree.json'});
tree.setRootNode(root);

//绑定节点加载之前事件
tree.on('beforeload',function(node){
if(node.id!='01'){
tree.loader.dataUrl = 'tree.json';
}
});
//绑定节点点击事件
/* tree.on('click', function(node){
if(node.id!='root'){
alert(node.id);
alert(node.text);
alert(node.href);
}
});
*/
tree.on('nodedrop',
function(e){

if(e.point=='append'){
alert('当前"【'+e.dropNode.text+'】"被放到目录"【'+e.target.text+'】"下！');
// var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append";
// var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);
}

else if(e.point=='above'){
//alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面！');
// var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above";
// var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);
}else if(e.point=='below'){
//alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"下面！');
// var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below";
// var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);
}

}
);

//绑定节点右键菜单功能
tree.on('contextmenu',function(node,event){
// alert("node.id="+ node.id);
event.preventDefault(); //这行是必须的
rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
//alert(node.id);
// document.getElementById('rootid').value=node.id;
});


//定义右键菜单
var rightClick = new Ext.menu.Menu({
id :'rightClickCont',
items : [{
id:'rMenu1',
text : '编辑',
//增加菜单点击事件
handler:function (node){
//alert(node.dropNode.id);
}
}, {
id:'rMenu2',
text : '删除'
}, {
id:'rMenu3',
text : '菜单3'
}]
});



// render the tree
tree.render();
root.expand();



///



// shorthand
var Tree2 = Ext.tree;

var tree2 = new Tree2.TreePanel({
el:'tree-div2',
autoScroll:true,
animate:true,
height:300,
enableDD:true,
containerScroll: true,
loader: new Tree2.TreeLoader({
dataUrl:'tree.json'
})
});

// set the root node
/*
var root2 = new Tree2.AsyncTreeNode({
text: 'BBB',
draggable:false,
id:'source'
// ,"allowDrag":false //false表示不能被拖动
});
*/

// set the root node
var root2 = new Tree2.AsyncTreeNode({
text: '系统配置与管理',
draggable:false,
id:'0',
children:[
{
text: '111',
children:[
{
leaf : true,
text:'111',
href: "javascript:Index.loadDoc('../evaluation/listModels.do')"
},{
leaf : true,
text:'111理',
href: "javascript:Index.loadDoc('../evaluation/activity_list.jsp')"
}
]},{
text: '系统管理',
children:[
{
leaf : true,
text:'用户管理',
href: "javascript:Index.loadDoc('security/usersList.do')"
},{
leaf : true,
text:'组织机构管理',
href: "javascript:Index.loadDoc('manage/tablemanage.do?tablename=T_XX_YXSBZXJBQK&datatype=2&method=loadTolist&view=no')"
},{
leaf : true,
text:'参数配置',
href: "javascript:Index.loadDoc('manage/parameterSet.do')"
},{
leaf : true,
text:'系统日志',
href: "javascript:Index.loadDoc('manage/logsInfo.do')"
}
]}]


});

// Tree.TreeLoader({dataUrl:'tree.json'});
tree2.setRootNode(root2);

//绑定节点加载之前事件
tree2.on('beforeload',function(node){
if(node.id!='01'){
tree2.loader.dataUrl = 'tree.json';
}
});
//绑定节点点击事件
/* tree.on('click', function(node){
if(node.id!='root'){
alert(node.id);
alert(node.text);
alert(node.href);
}
});
*/
tree2.on('nodedrop',
function(e){

if(e.point=='append'){
alert('当前"【'+e.dropNode.text+'】"被放到目录"【'+e.target.text+'】"下！');
// var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append";
// var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);
}

else if(e.point=='above'){
//alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面！');
// var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above";
// var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);
}else if(e.point=='below'){
//alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"下面！');
// var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below";
// var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);
}

}
);

//绑定节点右键菜单功能
tree2.on('contextmenu',function(node,event){
// alert("node.id="+ node.id);
event.preventDefault(); //这行是必须的
rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
//alert(node.id);
// document.getElementById('rootid').value=node.id;
});


//定义右键菜单
var rightClick2 = new Ext.menu.Menu({
id :'rightClickCont',
items : [{
id:'rMenu1',
text : '编辑',
//增加菜单点击事件
handler:function (node){
//alert(node.dropNode.id);
}
}, {
id:'rMenu2',
text : '删除'
}, {
id:'rMenu3',
text : '菜单3'
}]
});



// render the tree
tree2.render();
root2.expand();





});
</script>
</head>
<body>
<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>
<div id="tree-div2" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>
</body>
</html>


test.json:
[{
"children" : [{
"children" : [],
"cls" : "file",
"id" : 11,
"leaf" : true,
"text" : "S600"
}, {
"cls" : "file",
"id" : 12,
"leaf" : false,
"text" : "SLK200",
"children" : [{
"cls" : "file",
"id" : 13,
"leaf" : true,
"text" : "mytest",
"children" : null
}]
}],
"cls" : "folder",
"id" : 10,
"leaf" : false,
"text" : "Benz"
}, {
"children" : [{
"children" : [],
"cls" : "file",
"id" : 21,
"leaf" : true,
"text" : "325i"
}, {
"children" : [],
"cls" : "file",
"id" : 22,
"leaf" : true,
"text" : "X5"
}],
"cls" : "folder",
"id" : 20,
"leaf" : false,
"text" : "BMW"
}]
wuzijingaip
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ext.tree.TreeLoader附带封装的json类
01-05
Ext.tree 实例代码文件 并附带封装的json类 ，工程源码，相互指教！
Ext tree json Demo
06-25
Ext tree 实现的是一棵异步加载的Tree，完整Demo项目，导入Eclipse就可以运行
使用ExtJS2构造动态异步加载的树
JRQ 的博客
06-15 6071
标题：使用ExtJS2构造动态异步加载的树作者：JRQ 链接：http://blog.csdn.net/jrq/archive/2008/06/15/2549839.aspx 正文： 使用ExtJS2，以JSON（JavaScript Object Notation）TreeLoader 异步读取数据，构造一棵异步加载的树。  1. 下载ExtJS2，地址：
学习EXTJS框架并完成EXTJS+SSH2+JSON实现树形结构(一)
dowhathowtodo
06-16 123
自从一群牛人整出ExtJS这个框架之后，WEB世界就变得更加完美，特别是对追求唯美而却没有多少美术细胞的WEB程序员而言，Ext的出现弥补了他们这方面的缺陷，因为从此以后大多数的美工他们可以用程序来实现，插上了Ext的翅膀，摇身一变，突然你会发现他们居然真的一个个美感十足。 ...
Ext Js 4.x Tree从Json加载数据
HookBin的博客
04-01 645
var treePanel = Ext.create('Ext.tree.Panel', { renderTo: Ext.getBody(), listeners: { itemclick: function(v, r) { if (r.raw.data) console.
【ExtJS】Tree加载JSON数据源
sun80264629的专栏
02-20 610
Ext.onReady(function(){ // shorthand var Tree = Ext.tree; var tree = new Tree.TreePanel({ el:'tree-div', useArrows:true, autoScroll:true, anim...
Ext tree json 动态加载完美实例
08-15
用ext + xml文件 完成 ext tree panel 树结构。延迟加载，支持 多选 单选。前后台数据交互使用的是 json串，挺不错的
ext tree json 例子（不含EXT包）
02-10
ext tree json 例子（不含EXT包）
treejson.json
04-14
省市区3级数据，ID为全国数据
ext 动态tree json算法
cy609329119的专栏
12-23 411
protected List getTree(string userid,string node)         {            List tree = null;            DataBase db = new DataBase();            string sql = string.Empty;            if (userid == "")    
ext:初学（3） - Ext通过静态json创建tree
Aiken的自由世界
04-12 4287
效果： 源码:=====================================================================nav-tree.js   /* 菜单 */Ext.Tree = function() {   //--------第一棵树
Gwt-ext 递归生成 colum tree 的JSON
s_light的专栏
12-23 95
public String getRequirementJson() { List&lt;RequirementEntity&gt; requirementRoots = getRootRequirement(); StringBuffer buff = new StringBuffer(); StringBuffer b = new StringBuffer(); // ...
tree的json的生成方法
TinyForest的博客
01-06 446
前段时间工作中需要使用树，这一点，在前台用ext很好实现，只是这个tree的store的这个json在后台拼写的时候有些费了我的脑筋，下面总结一下，我发现很好用的一个方法： （哦，亲们，这些代码里，数据是从不同数据源获得的，所以在代码里体现了切换数据源的代码，如果你不需要切换数据源，没有必要这个做哦，只需要看sql的组成和返回list就行了。） sql: [code="java"] ...
ExtJS中的TreeStore如何添加json格式的数据
热门推荐
jcx5083761的专栏
12-13 1万+
Ext的帮助中写明了给treeStore绑定数据有两种方式，一种是root属性，code如下： root: { expanded: true, text: "My Root", children: [ { text: "Child 1", leaf: true }, { text: "Child 2", expanded: true, ch
如何从零训练多模态大模型（预训练方向）
2201_75499313的博客
06-12 1141
参考 Finetune LLaVA on Custom Datasets[13]将训练样本以列表的形式保存到 json 文件，其中每一个样本是一个字典，它至少包含三个字段：id：全局唯一的字符串image：图片的路径，可以是绝对路径，也可以是相对于image_folder的相对路径conversations：人类和语言模型的对话},},},...完成数据的处理后，修改 finetune.sh[14] 中的 data_path 参数（必须）以及其他想要调整的参数（可选，例如学习率）。
手机在网状态-手机在网状态查询-手机在网站状态接口
最新发布
lupai的博客
06-14 541
查询手机号在网状态，返回正常使用、停机、未启用/在网但不可用、不在网（销号/未启用/异常）、预销户等多种状态 直连三大运营商，实时更新，可查询实时在网状态 高准确率-实时更新，准确率99.99%接口地址：https://www.wapi.cn/api_detail/120/263.html。s_msg 否 Integer 手机状态中文说明：正常、停机、在网不可用、销号、 查无信息 正常。红色部分代表参数值，appid默认为1，请修改为自己的appid值，去我的应用查看以及密钥。如何设置hash验证。
Ext.tree.TreeLoader传参数以及异步加载
06-08
要在Ext.tree.TreeLoader中传参数，可以通过两种方式来实现： 1. 使用baseParams属性，将需要传递的参数以键值对的形式设置在该属性中，如下所示： ``` var treeLoader = new Ext.tree.TreeLoader({ url: 'your-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值