index.js

難得的JavaScript TreeGrid / TreeList

Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL='resources/images/default/s.gif';
	//指定EXT 的占位图片的位置
	var root=new Ext.tree.AsyncTreeNode({
	//声明一个根节点
		id:'0',//id为0
		text:'0',//显示文字为0
		children:[{//子节点
			text:'loading',//显示文字为loading
			iconCls: 'loading',//使用图标为loading 在index.html style 中定义
			leaf:true//是叶子节点,不在包含子节点
		}]
	});
	var treeLoader=new Ext.tree.TreeLoader();//指定一个空的TreeLoader
	var tree = new Ext.tree.TreePanel({//声明一个TreePanel显示tree
		id:'tree',//id为tree
		region:'west',//设定显示区域为东边,停靠在容器左边
		split:true,//出现拖动条
		collapseMode:'mini',//拖动条显示类型为mini,可出现拖动条中间的尖头
		width: 210,//初始宽度
		minSize: 210,//拖动最小宽度
		maxSize: 300,//拖动最大宽度
		collapsible: true,//允许隐藏
		title: "树",//显示标题为树
		loader: treeLoader,//指定数据载入的loader对象,现在定义为空
		lines:true,//出现节点间虚线
		autoScroll:true,//自动出现滚动条
		root:root//根节点为 root 对象
	});
	root.on('expand',gettree);//当根节点展开后触发gettree事件
	
	function gettree(node)
	{//此方法使用mootools框架的AJAX实现对子节点的异步读取,没使用EXT的是为了表达 EXT的灵活性和可扩展性
		if(node.firstChild.text=='loading'){//如果当前展开节点的第一个子节点为loading,则调用异步方法取得子节点数据,否则直接展开
			var url = 'getTree.action';//请求的地址,因为使用的 struts2 所以请求为.action
			var params ='id='+node.id;//请求数据
			//创建Ajax对象(mootools提供)，对应于发送请求
			var myAjax = new Ajax(url ,{method:'post',data:params,onComplete:function(){
			//	url:请求位置 method:请求方式 可以使用get或post data:请求数据 
			//  onComplete:当异步调用完成时调用的方法,即响应内容完全获得后调用该方法
				var myObject = Json.evaluate(this.response.text);
				//将返回的响应数据转换为JS对象,返回数据为JSON格式,Json对象(mootools提供)
				//alert(this.response.text);
				var tl=myObject.tl;//获取tl数组,该数组中数据为子节点数据,由ACTION处理后获得
				//alert(tl);
				for(var i=0;i<tl.length;i++){//循环数组,添加子节点
					var cnode=new Ext.tree.AsyncTreeNode({//声明子节点对象
						//tl[i].id 此处tl为action返回的数据,也就是在action中定义的List tl=new ArrayList();
						//tl中元素都为 treeNode对象,所以可是使用treeNode中属性访问
						//tl[i].id 则访问tl数组中,第i个元素的id属性值
						//tl[i].name 则访问tl数组中,第i个元素的name属性值
						//tl[i].leaf 则访问tl数组中,第i个元素的leaf属性值
						id:tl[i].id+node.id,//id 为服务器返回id+父节点id
						text:tl[i].name+node.id,//显示内容为服务器返回id+父节点id
						leaf:tl[i].leaf,//是否为叶子节点,根据服务器返回内容决定是否为叶子节点
						children:[{//添加子节点,如果服务器返回tl[i].leaf为ture则孩子节点将无法显示
							text:'loading',
							iconCls: 'loading',
							leaf:true
						}]
					});
					cnode.on('expand',gettree);//定义当前节点展开时调用gettree方法,再次异步读取子节点
					node.appendChild(cnode);//将当前节点添加为待展开节点子节点
				}
				node.firstChild.remove();//删除当前节点第一个孩子节点(loading节点)
			}});
			myAjax.request();//发送ajax异步请求
		}
	}
	var Data = [];//定义一个空的data数组,使得表格最开始显示数据为空
	var store=new Ext.data.Store({//定义数据源
			reader: new Ext.data.ArrayReader(//数据读取对象
			{}, [
			   {name: 'c1'},//指定数据列,第一列为c1
			   {name: 'c2'},//指定数据列,第一列为c2
			   {name: 'c3'} //指定数据列,第一列为c3
			]),
			data: Data//使用数据为Data,暂时为空
		});
	var sm=new Ext.grid.CheckboxSelectionModel();//表格复选列
	var selectNode;//当前选择的叶子节点
	var cpage=1;//当前数据显示的页,默认为1
	var ccount=25;//页显示数据个数,默认为25
	var grid=new Ext.grid.GridPanel({//定义表格
		id:'grid',//id为grid
		border:true,//出现边框
		title:'表格',//标题内容为 表格
		region:'center',//设定显示区域为中心,停靠在容器中心
		layout: 'fit',//表格内列内容填充满,按列头比例填充
		ds:store ,//数据源为store 上边定义
		cm: new Ext.grid.ColumnModel([//定义表格显示列头
			new Ext.grid.RowNumberer(),//第一列为编号列
			sm,//第二列为复选列
			{header: "列1", width: 40, sortable: true, dataIndex: 'c1'},
			//显示文字为列1,宽度40,允许排序,使用数据源中c1列数据
			{header: "列2", width: 40, sortable: true, dataIndex: 'c2'},
			{header: "列3", width: 40, sortable: true, dataIndex: 'c3'}
		]), 
		sm:sm,//复选方式按sm定义方式
		bbar:[//底端 工具条
			{iconCls: 'first', handler:function(){ccount=Ext.getCmp('txtCount').value;getData(selectNode,1,ccount);}},
			//使用图标为first(index.html-style中定义)
			//handler :当点击此按钮时触发事件,调用getData方法
			{iconCls: 'pre', handler:function(){ccount=Ext.getCmp('txtCount').value;getData(selectNode,cpage-1,ccount);}},
			'第',new Ext.form.TextField({value:'1',id:'txtPage',width:'20',listeners:{change:function(txt,n,o){if(n>0 && n<9999)getData(selectNode,n,ccount);}} }),'页',
			{iconCls: 'next', handler:function(){ccount=Ext.getCmp('txtCount').value;getData(selectNode,cpage+1,ccount);}},
			{iconCls: 'last', handler:function(){ccount=Ext.getCmp('txtCount').value;getData(selectNode,99999,ccount);}},'-',
			{iconCls: 'loading', handler:function(){ccount=Ext.getCmp('txtCount').value;getData(selectNode,cpage,ccount);}},'-',
			'每页显示',new Ext.form.TextField({value:'25',id:'txtCount',width:'15',listeners:{change:function(txt,n,o){getData(selectNode,cpage,n);}} }),'条数据',
			'->','<div id="msg">共 条数据，当前显示的是 条</div>'
		],
		viewConfig: {
			sortAscText:'升序',
			sortDescText:'降序',
			columnsText:'显示列',
            forceFit:true
        }
	})
	var viewport = new Ext.Viewport({
		layout:'border',
		items:[
			tree,grid
		 ]
	});//end viewport  
	
	tree.on('click',function(node){//当树节点被点击时触发
		if(node.isLeaf()){//如果不是叶子节点则不处理
			//请求的地址
			selectNode=node;//设置选择节点为当前节点
			var url = 'getData.action';//请求位置
			var params ='id='+node.id;//请求数据
			params+='&page=1&count=25';//请求数据
			
			cpage=1;//设定显示页为第一页
			count=25;//设定显示个数为25个
			Ext.getCmp('txtPage').setValue(cpage);//设置工具条中页文本内容为1
			Ext.getCmp('txtCount').setValue(count);//设置工具条中个数文本内容为25
			$('msg').innerHTML='共'+node.id+'条数据，当前显示的是0-25条';//设置工具条中显示文字
			//创建Ajax.Request对象，对应于发送请求
			var myAjax = new Ajax(url ,{method:'post',data:params,onComplete:function(){//异步响应完成时的回调方法
					var myObject = Json.evaluate(this.response.text);
					var dl=myObject.dl;//返回的数据数组,此处返回的数据都为object类型,另我很纳闷
					var data=[];
					for(var i=0;i<dl.length;i++){//将返回dl数组,转换为2维数组,grid显示用
						data[i]=new Array(dl[i].c1,dl[i].c2,dl[i].c3)
						//dl[i].c1 此处dl为action返回的数据,也就是在action中定义的List dl=new ArrayList();
						//dl中元素都为 data对象,所以可是使用 data中属性访问
						//dl[i].c1 则访问dl数组中,第i个元素的c1属性值
					}
					store.loadData(data);//数据源从新载入数据,显示到grid中
					
				}
				
			});
			myAjax.request();//发送请求
		
		}
	})
	function getData(node,page,count){//读取数据的方法,翻页时调用
		//node当前选择的节点,page显示页,count显示个数
		if (!node) {alert('请先选择一个叶节点!');return;}//如果还没有叶子节点被选中则提示
		if (count<1 && count>9999) count=25;//如果显示个数不在1-9999中间,则设置为25
		cpage=page;//当前页改为显示页值
		if (cpage<1) cpage=1;//如果小于1则为1
		if (cpage>node.id/count) cpage=Math.floor(node.id/count+1);//如果大于最大页则为最大页

		Ext.getCmp('txtPage').setValue(cpage);//设置工具条中页文本内容为当前页
		Ext.getCmp('txtCount').setValue(count);//设置工具条中个数文本内容为当前显示个数
		var url = 'getData.action';//请求位置
		var params ='id='+node.id;//请求数据
		params +='&page='+cpage+'&count='+count;//请求数据
		var start=(cpage-1)*count+1;
		var end=cpage*count;
		if (end>node.id)end=node.id;
		$('msg').innerHTML='共'+node.id+'条数据，当前显示的是'+start+'-'+end+'条';
		//alert(params);
		//创建Ajax.Request对象，对应于发送请求
		var myAjax = new Ajax(url ,{method:'post',data:params,onComplete:function(){
				var myObject = Json.evaluate(this.response.text);
				var dl=myObject.dl;
				var data=[];
				for(var i=0;i<dl.length;i++){
					data[i]=new Array(dl[i].c1,dl[i].c2,dl[i].c3)
				}
				store.loadData(data);
			}
		});
		myAjax.request();
	}
});