ExtJS2.2树的级联选择

关于extjs的下拉框二级联动 最近新接触的extjs,需要写下拉框,实现城市与所在街道的联动。用了两种方法。一种是应用filterBy方法 ,另一种是应用store的proxy直接查找。数据量大的时候使用第二种方法。 阅读详情

在做项目的时候要用到树的级联选择,在我的影响中貌似ExtJs 2.2没有自带的级联选择。然后就有了下面的代码:

tree.on('checkchange',function(node,checked){
	selParent(node,checked);
	selChild(node,checked);
},tree);
//这个方法是选择父节点,自动选中所有的子节点
function selParent(node,checked){

	if (node.hasChildNodes()) { 
		node.eachChild(function(child) { 
			child.attributes.checked = checked; 
			var cb = child.ui.checkbox; 
			if (cb){
				cb.checked = checked;
				selParent(child, checked); 
			}
		}); 
	} 

}
//这个方法是选择子节点,自动选中父节点的父节点 
function selChild(node, checked){
	if(checked){
		var parentNode = node.parentNode;
		if(parentNode != undefined){
			parentNode.attributes.checked = checked; 
			var cb = parentNode.ui.checkbox; 
			if(cb){
				cb.checked = checked;
				selChild(parentNode, checked);
			}
		}
	}else{
		var flag = false;
		if(node == null){
			return;
		}
		var parentNode = node.parentNode;
		if(parentNode != undefined){
			if(parentNode.hasChildNodes()){
				parentNode.eachChild(function(child){
					var cd = child.attributes.checked;
					if(cd == true){
						flag = true;
					}
				});
			}
		}
		if(!flag){
			parentNode.attributes.checked = checked;
			var cb = parentNode.ui.checkbox;
			if(cb){
				cb.checked = checked;
				selChild(parentNode, checked);
			}
		}
	}
}


实现ExtJS TreePanel复选框的级联选择功能 ExtJS是由Sencha公司开发的一款成熟的JavaScript框架,以其丰富的组件库和数据处理能力在前端开发领域占有重要地位。本章将重点介绍ExtJS框架中的TreePanel组件,它是一个用于展示层级化数据的界面元素,能够模拟现实中的树状结构,非常适合用在需要展示文件系统、组织架构等层级信息的场景中。TreePanel组件的核心功能包括了节点的动态加载、展开和收缩,以及节点间的基本交互操作。它通过可配置的视图和事件机制,为用户提供了一个直观且功能丰富的数据展示界面。 阅读详情

相关推荐

EXTJS4 组件实战:树、Grid、表单与查询功能开发

本文还有配套的精品资源,点击获取 简介:EXTJS4提供了一系列组件,如树、网格、表单和查询,以构建交互式Web应用程序。本教程将详细讲解如何实现这些组件,包括树的动态加载与交互、网格的数据操作与插件应用、表单的字段类型与验证,以及查询功能的过滤和搜索。实际案例将展示如何综合运用这些组件,创建如图书管理系统等企业级应用,强调理解EXTJS的MVC架构及组件定制化的重要性。 ...

weixin_30415591的博客 1251

栏目 右键克隆 栏目树调整顺序 遮罩层

遮罩层 #pageOverlay { position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%;  background:#000; filter:alpha(opacity=50); opacity:0.50; } function layerMaskShow() {       docum

okkeqin的专栏 1670

Windsurf 入门指南:从安装到实战(免费AI IDE新选择)

本文是Windsurf AI IDE的详细入门指南,涵盖从下载安装到核心功能实战的全过程。通过对比分析,文章指出Windsurf凭借其免费、小白友好的特性及强大的上下文感知能力,成为学习编程和提升开发效率的新选择,特别适合零基础开发者和寻求高效AI编程工具的开发者。

weixin_29237635的博客 854

ExtJS 复选框的tree 结点的级联选择

//判断是否有子结点被选中 var childHasChecked = function(node) { var childNodes = node.childNodes; if(childNodes || childNodes.length>0){ for(var i=0;i<childNodes.length;i++

3月3的风筝 2200

微调BERT进行中文文本分类任务(Pytorch代码实现)

BERT(Bidirectional Encoder Representation from Transformers)是2018年10月由Google AI研究院提出的一种预训练模型。其模型结构由多层Transformer的Encoder堆叠而成,在大规模语料中进行预训练后,迁移到下游任务,仅进行参数微调训练,就能显著提升性能。本文聚焦于微调中文BERT进行新闻标题分类任务的代码实现。

Iswayzw的博客 1万+

用大白话讲解Carplay(原创)

用大白话讲解Carplay: Carplay是美国苹果公司开发的一套服务,用户通过这套服务可以将iPhone与车载系统连接,然后在车载大屏上操作使用iPhone手机。个人理解,Carplay不能叫车载系统,不是操作系统,只能算一种服务。让你在车上的大屏上使用iPhone,这样用起来更方便,不需要在手机小屏幕上操作。基于这一点,有些人也说Carplay就是个投屏的功能,将手机屏幕投屏到了车机大屏上。可以简单这么理解,但是并不只是投屏这么简单,如果只是投屏的话,车子只是起到了一个显示器的功能,其实不止,手机和

cici2013的专栏 2万+

extjs treepanel的ctrl、shift多选、连选功能实现

最近需要实现一个树的多选连选功能,但发现extjs的多选模型MultiSelectionModel只提供了类似ctrl的多选功能,并没有提供shift连选的功能。 网上也没有关于实现此功能的例子,于是自己重写了onNodeClick方法,供大家参考。 // 存放第一次点击的节点id var node1 = null; var mst=new Ext.tree.MultiSelectionMo

小雷的博客 2737

深入解析EXI协议在ISO15118-2命令测试中的编解码实践

本文深入探讨了EXI协议在ISO15118-2车桩通信标准中的关键作用与实践方法。EXI编解码测试是确保通信准确性与效率的核心环节,文章详细介绍了从搭建测试环境、选择工具库到编写完整测试代码的全过程,并分析了结果差异的常见原因与调试技巧,为电动汽车充电系统的开发者提供了实用的技术指南。

potato的博客 1048

eXtjs4下拉树支持单选复选级联选择 [复制链接]

效果图.不带checked的json数据格式只支持单选带jchecked的json数据的单选带checked的json数据的多选,可支持级联操作,级联分为级联父节点,级联子节点,两者都级联封装基类代码:comboxtree.js[html]view plaincopyExt.define("Ext.ux.comboboxtree", { extend: "Ext.f...

weixin_33979203的博客 167

奔图M6700-M6800-M7100-M7200 系列打印机拆解教程?

奔图M6700-M6800-M7100-M7200 系列打印机拆解教程?

m0_58098052的博客 1591

【LaTeX】IEEE会议模板中使用BibTex插入文献(解决报错:Something‘s wrong--perhaps a missing \item. \end{thebibliography}

使用IEEE会议论文LaTeX模板时遇到的一个错误,问题描述为:使用Texstudio编译LaTeX模板报错,报错信息提示为。出现的原因为IEEE会议论文模板自带的参考文献引用方式为手动插入,即不使用格式的参考文献,手动将参考文献调整为合适格式,然后粘贴到文本中,我准备将其换成方法引用参考文献。我的替换步骤为删除原始参考文献对应内容,即模板中的: 将以下函数添加到原始参考文献对应位置,对应上文新建的文件。 再次编译出现报错 删除文件夹中的文件 修改模板中的引用名称 引用方法为: 将 替换为 再次编译——

TangPlusHPC的博客 9905

ExtJS 树形结构的级联选择

[code="js"] tree.on('checkchange', function(node, checked) { selParent(node, checked); selChild(node, checked); }, tree); //这个方法是选择父节点,自动选中所有的子节点 function selParent(n...

iteye_18684的博客 237

坐标偏移不一致或瓦块重名的多个OSGB工程的融合

介绍如何使用实景三维小助手OSGBLab对坐标偏移不一致或瓦块重名的多个OSGB工程的融合

OSGBLab的博客 3232

AI生成本地跑:Copilot+MCP打造稳定自动化测试实战

自动化测试是软件质量保障的核心环节,然而AI生成的测试代码常因选择器过期、弹窗遮挡等问题无法直接落地。本文从自动化测试基础原理出发,讲解如何利用Copilot将自然语言需求翻译为测试脚本,再通过MCP协议驱动真实浏览器执行,形成“AI翻译、MCP驾驶、本地运行”的高效闭环。方案覆盖环境配置、非预期弹窗动态处理、超时与幻觉断言排查等工程实践,帮助测试团队在无需云端服务的情况下,实现稳定可复用的UI回归与接口冒烟测试。适合正在探索AI辅助测试落地的研发与测试人员参考。

weixin_33978044的博客 144

即梦(Dreamina)技术浅析(六):多模态生成模型

多模态生成模型的目标是结合不同模态的数据(如文本和图像),生成新的视觉内容。其核心思想是利用文本描述引导图像或视频的生成过程,使得生成结果能够准确反映用户的意图。

m0_75253143的博客 1333

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

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

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

ExtJs选择框级联

ExtJS TreeGrid 添加监听事件 <Listeners> <Listener name="checkchange" function="checkLink"/> </Listeners> 两种方法处理级联 第一种 function checkLink (node, checked) { cascade_childnode(node, checked); } // 树形选择:级联选中下级 function cascade_childnode(no

daring_xiaowang的博客 478

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

extjs中 combobox级联

1、首先定义storeJs代码//**测试下拉框级联**   var storedm = new Ext.data.Store({   //队名称下拉框        proxy: new Ext.data.HttpProxy({               url: ../servlet/CommonMethod?command=getdm 

EasyJS 一个简单的JS框架 2549

ExtJs checkbox树

var Tree_Dept; var Tree_Dept_Loader; var checkchange = false; Ext.onReady(function() { Ext.BLANK_IMAGE_URL = '/js/extjs/resources/images/default/s.gif'; //级联选择设...

zlq636785的专栏 210

ExtJS 省、市、县 级联 示例

ExtJS 省、市、县级联示例 1.程序代码清单: Test var dataProvince = [ ['河北', '河北'], ['内蒙古', '内蒙古'] ]; var dataCityHebei = [ ['唐山', '唐山'], ['秦皇岛', '秦皇岛']

TKD03072010的专栏 4355

extjs tree check 级联选择

extjs4 tree check 级联选择 实现效果:关键代码: function changeAllNode(node, isCheck) { allChild(node, isCheck); allParent(node, isCheck); function allChild(nodec, isCheckc) { var chileNodes = n

LinBSoft的专栏 2469

ExtJS树的选择操作

//树 var treePanel = new Ext.tree.TreePanel({ id:'ptree', region:'west', layout:'anchor', border:false, rootVisible: false, root:{}, listeners:{ render: function() { authorityTree(t

XT先生 711

extjs实现级联以及节点的模糊查询

Ext.tree.TreeCheckNodeUI 前面是通过这个组件实现的父节点和子节点的级联 但是源码貌似很复杂个人认为,因此不需要通过这个组件实现. 通过以下这两个函数实现类似的功能.  visitAllTreeNodeFun(node, checked);            if (node.parentNode &amp;&amp; node.parentNode.getU...

gt2008gt的博客 304

ExtJs 在gridPanel中每一行内combobox的二级联动

ExtJs 在gridPanel中每一行内combobox的二级联动 前置 extjs版本 3.X 前端没有html代码,都是由extjs写就,最后渲染而成 需求 一个gridPanel中的每一行都有两列是combobox,这两个combobox是联动的,且行与行之间不应该相互影响 效果如图,显示的是第一级combobox 初始解决方法 为第一个combobox添加“select”事件,将选...

qq_35234003的博客 849

ExtJs combo的二级联动

二级联动主要是监听一级下拉框的取值,然后将该值作为二级下拉框请求数据时参数。下拉框和其对应的数据源都进行单独定义

执子之手 649

下拉列表的二级联动(ExtJs)

//下面的方法是创建一个下拉列表的二级联动组件,并扔到原先的面板中expansion : function(cfg){ var typeCombStore = new Ext.data.JsonStore({     //一级列表数据 fields : ['value', 'text'], data : [{ 'value' : 1, 'text' : '一类...

nerveboy学习笔记 1865
上一篇: spring3.1.x源码编译并导入eclipse
下一篇: Cannot change version of project fact Dynamic Web Module to 3.0解决方法
HingKwan
博客等级 码龄17年 51粉丝 86原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值