1. 程式人生 > >extjs4 treegrid動態增加樹節點

extjs4 treegrid動態增加樹節點

function appendChild(node, o) { 
    if (o.children != null && o.children.length > 0) { 
        for (var a = 0; a < o.children.length; a++) { 
        	
            var n ={ 
                text:o.children[a].text, 
                duration:o.children[a].duration, 
                user:o.children[a].user, 
                nodeType:o.children[a].nodeType, 
                 needYear:o.children[a].needYear, 
                 needMonth:o.children[a].needMonth, 
                leaf:o.children[a].leaf, 
                iconCls:o.children[a].iconCls 
            }; 
        	node.appendChild(n);
        	
        	n = node.childNodes[node.childNodes.length-1];
        	if(n.data.needMonth)
				{
					for(i=0;i<12;i++)
					{
						 var month ={ 
			                text:i+1 + '月結算', 
		               		nodeType:'month',
			                leaf:true, 
			                iconCls:o.children[a].iconCls 
			            }; 
						 n.appendChild(month); 
					}
				}
        	
        	if(n.data.needYear)
    		{
    			var years = {};
    			years.children =yearData;/*TreeGrid的json資料[{……},{……}]*/   
				appendChild(n, years); 
				
    		}
        	appendChild(n, o.children[a]); 
        } 
    } 
} 

var yearData=[{ text:new Date().getFullYear(), needMonth:true, nodeType:'year', iconCls:'task-folder', expanded: true},{ text:new Date().getFullYear()+1,needMonth:true,nodeType:'year', duration:2, user:'Core Team', iconCls:'task-folder'}]; var queryData=[{ text:'總體規劃', needYear:true, nodeType:'process', iconCls:'task-folder', expanded: true},{ text:'專案結算', duration:2, nodeType:'process',needYear:true, expanded: true, iconCls:'task-folder'},{ text:'總體歸檔', duration:2, nodeType:'process',needYear:true, expanded: true, iconCls:'task-folder'}];var queryRoot = { text: '根節點', expanded: true };
QueryTree = Ext.extend(Ext.tree.Panel,{constructor : function(_config) {if (_config == null) {_config = {};}Ext.apply(this, _config);this._year = null;this._process = null;QueryTree.superclass.constructor.call(this,{autoScroll : true,id:'queryTree',//border : false,// layout:'accordion', rootVisible:false,// collapseDirection:'left',// collapsible: true,// region:'west', width: 180,// collapsed : true,// minWidth: 130,// minHeight: 140,////height : window.screen.height * 0.8,// columnWidth : .117,// store : new Ext.data.TreeStore(// {// proxy : {// type : 'ajax',// url : 'xmgl/pro-info-manage!ztProTree.action',// reader : 'json'// },// autoLoad : true,// fields : [// 'id',// 'text',// {// name : 'leaf',// type : 'boolean'// }, 'orders',// 'logiccode',// 'parentGuId',// 'nodeType'],////// root : {// text : '所有',// nodeType:'root',// // id : '-2',// expanded : true// },// listeners : {// 'beforeload' : {// fn : function(// _store,// _op, _e) {// _op.params.nodeType = _op.node.get('nodeType');//// if(_op.node.get('nodeType') == 'process')// {// _op.params.process = _op.node.get('process');//// }// if(_op.node.get('nodeType') == 'year')// {// _op.params.process = _op.node.parentNode.data.get('process');// _op.params.nodeType = _op.node.get('nodeType');//// }////// },// scope : this// }// }// })// ,//listeners : {'itemclick' : {fn : this.onTreeNodeClick,scope : this},'itemcontextmenu' : function(menutree, record, items, index, e) {e.preventDefault();e.stopEvent();var obj = record;if(!obj.parentNode)return;if(obj.get('leaf')==true)return;else {var nodemenu = new Ext.menu.Menu({floating : true,items : [ {text : "新增子節點",handler : function() {Ext.MessageBox.prompt("標題", "請輸入",function(btn, text) {if (btn == "ok") {record.appendChild({text : text,id : new Date().getTime(),expanded : true,leaf : true});}}, this, false, // 表示文字框為多行文字框"新新增子節點");},listeners : {render : function(com) {if(record.get('leaf') == true)com.setVisible(false);}}} ]});nodemenu.showAt(e.getXY());}}} });this.setRootNode(queryRoot); var nodes = {}; nodes.children =queryData;/*TreeGrid的json資料[{……},{……}]*/ appendChild(this.getRootNode(), nodes); // this.getRootNode().setVisable(false);},/** * 樹的節點單擊事件 * * @param {} * _node 節點 * @param {} * _e */onTreeNodeClick : function(_tree, _record, _node, _index,_e) {var _param = {};if( _record.get('nodeType') == 'year'){_param.year = _record.get('text');_param.process = _record.parentNode.get('text');this._year = _record.get('text');this._process = _record.parentNode.get('text');}if( _record.get('nodeType') == 'process'){_param.process = _record.get('text');this._year = null;this._process = _record.get('text');}if( _record.get('nodeType') == 'month'){_param.jsy = _record.get('text').toString().substring(0,2);_param.year = _record.parentNode.get('text');_param.process = _record.parentNode.parentNode.get('text');this._year = null;this._process = _record.parentNode.parentNode.get('text');}Ext.getCmp('indexPanel')._grid._baseParam = _param;Ext.getCmp('indexPanel')._grid.reLoadData();Ext.getCmp('indexPanel')._grid._baseParam ={};},changeHandler : function(_combo,_record,_op){var _tree = _combo._tree;if(_record.length>0){var voltageLevelId = _record[0].raw.voltageLevelId;var _volNode = _tree.getStore().getNodeById(voltageLevelId);if(!_volNode.get('expanded'))_volNode.expand();setTimeout(function(){_tree.getSelectionModel().select( _tree.getStore().getNodeById(_combo.getValue()));},2000);}},checkParentNode : function(_node) {if (_node.data.checked && _node.data.id != 0) {if (!_node.parentNode.data.checked) {_node.parentNode.set('checked', true);this.checkParentNode(_node.parentNode);}}},checkChildNode : function(_node) {var _children = _node.childNodes;for ( var i = 0; i < _children.length; i++) {_children[i].set('checked', _node.get('checked'));this.checkChildNode(_children[i]);}}});