combotree的总结(这个好)

时间：2023-03-08 21:59:23

1：最近有这个需求，就是ext下的combo下拉是树，网上的例子很多，封装的也很好，基本都可以满足下拉框下出现想要的树，但是我的使用情况是比如在用户编辑的时候，要把用户已经选择过的数值自动再赋值到下拉框内，比如之前选择了id为5的节点，那么编辑用户的时候combo中自动显示这个值

2：网上发现这样的例子不多，有一个是iteye上面写的，地址为http://zxlaiye.iteye.com/blog/1310556。经过测试这个里面有几个问题所在，并且有几个作者也没有说明白杂用，经过修改可以用了。

3：发个实例代码：

  1. new Ext.ux.ComboBoxTree({
  2. fieldLabel : '父菜单',
  3. hiddenName : 'testTreeName',
  4. value : 11,
  5. height : 180,
  6. width : 200,
  7. dataUrl : PATH
  8. + '/do.php?mod=util&action=query_parent_department_tree',
  9. nodePathUrl : PATH
  10. + '/do.php?mod=util&action=query_department_path&id=11',
  11. rootVisible : false,
  12. rootSelectable : false,
  13. showFullPath : false,
  14. allowBlank : false,
  15. emptyText : '请选择'
  16. })

其中hiddenName 是post过去的字段

dataUrl就是生成一般的树的路径了，这个都和平时一样，不一样的地方时多了个nodePathUrl，看这个我的例子中我给初始化的value为11，这个节点在我数据库中对应的父亲节点只推到最上的路径分别为/root/8/7/11  也就是说这个节点从刚才的路径利用treepanel的selectPath方法直接找到这个节点，然后把这个节点text对应到combo中，把value设置给name。之前这个问题是里面有个路径问题不可以找到，还有个地方时一个cu的函数的封装，cu函数就是请求nodePathUrl的。里面还有个问题是如果当前tree中没有root节点的话是对应不到的，总之我给修整好是可以用了，大家看源代码：

  1. /**
  2. * 自定义下拉树，支持初始化值时自动定位树节点。 还没有考虑性能问题。继承自Ext.form.ComboBox也很浪费。
  3. * 代码中的cu.get()是自定义的异步请求方法。
  4. */
  5. /*
  6. * 例子 new Ext.ux.ComboBoxTree({ fieldLabel:'父菜单', hiddenName: 'parentId', value:
  7. * this.modifyId ? '' : this.parentMenu.id, height: 180, dataUrl:
  8. * 'sys/menu/getMenus.do', 就是获取一般tree的url nodePathUrl:
  9. * 'sys/util/getEntityIdPath.do?c=sys.entity.Menu',获取需要默认选中的那个节点的路径parentId/parentId/.../被选中节点的id
  10. * root: {id:'root', text:'根菜单', expanded: true}, rootVisible: true,
  11. * rootSelectable: true, rootValue: null, showFullPath: true, allowBlank: false,
  12. * });
  13. */
  14. /**
  15. * @author Linzongxue
  16. * @create_date 2011-12-13
  17. */
  18. Ext.ux.ComboBoxTree = Ext.extend(Ext.form.ComboBox, {
  19. // 树的配置项
  20. dataUrl : null, // 获取树所有节点的url
  21. // 通过id获取某个节点的id全路径的url，返回值的格式应该是：parentId1/parentId2/parentId3/../节点id
  22. // 如果不设置这个值，下拉树不会自动定位节点并在初始化时显示文本
  23. nodePathUrl : null,
  24. loader : null,
  25. root : {},
  26. rootVisible : false,
  27. // 树的选择模式
  28. rootSelectable : false, // 根节点是否可选，默认为false
  29. folderSelectable : true, // 目录是否可选，默认为true
  30. leafSelectable : true, // 叶子是否可选，默认为true
  31. showFullPath : false, // 是否显示全路径
  32. rootValue : undefined, // 根节点的值（通常根节点的取值与普通节点的取值不一样，如果一样则不需要设置此值）
  33. // 原combo类的配置项
  34. store : new Ext.data.SimpleStore({
  35. fields : [],
  36. data : [[]]
  37. }),
  38. mode : 'local',
  39. triggerAction : 'all',
  40. editable : false,
  41. forceSelection : true,
  42. tree : null, // 树控件，在expand方法中初始化
  43. // private: 用于防止combo收缩，在树的事件中控制此属性值
  44. preventCollapse : false,
  45. initComponent : function() {
  46. this.treeId = Ext.id();
  47. this.height = this.height || 200;
  48. this.tpl = String.format(
  49. '<tpl for="."><div id="{0}" style="height:{1}px"></div></tpl>',
  50. this.treeId, this.height);
  51. Ext.ux.ComboBoxTree.superclass.initComponent.call(this);
  52. },
  53. setValue : function(value) {
  54. if (Ext.isObject(value)) { // 点击树节点时的选择
  55. this.doSetValue(value);
  56. } else { // 只是设置一个值，从后台获取这个值的路径，并在树中选中这个节点
  57. if (!this.tree)
  58. this.initTree();
  59. if (value === this.tree.root.id
  60. || (Ext.isDefined(this.rootValue) && value === this.rootValue)) { // 根节点
  61. this.tree.root.select();
  62. this.doSetValue(this.root);
  63. return;
  64. }
  65. var url = this.nodePathUrl;
  66. if (!url) {
  67. this.doSetValue({
  68. id : value
  69. });
  70. return;
  71. }
  72. Ext.Ajax.request({
  73. url : url,
  74. async : false,
  75. scope : this,
  76. success : function(resp, opts) {
  77. var comboTree = this;
  78. path = resp.responseText;
  79. path = (path.indexOf('/') == 0 ? '' : '/')
  80. +comboTree.tree.root.id+'/'+ path;
  81. this.tree.selectPath(path, 'id', function(success,
  82. node) {
  83. comboTree.doSetValue(success
  84. ? node
  85. : null);
  86. });
  87. },
  88. faliure : function() {
  89. alert(3)
  90. }
  91. });
  92. /*
  93. * cu.get(url, {id: value}).done(function(path){//从后台发起请求获取id路径 path =
  94. * '/' + this.root.id + (path.indexOf('/') == 0 ? '' : '/') + path;
  95. * var comboTree = this; this.tree.selectPath(path, 'id',
  96. * function(success, node){ comboTree.doSetValue(success ? node :
  97. * null); }); }, this);
  98. */
  99. }
  100. },
  101. // private:设置值，参数value应该是一个对象
  102. doSetValue : function(value) {
  103. var id = value ? value.id : '';
  104. var text = value ? value.text : '';
  105. if (value && (value.loader || value.attributes)) { // 是树节点
  106. var isRootNode = (value.id == this.tree.root.id);
  107. if (isRootNode && Ext.isDefined(this.rootValue)) {
  108. id = this.rootValue;
  109. }
  110. if (this.showFullPath) {
  111. text = isRootNode ? '/' : value.getPath('text').replace(
  112. '/' + this.tree.root.text, '');
  113. }
  114. }
  115. this.value = id;
  116. if (this.hiddenField) {
  117. this.hiddenField.value = id; // 设置表单域
  118. }
  119. this.lastSelectionText = text;
  120. this.el.dom.value = text; // 显示的值
  121. this.fireEvent('select', this, value);
  122. },
  123. getValue : function() {
  124. return Ext.isDefined(this.value) ? this.value : '';
  125. },
  126. // 取得选中的树节点
  127. getValueNode : function() {
  128. return this.tree
  129. ? this.tree.getSelectionModel().getSelectedNode()
  130. : null;
  131. },
  132. getText : function() {
  133. return this.lastSelectionText || '';
  134. },
  135. reload : function() {
  136. if (!this.tree)
  137. return;
  138. var node = this.tree.getSelectionModel().getSelectedNode();
  139. var path = node ? node.getPath() : null;
  140. this.tree.getLoader().load(this.tree.root, function() {
  141. if (path) {
  142. this.tree.selectPath(path);
  143. }
  144. }, this);
  145. this.preventCollapse = true;
  146. },
  147. // private: 根据preventCollapse属性判断是否要收缩
  148. collapse : function() {
  149. if (this.preventCollapse) {
  150. this.preventCollapse = false;
  151. return;
  152. }
  153. Ext.ux.ComboBoxTree.superclass.collapse.call(this);
  154. },
  155. // private:
  156. expand : function() {
  157. Ext.ux.ComboBoxTree.superclass.expand.call(this);
  158. if (!this.tree) {
  159. this.initTree();
  160. }
  161. },
  162. // private:
  163. destroy : function() {
  164. if (this.tree && this.tree.rendered)
  165. this.tree.destroy();
  166. Ext.form.ComboBox.superclass.destroy.call(this);
  167. },
  168. // private
  169. initTree : function() {
  170. if (!this.list) { // 必须先初始化列表，在一开始就设置了combotree的值时尤其重要，发现这个问题花了半天时间
  171. this.initList();
  172. }
  173. // 设置this.preventCollapse=true，防止combo收缩
  174. var enableCollapse = function() {
  175. this.preventCollapse = false;
  176. };
  177. // 设置this.preventCollapse=false，允许combo收缩
  178. var disableCollapse = function() {
  179. this.preventCollapse = true;
  180. };
  181. this.tree = new Ext.tree.TreePanel({
  182. renderTo : this.treeId,
  183. useArrows : false,
  184. autoScroll : true,
  185. height : this.height, // 修复IE的bug
  186. animate : true,
  187. enableDD : false,
  188. containerScroll : true,
  189. border : false,
  190. dataUrl : this.dataUrl,
  191. loader : this.loader,
  192. root : this.root,
  193. rootVisible : this.rootVisible,
  194. // bbar:[
  195. // '->', {text: '刷新', handler: this.reload, iconCls:
  196. // 'icon-refresh', scope: this} //由于宽度问题取消此功能
  197. // ],
  198. listeners : {
  199. click : function(node) {
  200. disableCollapse();
  201. if (node == this.tree.root) { // 选中根节点
  202. if (!this.rootSelectable)
  203. return;
  204. } else if (!node.isLeaf()) { // 选中目录节点
  205. if (!this.folderSelectable)
  206. return;
  207. } else { // 选中叶子节点
  208. if (!this.leafSelectable)
  209. return;
  210. }
  211. // 先选择节点，再设置value，让getNodeValue方法在select事件中取到正确的值
  212. node.select();
  213. this.setValue(node);
  214. enableCollapse();
  215. },
  216. // 展开和收缩节点时防止combo收缩
  217. beforeexpandnode : disableCollapse,
  218. beforecollapsenode : disableCollapse,
  219. beforeload : disableCollapse,
  220. // 节点加载和展开后允许combo收缩
  221. load : enableCollapse,
  222. expandnode : enableCollapse,
  223. scope : this
  224. }
  225. });
  226. }
  227. });
  228. Ext.reg('combotree', Ext.ux.ComboBoxTree);

相关文章