节点那一行出现浅蓝色背景的选中

转载 2012年03月30日 00:10:06

这里说的选中是指鼠标点击一个节点后,节点那一行出现浅蓝色背景的选中,而非checkbox的勾选

方法

 

Ext.tree.TreePanel.getSelectionModel().getSelectedNode();

Ext.tree.TreePanel.getSelectionModel()获得的是一个TreeSelectionModel对象,

这个TreeSelectionModel目前在Ext中有两个Ext.tree.DefaultSelectionModel和Ext.tree.MultiSelectionModel

 

首先我们使用Ext.tree.TreeLoader来初始化了一个TreeLoader对象,构造函数中的配置参数url表示获得树节点信息的url。然后在初始化根节点的时候我们使用的是AsyncTreeNode,在该节点中指定该节点的 laoder为前面定义的loader。执行这段程序,在点击“根节点”时,会从服务器端指定root节点的子节点信息。
 
   TreeLoader严格来说是针对树的节点来定义的,可以给树中的每一个节点定义不同的TreeLoader,默认情况下,如果一个 AsyncTreeNode节点在准备加载子节点的时候,如果该节点上没有定义loader,则会使用TreePanel中定义的loader作为加载器。因此,我们可以直接在TreePanel上面指定loader属性,这样就不需要给每一个节点指定具体的TreeLoader了。

Ext.onReady(function(){

var root=new Ext.tree.TreeNode({
id:"root",
text:"树的根"
});
var c1=new Ext.tree.TreeNode({
text:"子节点1"
})
var c2=new Ext.tree.AsyncTreeNode({
text:"子节点2"
});
root.appendChild(c1);
root.appendChild(c2);
var tree=new Ext.tree.TreePanel({
renderTo:"hello",
root:root,
width:300,
loader:new Ext.tree.TreeLoader({
applyLoader:false,
url:"treedata.js"
})
});

});

  1. Ext.onReady(function(){   
  2.   Ext.BLANK_IMAGE_URL = '../js/extjs/3.2.0/resources/images/default/s.gif';   
  3.   Ext.chart.Chart.CHART_URL = '../js/extjs/3.2.0/resources/charts.swf';   
  4.   Ext.QuickTips.init();   
  5.   testTreeGrid();   
  6. });   
  7.   
  8. function testTreeGrid(){   
  9.   var tree = new Ext.ux.tree.TreeGrid({   
  10.     title: '地市',   
  11.     width: 550,   
  12.     height: 300,   
  13.     dataUrl: 'treegrid-data.json',   
  14.     renderTo: Ext.getBody(),   
  15.     enableDD: true,   
  16.     columns:[{   
  17.       header: 'ID',   
  18.       dataIndex: 'id',   
  19.       width: 200   
  20.     },{   
  21.       header: '名称',   
  22.       dataIndex: 'fdcName',   
  23.       width: 180   
  24.     },{   
  25.       header: '描述',   
  26.       dataIndex: 'fdcDesp',   
  27.       width: 100,   
  28.       align: 'center',   
  29.       sortType: 'string',   
  30.       tpl: new Ext.XTemplate('{fdcDesp:this.formatDesp}', {   
  31.         formatDesp: function(v) {   
  32.           return v||'-'  
  33.         }   
  34.       })   
  35.     }],   
  36.     tbar:[{   
  37.       text:'当前路径',   
  38.       tooltip:'保存当前选择节点的路径',   
  39.       scope:this,   
  40.       handler:function(b,e){   
  41.         //获取当前选择节点的路径   
  42.         var node = tree.getSelectionModel().getSelectedNode();   
  43.         var path = node.getPath('id');   
  44.         Ext.getCmp('tf').setValue(path);   
  45.       }   
  46.     },{   
  47.       xtype:'textfield',   
  48.       id:'tf',   
  49.       width:300,   
  50.       value:''  
  51.     },{   
  52.       text:'选择路径',   
  53.       scope:this,   
  54.       handler:function(b,e){   
  55.         var path = Ext.getCmp('tf').getValue();   
  56.         //展开路径,并在回调函数里面选择该节点   
  57.         tree.expandPath(path,'id',function(bSucess,oLastNode){   
  58.           tree.getSelectionModel().select(oLastNode);   
  59.         });   
  60.       }   
  61.     },{   
  62.       text:'选择江门',   
  63.       scope:this,   
  64.       handler:function(b,e){   
  65.         var path = '/xnode-11/cn86/gd020/gd020areas/jm0750';   
  66.         //展开路径,并在回调函数里面选择该节点   
  67.         tree.expandPath(path,'id',function(bSucess,oLastNode){   
  68.           tree.getSelectionModel().select(oLastNode);   
  69.         });   
  70.       }   
  71.     },{   
  72.       text:'重载',   
  73.       tooltip:'重载数据并选择上一次的节点',   
  74.       scope:this,   
  75.       handler:function(b,e){   
  76.         var path = tree.getSelectionModel().getSelectedNode().getPath('id');   
  77.         //重载数据,并在回调函数里面选择上一次的节点   
  78.         tree.getLoader().load(tree.getRootNode(),function(treeNode){   
  79.           //展开路径,并在回调函数里面选择该节点   
  80.           tree.expandPath(path,'id',function(bSucess,oLastNode){   
  81.             tree.getSelectionModel().select(oLastNode);   
  82.           });   
  83.         },this);   
  84.       }   
  85.     }]   
  86.   });   
  87. }  


 

extjs6 表格行选中时去掉默认背景颜色

extjs表格 默认选中的时候行背景色会是蓝色,或者其他可以通过sass修改,但是如果你不想要全部的表格都是统一修改成其他颜色,而只要个别表格样式修改,那个就得针对那个表格做配置,我的做法可能比较曲折...
  • Cookysurongbin
  • Cookysurongbin
  • 2016年05月27日 14:43
  • 1362

android listview设置选中时的item的背景色

今天实在不知道写些什么内容,所以自己在网上找了些资料,觉得还可以,所以还是写一下,觉得每天写些东西的习惯不能荒废。 默认情况下使用ListView背景色是黑色,选中item的高亮颜色是菊黄色,很多时...
  • bzlj2912009596
  • bzlj2912009596
  • 2017年04月07日 08:38
  • 1364

Extjs tree 点击选中的节点 改变背景

 這裏說的選中是指鼠標點擊一個節點後,節點那一行出現淺藍色背景的選中,而非checkbox的勾選 方法   Ext.tree.TreePanel.getSelectionModel().g...
  • u013532827
  • u013532827
  • 2014年04月20日 13:03
  • 1842

js实现表格的选中一行-------Day58

table的优势在于,它有tr和td,而div内部则没有了,但是div里面的可以用id获取,那table操作的值那么多,难道要一个个设div么,当然不用,选中一行就欧了...
  • marSmile_tbo
  • marSmile_tbo
  • 2014年07月06日 00:12
  • 2553

Notepad++选中行操作 快捷键 使用技巧

用Notepad++写代码,要是有一些重复的代码想copy一下,还真不容易,又得动用鼠标,巨烦人。。。。 有木有简单的方法呢,确实还是有的不过也不算太好用。 主要是应用键盘上的 Home 键 和 ...
  • U___U
  • U___U
  • 2015年06月28日 11:05
  • 14844

zTree 获取所有选中节点数据

ZTREE DEMO - Standard Data
  • longtingjing
  • longtingjing
  • 2017年03月04日 12:01
  • 1464

C#中TreeView选中父节点同时选中所有的子节点

TreeView 通常和CheckBoxs一起使用,显示并选择一些条目,特别是在等级分割的状态下,例如 当我选择一个父节点,希望该父节点下所有的子节点都被选中,取消一个节点,希望他所有的父节点都取...
  • gz_go
  • gz_go
  • 2015年08月30日 22:00
  • 6164

jstree 选中指定节点-yellowcong

项目中使用的树框架是Jstree,经常会遇到默认选中节点的问题,刚开始使用Jstree的同学,肯定是会被官方的API坑哭了,JsTree官方API,介绍如何使用jstree默认选中节点...
  • yelllowcong
  • yelllowcong
  • 2017年07月21日 14:54
  • 2330

Extjs4 选中父节点 自己节点全部选中

var tree = Ext.create('Ext.tree.Panel', { store : store, rootVisible : true, useAr...
  • jiangzeyun
  • jiangzeyun
  • 2014年01月17日 21:31
  • 1804

EasyUI单击选中一行数据并获取数据

在EasyUI中有一个单击事件 onClickRow   单击一行事件 onDblClickRow  双击一行事件 首先,应该在datagrid的columns中添加一隐藏列id(数据库查询语句中要有...
  • zyj_15067066062
  • zyj_15067066062
  • 2016年11月24日 14:58
  • 5592
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:节点那一行出现浅蓝色背景的选中
举报原因:
原因补充:

(最多只允许输入30个字)