ExtJS06:树型Tree相关操作

Extjs6中利用treePicker实现的下拉树中 利用extjs6自带的treePicker插件,实现下拉树的效果 立即下载
1.树形代码如下:
this.treepanel = new Ext.tree.TreePanel({
title : '指标参数分类',
region : 'west',
collapsible : true,
autoScroll : true,
split : true,
height : 800,
width : 180,
id : 'Unim_AssTarPar_Tree_Id',
tbar : new Ext.Toolbar({
items : [{
xtype : 'button',
iconCls : 'btn-refresh',
text : '刷新',
handler : function() {
var tree = Ext.getCmp('Unim_AssTarPar_Tree_Id');
tree.body.mask(__maskLoading, 'x-mask-loading');
tree.root.reload();
tree.root.collapse(true, false);
tree.root.expand(false, false, function() {
tree.body.unmask();// 全部展开之后让蒙版消失
});
}
}, {
xtype : 'button',
text : '展开',
iconCls : 'btn-expand',
handler : function() {
var tree = Ext.getCmp('Unim_AssTarPar_Tree_Id');
tree.expandAll();
}
}, {
xtype : 'button',
text : '收起',
iconCls : 'btn-collapse',
handler : function() {
var tree = Ext.getCmp('Unim_AssTarPar_Tree_Id');
tree.collapseAll();
}
}]
}),
autoScroll : true,
animate : true,
// checkModel : 'multiple',
containerScroll : true,
lines : true,// 节点之间连接的横竖线
rootVisible : false,// 是否显示根节点
collapsible : true,
split : true,
// cascadeCheck : 'all',
border : false,
frame : false,
loader : new Ext.tree.TreeLoader({
url : __ctxPath + '/unim/listTreeUnimAssTarPar.do'
}),
root : new Ext.tree.AsyncTreeNode({
}),
listeners : {
scope:this,
'click' : this.clickNode                                            //监听单击事件
}
});

2.单击事件代码如下:
clickNode:function(node) {
var users = Ext.getCmp('AssetCanShuViewGrid');            //左侧表格
var store = users.getStore();                                                //获取store对象
store.url = __ctxPath + "/unim/listUnimAssTarPar.do";    //指定url
var nodeId = node.id;
store.baseParams = {                                                             //给store指定基本参数
'treeParam' : nodeId
};
store.reload({                                                                        //重新加载表格,并传递分页参数
params : {
start : 0,
limit : store.baseParams.limit
}
});
},

3.后台代码,拼接树形所需要的串
public String listTree() {
QueryFilter filter=new QueryFilter(getRequest());
//     filter.addSorted("orderno", QueryFilter.ORDER_ASC);
List<UnimAssets> list= unimAssetsService.getAll(filter);//获得数据集
StringBuilder sb = new StringBuilder();
sb.append("[{id:'0',text:'指标参数分类树',expanded:true,children:[");    //指定根节点
int iCount = list.size();
for(int i=0;i<iCount;i++) {
sb.append("{id:'asId"+list.get(i).getAssetsId()+"',text:'"+list.get(i).getAssetsName()+"',"+findChild(list.get(i).getAssetsId()));
if(i<iCount-1) {
sb.append(",");
}
}
sb.append("]}]");                                                                                        //指定根节点
jsonString=sb.toString();
System.out.println(jsonString);
return SUCCESS;
}

/*
 * 寻找子根节点
 */
public String findChild(Long assetsId) {
StringBuffer buff1 = new StringBuffer("");
List<UnimAssetsTarget> list = unimAssetsTargetService.findByParentId(assetsId);
if (list.size() == 0) {
buff1.append("leaf:true}");
return buff1.toString();
} else {
buff1.append("children:[");
for (UnimAssetsTarget target : list) {
buff1.append("{id:'trId" + target.getTargetId() + "',text:'" + target.getTargetName() + "',");
buff1.append("leaf:true},");
//                         buff1.append(findChild(target.getTargetId()));            //如果树形超过两级,则递归
}
buff1.deleteCharAt(buff1.length() - 1);
buff1.append("]}");
return buff1.toString();
}
}
Extjs6 最简单的示例java版 Extjs6 最简单的示例java版Extjs6 最简单的示例java版Extjs6 最简单的示例java版Extjs6 最简单的示例java版Extjs6 最简单的示例java版Extjs6 最简单的示例java版 立即下载

相关推荐

三维视觉智能焊接系统:免示教技术的工业应用实践

本文深入探讨了三维视觉智能焊接系统中免示教技术的工业应用实践。该系统通过三维视觉相机实时扫描工件,自动识别焊缝并生成轨迹,将产线换型时间从数小时缩短至几分钟,显著提升了生产柔性。文章详细解析了其核心硬件、算法及工厂部署流程,并展望了与数字孪生、工艺智能化融合的未来趋势。

weixin_29091105的博客 432

(转)ExtJS6 TreePanel树节点合上展开显示不同图标

TreePanel的节点如包含子节点,可在展开/合上时显示不同的图标,增强客户端效果,提高用户体验。非常简单,使用TreePanel的两个事件:beforeitemexpand和beforeitemcollapse。 Ext.define('MyTreePanel_cls', { extend: 'Ext.tree.Panel', height: 400, width: 30...

seasidexin的专栏 635

交流异步机VVVF变频控制simulink/matlab仿真分析

VVVF,是Variable Voltage and Variable Frequency的缩写, 意为:可变电压、可变频率,也就是变频调速系统。 VVVF控制的逆变器连接电机,通过同时改变频率和电压,达到磁通恒定(可以用反电势/频率近似表征)和控制电机转速(和频率成正比)的目的,所以多应用在变频器中,属于工业自动化领域。

Ezekiel_Mok的博客 4209

ExtJs6 TreeGrid(级联选择树)

ExtJs6 TreeGrid var treeGrid = Ext.create("Ext.tree.Panel", { flex: 1, store: { type: 'tree', fields: ['Name', 'ID', 'Type'] }, id: 'teleTreeGrid', useArrow...

seasidexin的专栏 1272

基于FPGA的图像预处理系统(图)

 北京机械工业学院 韩娟娟 邓文怡 娄小平 由于获取图像的工具或手段的影响,使获取图像无法完全体现原始图像的全部信息。因此,对图像进行预处理就显得非常重要。预处理的目的是改善图像数据,抑制不需要的变形或者增强某些对于后续处理来说比较重要的图像特征。通常根据预处理目的的不同,把预处理技术归为图像增强技术和图像分割技术两类。图像对比度处理是空间域图像增强的一种方法。由于图像灰度范围狭窄会使

lyzhangxianglove的专栏 1780

Darknet-Yolov3 移植过程

本教程面向使用寒武纪平台进行深度学习推理任务的开发者。针对当前主流检测网络darknet-yolov3,进行寒武纪平台的移植。开发者对照移植过程,能够利用寒武纪智能处理器设备完成多种场景的目标检测任务。本实验代码基于 Neuware 1.6.1 与 Python 2.7 环境。

shengyin714959的博客 438

extjs6.2 treestore 增加和修改记录

表单提交后将数据放到store中,用add不行,得用appendChild,代码: var r = form.getRecord(); var v = form.getValues(); v.iconCls = v.Icon;//设置treemodel的定制属性...

随记 2122

74、光谱成像在电子内窥镜及色彩理论中的应用

本文探讨了光谱成像在电子内窥镜中的应用及其与色彩理论的深度融合。通过分析FICE技术、色彩再现模型及胃黏膜光谱测量,展示了光谱信息在提升医学诊断准确性方面的潜力。同时,系统阐述了颜色的物理属性、标准表示方法、同色异谱现象、颜色测量技术(密度法与比色法)以及CIELAB等均匀颜色空间的构建原理。结合流程图与对比表格,梳理了从光信号获取到颜色处理的完整路径,并展望了人工智能与新型视觉模型在未来医疗成像与色彩科学中的发展方向。

g2h3i4j5的博客 152

[Extjs6] treepanel 对树的模糊搜索展开

/*  *  根据首匹配节点展开树的目录  *  root: 树根节点  *  parentNodes: 父节点集合  *  regExp: 正则验证   *  text:字段名  */ function searchTree(root,parentNodes,regExp,text){     log("current node..");     log(root);    

u010989191的博客 3314

短信验证码逻辑漏洞学习——各种绕过姿势技巧

短信验证码逻辑漏洞学习——各种绕过姿势技巧

记录并分享学习安全的知识点.. 2556

【专栏必读】王道考研408计算机网络+湖科大教书匠计算机网络+网络编程万字笔记使用说明及章节导航

本文档汇总了王道考研408计算机网络和湖科大教书匠计算机网络课程的重点内容,包括计算机网络体系结构、物理层、数据链路层、网络层、传输层和应用层的详细讲解。通过ISO/OSI和TCP/IP模型,深入探讨了通信基础、介质访问控制、IP地址、TCP/UDP协议、流量控制和网络编程等关键概念。此外,还提供了Linux网络编程实践,帮助读者巩固理论知识

快乐江湖的博客 2万+

ExtJs6中利用TreePicker实现下拉树

最近做的项目中有用到Extjs6,自己特意也做了程序用来练习使用Extjs6。在此记录一下使用Extjs6中遇到的问题。 如果有使用过Extjs的小伙伴们,一定知道在Extjs中有个combobox控件,这个主要用来下拉显示数据。但是如何实现在下拉时展示树形结构呢?今天就来介绍Extjs中的treePicker插件,该插件扩展了combobox,使下拉时展示出来的是个树形结构。先来看看效果图: ...

1644

LeRobot X-VLA:首个适用于任意机器人、任意任务的软提示机器人基础模型

X-VLA是一种基于软提示的视觉-语言-动作模型,通过可学习嵌入向量编码不同机器人配置,实现跨平台统一控制。该框架采用两阶段训练:先在29万次多平台任务中学习通用策略,再通过微调少量参数(仅1%)适配新机器人。实验表明,0.9B参数的X-VLA在6个仿真和3个真实平台上表现优异,如LIBERO任务达93%成功率,布料折叠任务100%完成。其核心创新是将硬件差异视为"任务",用软提示引导Transformer处理异构数据,为机器人基础模型提供可扩展方案。

2506_90492529的博客 1241

extjs6 异步树

store定义: Ext.define('permissionStore', { extend: 'Ext.data.TreeStore', defaultRootId: ' ', autoLoad:true, model: 'permissionModel', parentIdProperty: 'FartherId', nodeParam:...

随记 1339

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

[Extjs6]treepanel内数据的过滤实现

//菜单树过滤 searchTextChanged:function(node,newValue){ //console.log("searchTextChanged"); //console.log(this.lookupReference('treelist')); alert('searchTextChanged'); v

u010989191的博客 2402

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

ExtJS 表格 树结构

Ext.require(['*']); Ext.define('User', { extend: 'Ext.data.Model', fields: [ 'name', 'email', 'phone' ] }); var userStore = Ext.create('Ext.data.Store', { model: 'User', data: [...

玉无瑕 854

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

EXTJS 4 树形表格组件使用示例

TreeStore中使用了一个 Ext.data.NodeInterface来表示数的节点;在TreeStore的setRootNode方法中会调用NodeInterface的decorate方法向TreeStore的model增加一些属性,这些属性是在展示树时必须使用的.这些属性详见如下:

蜗牛跑的快 5409

Extjs6 Tree 树数据筛选

前端使用ExtJS6,要求在菜单树上对菜单树的数据进行筛选,提高用户的体验。 现在功能已经完成,这里记录下来便于后面遇到类似问题作为参考,会贴上源码和官方Demo提供参考的源码。 对Tree的筛选,有两种情况 ,一种是Tree的DataSource已经加载完毕,和Tree进行了互相绑定,不...

chouchenjiu4843的博客 507

[Extjs6] 线性数组的形式返回一个TreeStore数据

采用这种方式就不用再为封装children而吃力,这种处理方式应该会相对方便点。

u010989191的博客 1630

Extjs6 treepanel store无法加载请求后台URL数据bug

使用mvc(或者说mvvm吧)方式使用Extjs6框架,单独写的treestore配置给treepanel无法正常远程加载数据.   然后搜索到这样一篇博文: https://www.oschina.net/question/189633_2142590   这位博主找到了bug出处---treepanel源代码中的applyStore()方法自动把treestore

强哥的博客 1697

Extjs tree树的生成

泄露超时时间必填,根据访问量和实际情况填写,防止数据源泄露。此处900是系统访问量小,访问量大可改小

qq_15508731的博客 273

Extjs6的TreePane无法使用iconCls图标显示

Extjs6中theme-triton主题下TreePane如果数据存在iconCls导致图标直接不显示,这个是theme-triton主题下的一个bug问题. 解决办法: 在ext/classic/theme-triton/overrides下添加tree目录加入Column.js文件(完整路径:ext/classic/theme-triton/overrides/tree/Column.js

a282919088的博客 2552

extjs6.0 treepanel设置展开和设置选中

var treePanel = { id: "treeUrl", xtype: "treepanel", useArrows: true, // 节点展开+,-图标全部改为小三角 ...

weixin_33739627的博客 1285

extjs6 treepicker 下拉树

model定义: Ext.define('permissionModel', { extend: 'Ext.data.TreeModel', idProperty:'Id', fields: [ { name: 'ControllerName', mapping: function (data) { ...

随记 2712
上一篇: ExtJS05:动态构造复选框组CheckboxGroup
下一篇: ExtJS07:事件监听处理
江南侠客
博客等级 码龄16年 1粉丝 18原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值