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});

  1. <script type="text/javascript">
  2. Ext.require([
  3. 'Ext.tree.*',
  4. 'Ext.data.*',
  5. 'Ext.window.MessageBox',
  6. 'Ext.tip.*'
  7. ]);
  8. Ext.onReady(function() {
  9. /*
  10. * 可以获取选中节点的ID,以及TEXT
  11. *
  12. */
  13. var checkedNodes = {
  14. _data:{},
  15. update:function(id,text,checked){
  16. if(checked){
  17. this.add(id,text,checked);
  18. }else if(!checked){
  19. this.delById(id);
  20. }
  21. },
  22. add: function(id,text){
  23. if(!this._data[id]){
  24. this._data[id] = {'id':id,'text':text};
  25. }
  26. },
  27. delById:function(id){
  28. if(this._data[id]){
  29. delete this._data[id];
  30. }
  31. },
  32. getById:function(id){
  33. return this._data[id];
  34. },
  35. joinId:function(sep){
  36. arr = [];
  37. for(id in this._data){
  38. arr.push(id);
  39. }
  40. return arr.join(sep);
  41. },
  42. joinName:function(sep){
  43. arr = [];
  44. for(id in this._data){
  45. arr.push(this._data[id].text);
  46. }
  47. return arr.join(sep)
  48. },
  49. contains:function(id){
  50. return this_data[id];
  51. },
  52. init:function(ids,texts){
  53. if(ids.IndexOf(',') > 1){
  54. idarr = ids.split(',');
  55. textarr = texts.splist(',');
  56. for(var i=0; i<idarr.length; i++){
  57. if(idarr[i].replace(/^\s+|\s+$/g,'') != ''){
  58. this.add(idarr[i],textarr[i]);
  59. }
  60. }
  61. }
  62. }
  63. };
  64. Ext.define('OrgInfo', {extend: 'Ext.data.Model',
  65. fields: [
  66. {name: 'id'},
  67. {name: 'text'},
  68. {name: 'name'}
  69. ]
  70. });
  71. var orgStore = Ext.create('Ext.data.TreeStore', {
  72. defaultRootId: "10",
  73. model: "OrgInfo",
  74. root: {id:10,text:'顺丰速运集团',leaf:false},
  75. proxy: {type:'ajax', actionMethods : "POST", url:'tree_data.jsp', reader:{type:'json'}},
  76. nodeParam:'id',
  77. textField : "name"
  78. });
  79. /*
  80. *设置子节点或者父节点选中的方法
  81. *设置单个节点选中的方法
  82. */
  83. var TreeNodeCheck ={
  84. setNodeChecked:function(node,checked){
  85. checkedNodes.update(node.get('id'),node.get('text'),checked);
  86. node.set('checked',checked);
  87. },
  88. childChecked:function(node,checked){
  89. TreeNodeCheck.setNodeChecked(node,checked);
  90. node.expand();
  91. if(node.hasChildNodes()){
  92. node.eachChild(function(child) {
  93. TreeNodeCheck.childChecked(child,checked);
  94. });
  95. }
  96. },
  97. parentChecked:function(node,checked){
  98. var parentNode = node.parentNode;
  99. checked = parentNode == null ?null:checked;
  100. TreeNodeCheck.setNodeChecked(node,checked); //设置父节点不选 中
  101. if(parentNode !=null){ //如果父节点不为空则展开
  102. var flag = false;
  103. parentNode.eachChild(function(child) {
  104. if(child.data.checked == true){
  105. flag = true;
  106. }
  107. });
  108. if(checked == false){
  109. if(!flag){
  110. TreeNodeCheck.parentChecked(parentNode,checked);
  111. }
  112. }else{
  113. if(flag){
  114. TreeNodeCheck.parentChecked(parentNode,checked);
  115. }
  116. }
  117. }
  118.  
  119. }
  120. };
  121. Ext.define("OrgTreePanel", {
  122. extend: "Ext.tree.Panel",
  123. store : orgStore,
  124. rootVisible: true,
  125. useArrows: true,
  126. frame: true,
  127. title: 'Check Tree',
  128. width: 200,
  129. height: 250,
  130. padding:'0 0 0 0',
  131. selectIds:function(){
  132. var records =this.getView().getChecked(),
  133. ids = [];
  134. Ext.Array.each(records, function(rec){
  135. ids.push(rec.get('id'));
  136. });
  137. return ids.join(",");
  138. },
  139. listeners:{
  140. checkchange:function (node,checked,eOpts){
  141. TreeNodeCheck.childChecked(node,checked);
  142. TreeNodeCheck.parentChecked(node,checked);
  143.  
  144. },
  145. load:function( store, records, successful, operation, eOpts ){
  146. if(records.data.checked!=null){
  147. var hasChecked = false;
  148. Ext.Array.each(successful, function(rec){
  149. if(rec.data.checked){
  150. hasChecked = true;
  151. return false;
  152. }
  153. });
  154. if(!records.data.checked){
  155. if(hasChecked){
  156. Ext.Array.each(successful, function(rec){
  157. TreeNodeCheck.childChecked(rec,false);
  158. });
  159. }
  160. }else{
  161. if(!hasChecked){
  162. Ext.Array.each(successful, function(rec){
  163. TreeNodeCheck.childChecked(rec,true);
  164. });
  165. }
  166. }
  167. }
  168. }
  169. }
  170. });
  171.  
  172. var win = null;
  173. var tree = null;
  174.  
  175. Ext.create('Ext.Button', {
  176. text: '得到被选中的节点',
  177. renderTo: Ext.getBody(),
  178. handler: function() {
  179.  
  180. console.info(Ext.isEmpty(' '));
  181. console.info("checkedNodes.joinId:"+checkedNodes.joinId("-"));
  182.  
  183. }
  184. });
  185.  
  186. Ext.create('Ext.Button', {
  187. text: 'delete tree',
  188. renderTo: Ext.getBody(),
  189. handler: function() {
  190. tree.getRootNode().removeAll(false);
  191. tree.getStore().load();
  192. }
  193. });
  194.  
  195. win = Ext.create('Ext.window.Window', {
  196. title: 'Hello',
  197. height: 250,
  198. width: 400,
  199. layout: 'fit',
  200. closeAction :'hide',
  201. showWin:function(){
  202. this.show();
  203. tree.getRootNode().removeAll(false);
  204. tree.getStore().load({
  205. scope :this,
  206. callback: function(records, operation, success) {
  207. if(!tree.getRootNode().isExpanded()){
  208. tree.getRootNode().expand();
  209. }
  210. }
  211. });
  212. },
  213. initComponent: function () {//构造函数
  214. var me = this;
  215. tree = Ext.create("OrgTreePanel");
  216. me.items = [tree];
  217. me.superclass.initComponent.call(me);
  218. },
  219. listeners: {
  220. beforehide:function(win, eOpts ){
  221.  
  222. }
  223. }
  224. });
  225.  
  226. Ext.create('Ext.Button', {
  227. text: 'Click me',
  228. renderTo: Ext.getBody(),
  229. handler: function() {
  230. win.showWin();
  231. }
  232. });
  233. });
  234. </script>

extjs4.0 treepanel节点的选中、展开! 数据的重新加载的更多相关文章

  1. 参考 ZTree 加载大数据量。加载慢问题解析

    参考 ZTree 加载大数据量. 1.一次性加载大数据量加载说明 1).zTree v3.x 针对大数据量一次性加载进行了更深入的优化,实现了延迟加载功能,即不展开的节点不创建子节点的 DOM. 2) ...

  2. vue 中监测滚动条加载数据(懒加载数据)

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

  3. 不想分页怎么办??-->页面数据的滚动加载

    在前几天的一次前台数据展示的时候 为了更好的用户的体验 就想着做一个数据的滚动加载功能 于是简单的查询了网上的实现方式 基本都是在页面加载的时候绑定scroll事件 然后判断页面触底的时候 进行aja ...

  4. Flutter 开发从 0 到 1(四)ListView 下拉加载和加载更多

    在<APP 开发从 0 到 1(三)布局与 ListView>我们完成了 ListView,这篇文章将做 ListView 下拉加载和加载更多. ListView 下拉加载 Flutter ...

  5. 【EF学习笔记08】----------加载关联表的数据 显式加载

    显式加载 讲解之前,先来看一下我们的数据库结构:班级表 学生表 加载从表集合类型 //显示加载 Console.WriteLine("=========查询集合===========&quo ...

  6. OGG初始化之将数据从文件加载到Replicat

    要使用Replicat建立目标数据,可以使用初始加载Extract从源表中提取源记录,并将它们以规范格式写入提取文件.从该文件中,初始加载Replicat使用数据库接口加载数据.在加载过程中,更改同步 ...

  7. hibernate框架学习之数据抓取(加载)策略

    Hibernate获取数据方式 lHibernate提供了多种方式获取数据 •load方法获取数据 •get方法获取数据 •Query/ Criteria对象获取数据 lHibernate获取的数据分 ...

  8. 利用WPF的ListView进行大数据量异步加载

    原文:利用WPF的ListView进行大数据量异步加载 由于之前利用Winform的ListView进行大数据量加载的时候,诟病良多,所以今天试着用WPF的ListView来做了一下,结果没有让我失望 ...

  9. DataTable 删除数据后重新加载

    DataTable 删除数据后重新加载 一.总结 一句话总结: 判断datatable是否被datatable初始化或者是否执行了datatable销毁函数,如果没有,就销毁它 if ($('#dat ...

随机推荐

  1. [UOJ#127][BZOJ4195][NOI2015]程序自动分析

    [UOJ#127][BZOJ4195][NOI2015]程序自动分析 试题描述 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2, ...

  2. POJ 2396 Budget ——有上下界的网络流

    给定矩阵的每行每列的和,和一些大于小于等于的限制.然后需要求出一组可行解. 上下界网络流. 大概的思想就是计算出每一个点他需要强行流入或者流出的量,然后建出超级源点和汇点,然后删除下界,就可以判断是否 ...

  3. BZOJ 3998 [TJOI2015]弦论 ——后缀自动机

    直接构建后缀自动机. 然后. 然后只需要再后缀自动机的go树上类似二分的方法进行查找即可,实际上是“26分”. 然后遇到了处理right集合的问题,然后觉得在go和parent树上上传都是可以的,毕竟 ...

  4. [HDU-4825] Xor-Sum (01字典树)

    Problem Description Zeus 和 Prometheus 做了一个游戏,Prometheus 给 Zeus 一个集合,集合中包含了N个正整数,随后 Prometheus 将向 Zeu ...

  5. hdu 4819 Mosaic 树套树 模板

    The God of sheep decides to pixelate some pictures (i.e., change them into pictures with mosaic). He ...

  6. cf21D Traveling Graph

    You are given undirected weighted graph. Find the length of the shortest cycle which starts from the ...

  7. R语言入门视频笔记--5--自定义函数

    自定义函数 你可以输出一段代码,创建一个你自己定义的函数 蛋是如果你两个自定义函数的名字重复的话,后面的会把前面的替换掉 举个栗子: hanshu1 <- function(x)  sqrt(v ...

  8. dedecms--自定义session存值取值

    最近在用用dedecms开发项目,开发项目中遇到需要通过session存储信息在其他页面调取使用,但是对dedecms里面自带的session存储使用不好,我需要存储的是用户登录的时候信息,于是我就使 ...

  9. DOM对象之查找标签&属性操作

    HTML DOM (文档对象模型) DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法. JavaScript对DOM进行了实现,对应于JavaScript中 ...

  10. 心脏滴血漏洞复现(CVE-2014-0160)

    漏洞范围: OpenSSL 1.0.1版本 漏洞成因: Heartbleed漏洞是由于未能在memcpy()调用受害用户输入内容作为长度参数之前正确进 行边界检查.攻击者可以追踪OpenSSL所分配的 ...