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......
相关推荐
2. **异步加载**: 在动态加载树中,数据通常不是一次性全部加载,而是通过异步请求获取。Extjs的TreeLoader或TreeStore负责处理这些请求,当用户展开节点时,会发送Ajax请求到服务器获取子节点数据。 3. **数据模型...
通过这个项目,开发者可以深入理解ExtJS的TreePanel组件,学习如何使用Ajax进行异步数据加载,同时也能掌握SSH框架在实际项目中的运用。此外,跨数据库操作的经验也是宝贵的,这有助于开发者应对不同环境下的数据...
1. **初始化TreePanel**:定义一个`TreePanel`,设置其`rootVisible`属性为`false`以隐藏根节点,`useAjax`属性为`true`启用异步加载。 2. **配置TreeLoader**:创建一个`TreeLoader`实例,设置其`dataUrl`属性为...
总结来说,EXTJS动态树支持checkbox全选是一个结合了EXTJS TreePanel组件、数据模型、事件处理和异步加载技术的功能实现,旨在提供用户友好的多选操作。通过这个功能,开发者可以构建出更加交互性强、功能丰富的Web...
总结来说,ExtJS的TreePanel提供了丰富的功能来展示和操作树形数据,结合异步加载,能够高效地处理大量数据。在实际应用中,我们需要根据需求选择合适的TreeNode类型,并确保数据获取过程的安全性。通过合理的配置和...
4. **动态加载数据**:对于拥有大量数据的树,可以使用异步加载,即当节点被展开时才请求其子节点数据。这可以通过设置`TreeStore`的`async`属性和配置`proxy`来实现。 5. **自定义节点模板**:如果需要自定义节点...
4. **树的加载和渲染**:通过调用`TreeStore.load`方法从服务器请求数据,数据加载完成后,TreePanel会自动渲染树结构。 5. **节点操作**:扩展树结构的常见操作包括展开、折叠节点,以及添加、删除和移动节点。...
总的来说,这个项目展示了如何将数据库中的数据通过JDBC获取,转换为JSON格式,然后利用ExtJS的动态加载机制在前端构建出可交互的树形结构。这涉及到前端与后端的交互、数据的序列化与反序列化,以及数据库操作等多...
ExtJs中的`Ext.data.Store`组件是与服务器进行数据交互的核心,它可以配置URL属性指向你的数据接口,以便异步加载数据。 1. **建立数据模型(Model)** 在ExtJs中,你需要定义一个数据模型(Model)来描述数据库中...
创建TreePanel实例时,指定了其所在元素、ID、自动滚动、动画效果、边框、拖放功能等属性,并定义了TreeLoader用于异步加载数据,数据源URL包含了动态参数`roleId`,这通常用于根据角色ID加载不同的树形结构。...
如果树数据很大,可以使用异步加载(lazy loading)。只需在`TreeStore`配置中指定`proxy`,并在服务器端提供数据接口。 6. **节点操作** EXTJS提供了丰富的API进行节点操作,如添加、删除、移动节点,以及展开、...
- 实例化`TreeLoader`,用于异步加载树节点数据。 - 创建`TreePanel`实例,配置其属性,包括宽度、高度、动画效果等。 - 定义事件处理器,如`treeClk`,用于处理树节点的点击事件。 #### 四、代码片段解析 ```...
动态树是一种可以实时加载或异步加载节点数据的树形结构,适用于显示大量层次化的信息。 在EXTJS中,动态树的实现主要依赖于`Ext.tree.Panel`类和`Ext.data.TreeStore`类。`TreeStore`负责管理树的数据源,而`...
5. **数据绑定**:当Ajax请求成功返回时,ExtJS的TreePanel会自动将数据绑定到树结构中。如果数据包含子节点,这些子节点也会被动态加载。 6. **监听事件**:可以添加监听器来处理用户点击树节点等交互事件。例如,...
如果需要异步加载,还需设置`loadMask`(加载遮罩)和`async`(异步加载标志)。 4. 自定义节点模板:通过`viewConfig`配置项,可以自定义节点的样式和行为,例如使用`tpl`和`indent`来控制节点的显示。 5. 绑定...
ExtJS 4.2 是一个流行的JavaScript框架,用于...以上就是关于在ExtJS 4.2中实现MVC模式下左菜单动态加载功能的基本步骤和关键知识点。实际开发中,还需要根据具体需求进行调整和完善,例如增加权限控制、错误处理等。
开发者可以通过配置`Ext.tree.TreeLoader`来决定数据的加载方式,如异步加载子节点,以及通过`TreePanel`的配置项定制外观和行为。 3. **图标和文本可定制**:默认情况下,树节点可能显示文件和文件夹图标,但...
EXTJS动态树是一种基于JavaScript的UI组件,用于在网页中构建可交互的树形结构数据展示。EXTJS是一个强大的前端框架,提供了丰富的组件库,包括表格、表单、树、图表等多种元素,使得开发者能够创建出功能丰富且用户...
如果数据需要从外部获取,如数据库或网络,应异步加载数据,并在加载完成后更新TreePanel。 4. **视图切换**:将焦点切换到新的TreePanel,确保其可见。在Swing中,可以通过设置组件的可见性(setVisible(true/...
在页面中,定义一个TreePanel,设置其store属性为一个AjaxStore,用来异步加载JSON数据。AjaxStore会向服务器发送请求,接收返回的JSON数据并自动构建树结构。 6. **配置AjaxStore**:AjaxStore需要配置URL(指向...