`

Extjs中TreePanel树异步加载数据的步骤

阅读更多

Extjs中TreePanel树异步加载数据的步骤

 

1.定义根节点root:

var myRoot = new Ext.tree.AsyncTreeNode({
     text:"根节点",
     draggable:false,   //根节点不可拖动
     expanded:true,    //根节点展开
});

 

2.定义数据加载器TreeLoader:

var myLoader = Ext.tree.TreeLoader({
     dataUrl:"getTree.do?doType=getTreeById",   
     baseParams:{name:""},
     baseAttrs:{uiprovider:Ext.tree.TreeCheckNodeUI}//必须有该项,不然树节点无法出现选择框
});

注意:url属性名称为:dataUrl  (store的是url)

 

3.定义数据加载前触发方法:beforeload

myLoader.on("beforeload",function(treeLoader,node){
      treeLoader.baseParams.pid = node.id;
},this);

4.定义树面板,用于显示数据:

var myTree = new Ext.tree.TreePanel({
	root: myRoot, 
	loader:myLoader,
	checkModel: 'multiple',   	//复选框多选
	animate:false,				//无动画
	onlyLeafCheckable: true,
	enableDD:false,    			//子节点不能拖动
	border:false,           	
	rootVisible:true,  			//根节点可见
	autoScroll :true,
	lines: false,				//节点间用线连接
	tbar:[
	      {
	    	  xtype:'label',
	    	  text:"文件号:"
	      },{
	    	  xtype:"textfield",
	    	  id:"serchFor5",
	    	  allowBland:true,
	    	  width:120
	      },{
	    	  text:"查找",
	    	  iconCls:"filter",
	    	  handler : function(){
		        	cNode = departTree.getSelectionModel().getSelectedNode();
		        	var selectedNodeID;
		        	if(cNode){
		        		selectedNodeID = cNode.id;
		        	}
		        	var searchFor = Ext.getCmp("searchFor5").getValue();
		    		if(searchFor=='') return;
		    		var startNodeID = null; //New search 新的查找
		    		if(lastSearch != '' && lastSearch == searchFor) {// Find next 查找下一个
		    			if(selectedNodeID && selectedNodeID != 'tree-root'){
		    	 			startNodeID = selectedNodeID ;
		    			}
		        	}
		    	 	lastSearch = searchFor;
		    		//调用服务端查找
		    		Ext.Ajax.request({
		    			url : 'getIndustry.base?doType=searchPolicy',
		    			params : {searchFor: searchFor, startID :startNodeID},
		    			success : onSearchSuccessCallback,
		    			failure : function(response,option) {
		    				Ext.Msg.alert("失败","查找过程发生错误!");		
		                }
		    		});
		        }
	      }
  	]
});

 

 
           
 

 

后台获取数据代码:TODO......

 

  • 大小: 7.1 KB
分享到:
评论

相关推荐

    Extjs 动态加载树

    2. **异步加载**: 在动态加载树中,数据通常不是一次性全部加载,而是通过异步请求获取。Extjs的TreeLoader或TreeStore负责处理这些请求,当用户展开节点时,会发送Ajax请求到服务器获取子节点数据。 3. **数据模型...

    extjs+s1sh 实现树的加载

    通过这个项目,开发者可以深入理解ExtJS的TreePanel组件,学习如何使用Ajax进行异步数据加载,同时也能掌握SSH框架在实际项目中的运用。此外,跨数据库操作的经验也是宝贵的,这有助于开发者应对不同环境下的数据...

    extJs 2异步树 源程序.

    1. **初始化TreePanel**:定义一个`TreePanel`,设置其`rootVisible`属性为`false`以隐藏根节点,`useAjax`属性为`true`启用异步加载。 2. **配置TreeLoader**:创建一个`TreeLoader`实例,设置其`dataUrl`属性为...

    EXTJS动态树支持checkbox 全选

    总结来说,EXTJS动态树支持checkbox全选是一个结合了EXTJS TreePanel组件、数据模型、事件处理和异步加载技术的功能实现,旨在提供用户友好的多选操作。通过这个功能,开发者可以构建出更加交互性强、功能丰富的Web...

    JavaScript的ExtJS框架中数面板TreePanel的用法实例解析_.docx

    总结来说,ExtJS的TreePanel提供了丰富的功能来展示和操作树形数据,结合异步加载,能够高效地处理大量数据。在实际应用中,我们需要根据需求选择合适的TreeNode类型,并确保数据获取过程的安全性。通过合理的配置和...

    Extjs树Demo

    4. **动态加载数据**:对于拥有大量数据的树,可以使用异步加载,即当节点被展开时才请求其子节点数据。这可以通过设置`TreeStore`的`async`属性和配置`proxy`来实现。 5. **自定义节点模板**:如果需要自定义节点...

    Extjs 自定义树结构实现以及动态表头实现

    4. **树的加载和渲染**:通过调用`TreeStore.load`方法从服务器请求数据,数据加载完成后,TreePanel会自动渲染树结构。 5. **节点操作**:扩展树结构的常见操作包括展开、折叠节点,以及添加、删除和移动节点。...

    Extjs 动态树 数据库

    总的来说,这个项目展示了如何将数据库中的数据通过JDBC获取,转换为JSON格式,然后利用ExtJS的动态加载机制在前端构建出可交互的树形结构。这涉及到前端与后端的交互、数据的序列化与反序列化,以及数据库操作等多...

    ExtJs 连接数据库并且生成动态树

    ExtJs中的`Ext.data.Store`组件是与服务器进行数据交互的核心,它可以配置URL属性指向你的数据接口,以便异步加载数据。 1. **建立数据模型(Model)** 在ExtJs中,你需要定义一个数据模型(Model)来描述数据库中...

    带复选框的 ExtJs tree

    创建TreePanel实例时,指定了其所在元素、ID、自动滚动、动画效果、边框、拖放功能等属性,并定义了TreeLoader用于异步加载数据,数据源URL包含了动态参数`roleId`,这通常用于根据角色ID加载不同的树形结构。...

    EXTJS 树的实例

    如果树数据很大,可以使用异步加载(lazy loading)。只需在`TreeStore`配置中指定`proxy`,并在服务器端提供数据接口。 6. **节点操作** EXTJS提供了丰富的API进行节点操作,如添加、删除、移动节点,以及展开、...

    Extjs自定义组件-下拉树

    - 实例化`TreeLoader`,用于异步加载树节点数据。 - 创建`TreePanel`实例,配置其属性,包括宽度、高度、动画效果等。 - 定义事件处理器,如`treeClk`,用于处理树节点的点击事件。 #### 四、代码片段解析 ```...

    EXTJS动态树的实现举例示例代码

    动态树是一种可以实时加载或异步加载节点数据的树形结构,适用于显示大量层次化的信息。 在EXTJS中,动态树的实现主要依赖于`Ext.tree.Panel`类和`Ext.data.TreeStore`类。`TreeStore`负责管理树的数据源,而`...

    extjs spring tree ajax

    5. **数据绑定**:当Ajax请求成功返回时,ExtJS的TreePanel会自动将数据绑定到树结构中。如果数据包含子节点,这些子节点也会被动态加载。 6. **监听事件**:可以添加监听器来处理用户点击树节点等交互事件。例如,...

    extjs tree

    如果需要异步加载,还需设置`loadMask`(加载遮罩)和`async`(异步加载标志)。 4. 自定义节点模板:通过`viewConfig`配置项,可以自定义节点的样式和行为,例如使用`tpl`和`indent`来控制节点的显示。 5. 绑定...

    Extjs4.2 MVC 左菜单动态加载功能

    ExtJS 4.2 是一个流行的JavaScript框架,用于...以上就是关于在ExtJS 4.2中实现MVC模式下左菜单动态加载功能的基本步骤和关键知识点。实际开发中,还需要根据具体需求进行调整和完善,例如增加权限控制、错误处理等。

    Extjs教程_第八章_Tree(树)(1)

    开发者可以通过配置`Ext.tree.TreeLoader`来决定数据的加载方式,如异步加载子节点,以及通过`TreePanel`的配置项定制外观和行为。 3. **图标和文本可定制**:默认情况下,树节点可能显示文件和文件夹图标,但...

    EXTJS动态树的实现

    EXTJS动态树是一种基于JavaScript的UI组件,用于在网页中构建可交互的树形结构数据展示。EXTJS是一个强大的前端框架,提供了丰富的组件库,包括表格、表单、树、图表等多种元素,使得开发者能够创建出功能丰富且用户...

    2个treepanel相互切换

    如果数据需要从外部获取,如数据库或网络,应异步加载数据,并在加载完成后更新TreePanel。 4. **视图切换**:将焦点切换到新的TreePanel,确保其可见。在Swing中,可以通过设置组件的可见性(setVisible(true/...

    extjs tree + json+struts2示例源代码

    在页面中,定义一个TreePanel,设置其store属性为一个AjaxStore,用来异步加载JSON数据。AjaxStore会向服务器发送请求,接收返回的JSON数据并自动构建树结构。 6. **配置AjaxStore**:AjaxStore需要配置URL(指向...

Global site tag (gtag.js) - Google Analytics