devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

EXTjS4下拉树 支持单选多选级联选择 comboxtree

作者：2023面试高手 | 2024-03-24 21:35:54

赞

踩

ext.js 4.0 树形下拉

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

   下拉树支持带复选框和不带复选框的JSON数据的,带复选框的下拉树也实现了单选功能,只需配置一下即可!

效果图.

  • 不带checked的json数据格式只支持单选

  • 带jchecked的json数据的单选

  • 带checked的json数据的多选,可支持级联操作,级联分为级联父节点,级联子节点,两者都级联

封装基类代码

:comboxtree.js

  1. Ext.define("Ark.combo.ComboTree", {  
  2.     extend: "Ext.form.field.Picker", 
  3.     alias : 'widget.arkComboTree',
  4.     requires: ["Ext.tree.Panel"],  
  5.     hiddenValue: '',
  6.     initComponent: function() {  
  7.         var self = this;  
  8.         Ext.apply(self, {  
  9.             fieldLabel: self.fieldLabel,  
  10.             labelWidth: self.labelWidth  
  11.         });  
  12.         
  13.         var store = Ext.create('Ext.data.TreeStore', {  
  14.             proxy: {  
  15.                 type: 'ajax',  
  16.                 url: self.storeUrl  ,
  17.                 extraParams: self.extraParams || {}
  18.             },  
  19.             sorters: [{  
  20.                 property: 'leaf',  
  21.                 direction: 'ASC'  
  22.             }, {  
  23.                 property: 'text',  
  24.                 direction: 'ASC'  
  25.             }],  
  26.             root: {  
  27.                 id: self.rootId,  
  28.                 text: self.rootText  
  29.             }
  30.         });  
  31.         
  32.         if(self.treeNodeParams) {
  33.         	for(var i=0; i<self.treeNodeParams.length; i++) {
  34.         		var param = self.treeNodeParams[i];
  35. 				store.getProxy().extraParams[param.name] = param.value;        		
  36.         	}
  37.         }
  38.         
  39.         store.on('load', function() {
  40.         	self.initValue();
  41.         });
  42.         store.load();
  43.         
  44.         this.store = store;
  45.         self.callParent();  
  46.     },  
  47.     createPicker: function() {  
  48.         var self = this;  
  49.         
  50.         self.picker = new Ext.tree.Panel({  
  51.             height: 300,  
  52.             autoScroll: true,  
  53.             floating: true,  
  54.             focusOnToFront: false,  
  55.             shadow: true,  
  56.             ownerCt: this.ownerCt,  
  57.             useArrows: true,  
  58.             store: this.store,  
  59.             rootVisible: false  
  60.         });  
  61.         
  62.         self.picker.on({  
  63.             checkchange: function(record, checked) {
  64.                 var checkModel = self.checkModel;  
  65.                 if (checkModel == 'double') {  
  66.                     var root = self.picker.getRootNode();  
  67.                     root.cascadeBy(function(node) {  
  68.                         if (node.get('text') != record.get('text')) {  
  69.                             node.set('checked', false);  
  70.                         }  
  71.                     });  
  72.                     if (record.get('leaf') && checked) {  
  73.                         self.setRawValue(record.get('id')); // 隐藏值  
  74.                         self.setValue(record.get('text'), true); // 显示值  
  75.                     } else {  
  76.                         record.set('checked', false);  
  77.                         self.setRawValue(''); // 隐藏值  
  78.                         self.setValue('', true); // 显示值  
  79.                     }  
  80.                 } else {  
  81.                     var cascade = self.cascade;  
  82.   
  83.                     if (checked == true) {  
  84.                         if (cascade == 'both' || cascade == 'child' || cascade == 'parent') {  
  85.                             if (cascade == 'child' || cascade == 'both') {  
  86.                                 if (!record.get("leaf") && checked) record.cascadeBy(function(record) {  
  87.                                     record.set('checked', true);  
  88.                                 });  
  89.                             }  
  90.                             if (cascade == 'parent' || cascade == 'both') {  
  91.                                 pNode = record.parentNode;  
  92.                                 for (; pNode != null; pNode = pNode.parentNode) {  
  93.                                     pNode.set("checked", true);  
  94.                                 }  
  95.                             }  
  96.                         }  
  97.                     } else if (checked == false) {  
  98.                         if (cascade == 'both' || cascade == 'child' || cascade == 'parent') {  
  99.                             if (cascade == 'child' || cascade == 'both') {  
  100.                                 if (!record.get("leaf") && !checked) record.cascadeBy(function(record) {  
  101.                                     record.set('checked', false);  
  102.                                 });  
  103.                             }  
  104.                         }  
  105.                     }  
  106.   
  107.                     var records = self.picker.getView().getChecked(),  
  108.                     names = [],  
  109.                     values = [];  
  110.                     Ext.Array.each(records,  function(rec) {  
  111.                         names.push(rec.get('text'));  
  112.                         values.push(rec.get('id'));  
  113.                     });  
  114.                     // self.setRawValue(values.join(',')); // 隐藏值，这种方式不对，改成使用hiddenValue替代
  115.                     self.setHiddenValue(values.join(',')); // 隐藏值
  116.                     self.setValue(names.join(','), true); // 显示值  
  117.                 }  
  118.             },  
  119.             itemclick: function(tree, record, item, index, e, options) {  
  120.                 var checkModel = self.checkModel;  
  121.   
  122.                 if (checkModel == 'single') {  
  123.                     if (record.get('leaf')) {  
  124.                     	self.setHiddenValue(record.get('id')); // 隐藏值
  125.                         //self.setRawValue(record.get('id')); // 隐藏值  
  126.                         self.setValue(record.get('text'), true); // 显示值  
  127.                     } else {  
  128.                     	self.setHiddenValue(''); // 隐藏值
  129.                         //self.setRawValue(''); // 隐藏值  
  130.                         self.setValue('', true); // 显示值  
  131.                     }  
  132.                 }  
  133.             }  
  134.         });  
  135.         return self.picker;  
  136.     },
  137.     getSubmitValue: function() {//
  138.     	return this.hiddenValue;
  139.     }, 
  140.     getSubmitData: function() {
  141.     	var data = {};
  142.     	data[this.name] = this.hiddenValue;
  143.     	data[this.textFieldName || (this.name + "Name")] = this.getValue();
  144.     	return data;
  145.     },
  146.     needInitValue: false,
  147.     _initValue: '',
  148.     initValue: function() {
  149.     	if(!this.needInitValue) {
  150.     		return;
  151.     	}
  152.     	var store = this.store;
  153.     	var names = [];
  154.     	var initValue = this._initValue.split(',');
  155.     	for(var i=0; i<initValue.length; i++) {
  156.     		var record = store.getNodeById(initValue[i]);
  157.     		console.log('======record');
  158.     		if (record) {
  159.     				if (this.checkModel == 'single') {  
  160.     					if(this.picker) {// TODO 此处代码有问题
  161. 	                    	this.picker.getSelectionModel().select(record);
  162.     					}
  163.     				} else {
  164.     					store.getNodeById(initValue[i]).data.checked = true;
  165.     				}
  166.     				names.push(store.getNodeById(initValue[i]).data.text);
  167.              }
  168.     	}
  169.     	this.setHiddenValue(this._initValue);
  170.     	this.setValue(names.join(','), true); // 显示值  
  171.     	this._initValue = '';
  172.     	this.needInitValue = false;
  173.     },
  174.     setValue: function(value, isCustom) {
  175.     	console.log('====setValue:'+value+',isCustom:'+isCustom+'=====>');
  176.     	if(!isCustom) {
  177.     		this.setExtValue(value);
  178.     		this.initValue();
  179.     	} else {
  180.     		this.callParent(arguments);
  181.     	}
  182.     },
  183.     setExtValue: function(values) {
  184.     	if(!values) {
  185.     		return;
  186.     	}
  187.     	this._initValue = values;
  188.     	this.needInitValue = true;
  189.     },
  190.     setHiddenValue: function(hiddenValue) {
  191. 		console.log('====hiddenValue=====>' + hiddenValue);
  192. 		this.hiddenValue = hiddenValue;
  193. 		
  194. 		if(this.ownerCt) {
  195. 	    	if(this.cascadeChilds) {
  196. 	    		for(var i=0; i<this.cascadeChilds.length; i++) {
  197. 	    			var cascadeChild = this.cascadeChilds[i];
  198. 	    			//alert("级联下拉框必须设置级联子下拉框属性：cascadeChild");
  199. 		    		var cascadeParamName = cascadeChild.paramName || 'parentId';
  200. 			    	//this.listeners = Ext.apply({  
  201. 			         //   "select": function (combo, record, index) {  
  202. 			                
  203. 			        //    }  
  204. 			        //}, this.listeners);
  205. 			        var child = this.ownerCt.getComponent(cascadeChild.itemId);
  206. 				    child.getStore().getProxy().extraParams[cascadeParamName] = this.hiddenValue;
  207. 					child.getStore().reload();
  208. 	    		}
  209. 	    	}
  210. 		}
  211.     },
  212.     alignPicker: function() {  
  213.         var me = this,  
  214.         picker, isAbove, aboveSfx = '-above';  
  215.         if (this.isExpanded) {  
  216.             picker = me.getPicker();  
  217.             if (me.matchFieldWidth) {  
  218.                 picker.setWidth(me.bodyEl.getWidth());  
  219.             }  
  220.             if (picker.isFloating()) {  
  221.                 picker.alignTo(me.inputEl, "", me.pickerOffset); // ""->tl  
  222.                 isAbove = picker.el.getY() < me.inputEl.getY();  
  223.                 me.bodyEl[isAbove ? 'addCls': 'removeCls'](me.openCls + aboveSfx);  
  224.                 picker.el[isAbove ? 'addCls': 'removeCls'](picker.baseCls + aboveSfx);  
  225.             }  
  226.         }  
  227.     }  
  228. });


调用方法

195544_kWev_113740.png

  1. Ext.define('Plat.dept.org.role.RuleConditionWin', {
  2. 	extend: 'Ext.window.Window',
  3. 	requires: ['Ark.combo.ComboTree'],
  4. 	listeners: {
  5. 		afterrender: function() {
  6. 			assignDeptIds.setExtValue('id_1,id_2');
  7. 		}
  8. 	},
  9. 	items:[{  
  10. 		xtype: 'arkComboTree',
  11. 		name : 'assignDeptIds',   
  12. 		textFieldName: 'assignDeptNames',// 不设置，默认为 this.name+'Name' 
  13. 		storeUrl : PlatGlobal.contextpath + '/ark/org/orgnization/queryOrgWithChildrenById.do?withCheck=true',
  14. 		//'/ark/plat/dept/org/role/data.json',  
  15. 		//cascade : 'child',//级联方式:1.child子级联;2.parent,父级联,3,both全部级联  
  16. 		//checkModel:'single',//当json数据为不带checked的数据时只配置为single,带checked配置为double为单选,不配置为多选  
  17. 		// width : 270,  
  18. 		rootId : '1',  
  19. 		rootText : 'DRP',  
  20. 		extraParams : {
  21. 			parentId: 'SCENE_NODE_TYPE',
  22. 			withCheck: true
  23. 		}
  24. 	}]
  25. });
  26.  
  27. // 级联使用示例
  28. {  
  29. 	xtype: 'arkComboTree',
  30. 	fieldLabel : '场景图层',
  31. 	name : 'sceneLayerId',   
  32. 	editable: false,
  33. 	checkModel:'single',
  34. 	storeUrl : PlatGlobal.contextpath + '/ark/plat/paper/paperlayout/queryAllSceneLayer.do',
  35. 	//'/ark/plat/dept/org/role/data.json',  
  36. 	//cascade : 'child',//级联方式:1.child子级联;2.parent,父级联,3,both全部级联  
  37. 	//checkModel:'single',//当json数据为不带checked的数据时只配置为single,带checked配置为double为单选,不配置为多选  
  38. 	// width : 270,  
  39. 	rootId : '1',  
  40. 	rootText : 'DRP',  
  41. 	treeNodeParameter : '',
  42. 	// 级联配置
  43. 	cascadeChilds: [{
  44. 		itemId: 'sourceSceneElement',// 对应下面这个combox的itemId
  45. 		paramName: 'sceneLayerId'// 发送后台的参数名称
  46. 	}, {
  47. 		itemId: 'targetSceneElement',
  48. 		paramName: 'sceneLayerId'
  49. 	}]
  50. },{
  51. 	xtype : 'enumCombo',
  52. 	editable: false,
  53. 	fieldLabel : '源场景元素',
  54. 	name : 'sourceSceneElement',
  55. 	itemId: 'sourceSceneElement',// 必须，级联下拉框中父下拉框需要根据这个itemId找到该下拉框
  56. 	dataUrl: PlatGlobal.contextpath + '/ark/plat/paper/paperlayout/querySceneElements.do',
  57. 	displayField: "name",  
  58. 	valueField: "id",  
  59. 	allowBlank : false
  60. }


两种json格式的数据

一,不带复选框的数据

  1. [{
  2.     "text": "To Do", 
  3.     "cls": "folder",
  4.     "expanded": true,
  5.     "children": [{
  6.         "text": "Go jogging",
  7.         "leaf": true
  8.     },{
  9.         "text": "Take a nap",
  10.         "leaf": true
  11.        
  12.     },{
  13.         "text": "Climb Everest",
  14.         "leaf": true
  15.        
  16.     }]
  17. },{
  18.     "text": "Grocery List",
  19.     "cls": "folder",
  20.     "children": [{
  21.         "text": "Bananas",
  22.         "leaf": true
  23.        
  24.     },{
  25.         "text": "Milk",
  26.         "leaf": true
  27.        
  28.     },{
  29.         "text": "Cereal",
  30.         "leaf": true
  31.        
  32.     },{
  33.         "text": "Energy foods",
  34.         "cls": "folder",
  35.         "children": [{
  36.             "text": "Coffee",
  37.             "leaf": true
  38.            
  39.         },{
  40.             "text": "Red Bull",
  41.             "leaf": true
  42.            
  43.         }]
  44.     }]
  45. },{
  46.     "text": "Remodel Project", 
  47.     "cls": "folder",
  48.     "children": [{
  49.         "text": "Finish the budget",
  50.         "leaf": true
  51.        
  52.     },{
  53.         "text": "Call contractors",
  54.         "leaf": true
  55.        
  56.     },{
  57.         "text": "Choose design",
  58.         "leaf": true
  59.        
  60.     }]
  61. }]


 

二.带复选框的数据

 

  1. [{
  2.     "text": "To Do", 
  3.     "cls": "folder",
  4.     "expanded": true,
  5.     "children": [{
  6.         "text": "Go jogging",
  7.         "leaf": true,
  8.         "checked": true
  9.     },{
  10.         "text": "Take a nap",
  11.         "leaf": true,
  12.         "checked": false
  13.     },{
  14.         "text": "Climb Everest",
  15.         "leaf": true,
  16.         "checked": false
  17.     }]
  18. },{
  19.     "text": "Grocery List",
  20.     "cls": "folder",
  21.     "children": [{
  22.         "text": "Bananas",
  23.         "leaf": true,
  24.         "checked": false
  25.     },{
  26.         "text": "Milk",
  27.         "leaf": true,
  28.         "checked": false
  29.     },{
  30.         "text": "Cereal",
  31.         "leaf": true,
  32.         "checked": false
  33.     },{
  34.         "text": "Energy foods",
  35.         "cls": "folder",
  36.         "children": [{
  37.             "text": "Coffee",
  38.             "leaf": true,
  39.             "checked": false
  40.         },{
  41.             "text": "Red Bull",
  42.             "leaf": true,
  43.             "checked": false
  44.         }]
  45.     }]
  46. },{
  47.     "text": "Remodel Project", 
  48.     "cls": "folder",
  49.     "children": [{
  50.         "text": "Finish the budget",
  51.         "leaf": true,
  52.         "checked": false
  53.     },{
  54.         "text": "Call contractors",
  55.         "leaf": true,
  56.         "checked": false
  57.     },{
  58.         "text": "Choose design",
  59.         "leaf": true,
  60.         "checked": false
  61.     }]
  62. }]


 


如果有帮助记得支持一下哦,可能也有不完善的地方欢迎改进!微笑

转载于:https://my.oschina.net/darkness/blog/362435

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/305044
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号