extjs4.0 treepanel节点的选中、展开! 数据的重新加载
1.extjs4.0API较3.0有非常大变化
2.多级子父节点的选中和展开。
3.数据的重新加载。tree.getStore().load
4.节点的移除,从树中根据ID获取节点 tree.getStore().getNodeById();
5.获取选中的节点,tree.getView().getChecked();
6.数据为异步加载,设置节点选中,tree.getStore().getNodeById('').set({checked:true});
- <script type="text/javascript">
- Ext.require([
- 'Ext.tree.*',
- 'Ext.data.*',
- 'Ext.window.MessageBox',
- 'Ext.tip.*'
- ]);
- Ext.onReady(function() {
- /*
- * 可以获取选中节点的ID,以及TEXT
- *
- */
- var checkedNodes = {
- _data:{},
- update:function(id,text,checked){
- if(checked){
- this.add(id,text,checked);
- }else if(!checked){
- this.delById(id);
- }
- },
- add: function(id,text){
- if(!this._data[id]){
- this._data[id] = {'id':id,'text':text};
- }
- },
- delById:function(id){
- if(this._data[id]){
- delete this._data[id];
- }
- },
- getById:function(id){
- return this._data[id];
- },
- joinId:function(sep){
- arr = [];
- for(id in this._data){
- arr.push(id);
- }
- return arr.join(sep);
- },
- joinName:function(sep){
- arr = [];
- for(id in this._data){
- arr.push(this._data[id].text);
- }
- return arr.join(sep)
- },
- contains:function(id){
- return this_data[id];
- },
- init:function(ids,texts){
- if(ids.IndexOf(',') > 1){
- idarr = ids.split(',');
- textarr = texts.splist(',');
- for(var i=0; i<idarr.length; i++){
- if(idarr[i].replace(/^\s+|\s+$/g,'') != ''){
- this.add(idarr[i],textarr[i]);
- }
- }
- }
- }
- };
- Ext.define('OrgInfo', {extend: 'Ext.data.Model',
- fields: [
- {name: 'id'},
- {name: 'text'},
- {name: 'name'}
- ]
- });
- var orgStore = Ext.create('Ext.data.TreeStore', {
- defaultRootId: "10",
- model: "OrgInfo",
- root: {id:10,text:'顺丰速运集团',leaf:false},
- proxy: {type:'ajax', actionMethods : "POST", url:'tree_data.jsp', reader:{type:'json'}},
- nodeParam:'id',
- textField : "name"
- });
- /*
- *设置子节点或者父节点选中的方法
- *设置单个节点选中的方法
- */
- var TreeNodeCheck ={
- setNodeChecked:function(node,checked){
- checkedNodes.update(node.get('id'),node.get('text'),checked);
- node.set('checked',checked);
- },
- childChecked:function(node,checked){
- TreeNodeCheck.setNodeChecked(node,checked);
- node.expand();
- if(node.hasChildNodes()){
- node.eachChild(function(child) {
- TreeNodeCheck.childChecked(child,checked);
- });
- }
- },
- parentChecked:function(node,checked){
- var parentNode = node.parentNode;
- checked = parentNode == null ?null:checked;
- TreeNodeCheck.setNodeChecked(node,checked); //设置父节点不选 中
- if(parentNode !=null){ //如果父节点不为空则展开
- var flag = false;
- parentNode.eachChild(function(child) {
- if(child.data.checked == true){
- flag = true;
- }
- });
- if(checked == false){
- if(!flag){
- TreeNodeCheck.parentChecked(parentNode,checked);
- }
- }else{
- if(flag){
- TreeNodeCheck.parentChecked(parentNode,checked);
- }
- }
- }
- }
- };
- Ext.define("OrgTreePanel", {
- extend: "Ext.tree.Panel",
- store : orgStore,
- rootVisible: true,
- useArrows: true,
- frame: true,
- title: 'Check Tree',
- width: 200,
- height: 250,
- padding:'0 0 0 0',
- selectIds:function(){
- var records =this.getView().getChecked(),
- ids = [];
- Ext.Array.each(records, function(rec){
- ids.push(rec.get('id'));
- });
- return ids.join(",");
- },
- listeners:{
- checkchange:function (node,checked,eOpts){
- TreeNodeCheck.childChecked(node,checked);
- TreeNodeCheck.parentChecked(node,checked);
- },
- load:function( store, records, successful, operation, eOpts ){
- if(records.data.checked!=null){
- var hasChecked = false;
- Ext.Array.each(successful, function(rec){
- if(rec.data.checked){
- hasChecked = true;
- return false;
- }
- });
- if(!records.data.checked){
- if(hasChecked){
- Ext.Array.each(successful, function(rec){
- TreeNodeCheck.childChecked(rec,false);
- });
- }
- }else{
- if(!hasChecked){
- Ext.Array.each(successful, function(rec){
- TreeNodeCheck.childChecked(rec,true);
- });
- }
- }
- }
- }
- }
- });
- var win = null;
- var tree = null;
- Ext.create('Ext.Button', {
- text: '得到被选中的节点',
- renderTo: Ext.getBody(),
- handler: function() {
- console.info(Ext.isEmpty(' '));
- console.info("checkedNodes.joinId:"+checkedNodes.joinId("-"));
- }
- });
- Ext.create('Ext.Button', {
- text: 'delete tree',
- renderTo: Ext.getBody(),
- handler: function() {
- tree.getRootNode().removeAll(false);
- tree.getStore().load();
- }
- });
- win = Ext.create('Ext.window.Window', {
- title: 'Hello',
- height: 250,
- width: 400,
- layout: 'fit',
- closeAction :'hide',
- showWin:function(){
- this.show();
- tree.getRootNode().removeAll(false);
- tree.getStore().load({
- scope :this,
- callback: function(records, operation, success) {
- if(!tree.getRootNode().isExpanded()){
- tree.getRootNode().expand();
- }
- }
- });
- },
- initComponent: function () {//构造函数
- var me = this;
- tree = Ext.create("OrgTreePanel");
- me.items = [tree];
- me.superclass.initComponent.call(me);
- },
- listeners: {
- beforehide:function(win, eOpts ){
- }
- }
- });
- Ext.create('Ext.Button', {
- text: 'Click me',
- renderTo: Ext.getBody(),
- handler: function() {
- win.showWin();
- }
- });
- });
- </script>
extjs4.0 treepanel节点的选中、展开! 数据的重新加载的更多相关文章
- 参考 ZTree 加载大数据量。加载慢问题解析
参考 ZTree 加载大数据量. 1.一次性加载大数据量加载说明 1).zTree v3.x 针对大数据量一次性加载进行了更深入的优化,实现了延迟加载功能,即不展开的节点不创建子节点的 DOM. 2) ...
- vue 中监测滚动条加载数据(懒加载数据)
vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...
- 不想分页怎么办??-->页面数据的滚动加载
在前几天的一次前台数据展示的时候 为了更好的用户的体验 就想着做一个数据的滚动加载功能 于是简单的查询了网上的实现方式 基本都是在页面加载的时候绑定scroll事件 然后判断页面触底的时候 进行aja ...
- Flutter 开发从 0 到 1(四)ListView 下拉加载和加载更多
在<APP 开发从 0 到 1(三)布局与 ListView>我们完成了 ListView,这篇文章将做 ListView 下拉加载和加载更多. ListView 下拉加载 Flutter ...
- 【EF学习笔记08】----------加载关联表的数据 显式加载
显式加载 讲解之前,先来看一下我们的数据库结构:班级表 学生表 加载从表集合类型 //显示加载 Console.WriteLine("=========查询集合===========&quo ...
- OGG初始化之将数据从文件加载到Replicat
要使用Replicat建立目标数据,可以使用初始加载Extract从源表中提取源记录,并将它们以规范格式写入提取文件.从该文件中,初始加载Replicat使用数据库接口加载数据.在加载过程中,更改同步 ...
- hibernate框架学习之数据抓取(加载)策略
Hibernate获取数据方式 lHibernate提供了多种方式获取数据 •load方法获取数据 •get方法获取数据 •Query/ Criteria对象获取数据 lHibernate获取的数据分 ...
- 利用WPF的ListView进行大数据量异步加载
原文:利用WPF的ListView进行大数据量异步加载 由于之前利用Winform的ListView进行大数据量加载的时候,诟病良多,所以今天试着用WPF的ListView来做了一下,结果没有让我失望 ...
- DataTable 删除数据后重新加载
DataTable 删除数据后重新加载 一.总结 一句话总结: 判断datatable是否被datatable初始化或者是否执行了datatable销毁函数,如果没有,就销毁它 if ($('#dat ...
随机推荐
- [UOJ#127][BZOJ4195][NOI2015]程序自动分析
[UOJ#127][BZOJ4195][NOI2015]程序自动分析 试题描述 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2, ...
- POJ 2396 Budget ——有上下界的网络流
给定矩阵的每行每列的和,和一些大于小于等于的限制.然后需要求出一组可行解. 上下界网络流. 大概的思想就是计算出每一个点他需要强行流入或者流出的量,然后建出超级源点和汇点,然后删除下界,就可以判断是否 ...
- BZOJ 3998 [TJOI2015]弦论 ——后缀自动机
直接构建后缀自动机. 然后. 然后只需要再后缀自动机的go树上类似二分的方法进行查找即可,实际上是“26分”. 然后遇到了处理right集合的问题,然后觉得在go和parent树上上传都是可以的,毕竟 ...
- [HDU-4825] Xor-Sum (01字典树)
Problem Description Zeus 和 Prometheus 做了一个游戏,Prometheus 给 Zeus 一个集合,集合中包含了N个正整数,随后 Prometheus 将向 Zeu ...
- hdu 4819 Mosaic 树套树 模板
The God of sheep decides to pixelate some pictures (i.e., change them into pictures with mosaic). He ...
- cf21D Traveling Graph
You are given undirected weighted graph. Find the length of the shortest cycle which starts from the ...
- R语言入门视频笔记--5--自定义函数
自定义函数 你可以输出一段代码,创建一个你自己定义的函数 蛋是如果你两个自定义函数的名字重复的话,后面的会把前面的替换掉 举个栗子: hanshu1 <- function(x) sqrt(v ...
- dedecms--自定义session存值取值
最近在用用dedecms开发项目,开发项目中遇到需要通过session存储信息在其他页面调取使用,但是对dedecms里面自带的session存储使用不好,我需要存储的是用户登录的时候信息,于是我就使 ...
- DOM对象之查找标签&属性操作
HTML DOM (文档对象模型) DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法. JavaScript对DOM进行了实现,对应于JavaScript中 ...
- 心脏滴血漏洞复现(CVE-2014-0160)
漏洞范围: OpenSSL 1.0.1版本 漏洞成因: Heartbleed漏洞是由于未能在memcpy()调用受害用户输入内容作为长度参数之前正确进 行边界检查.攻击者可以追踪OpenSSL所分配的 ...