`
luoyexian
  • 浏览: 51289 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

web界面框架的设计之四--DataGrid的实现

    博客分类:
  • flex
阅读更多

DataGrid的实现和翻页

1.mxml代码:

<mx:VBox width="100%" height="100%" backgroundColor="#ffffff">
			<mx:HBox width="100%" height="100%" id="hbox2">
				<mx:DataGrid width="100%" height="100%" id="dg" rowCount="20"  fontSize="12">
					<mx:columns>
						<mx:DataGridColumn headerText="ID" dataField="ID" visible="false"/>
						<mx:DataGridColumn headerText="模块名称" dataField="ModuleName" width="150"/>
						<mx:DataGridColumn headerText="父亲模块" dataField="ModuleID" width="150"/>
						<mx:DataGridColumn headerText="链接模块" dataField="Hreflink" width="150"/>
						<mx:DataGridColumn headerText="排          序" dataField="Sort" width="80"/>
						<mx:DataGridColumn headerText="描          述" dataField="Description"/>
					</mx:columns>
				</mx:DataGrid>
			</mx:HBox>
			<mx:HBox width="100%" height="28"  verticalAlign="middle" horizontalAlign="right">
				<ns1:SplitPage height="32" id="splitPage" clickSplitEvent="clicksplitPage(event);">
				</ns1:SplitPage>
			</mx:HBox>
		</mx:VBox>

  

2.splitPage.mxml 组件

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="32" 
	backgroundColor="#ffffff" fontSize="12">
	<mx:Metadata>
    	[Event(name="clickSplitEvent","MyEvent.SplitEvent")]
    </mx:Metadata>
    <mx:Script>
    	<![CDATA[
    		import MyEvent.SplitEvent;
    		import mx.controls.Alert;
    		private var page:Number;
    		private var clickEvent:SplitEvent; 
    		
    		
    		//第一页
    		private function first(event:Event):void{
    			if(Number(currentPage.text) ==1) return;
    			page = 1;
    			clickEvent = new SplitEvent("clickSplitEvent",page);
				dispatchEvent(clickEvent);
    		}
    		
    		//上一页
    		private function previous(event:Event):void{
    			if(Number(currentPage.text) ==1) return;
    			page = new Number(currentPage.text)-1;
    			clickEvent = new SplitEvent("clickSplitEvent",page);
				dispatchEvent(clickEvent);
    		}
    		
    		//下一页
    		private function nexts(event:Event):void{
    			if(Number(currentPage.text) ==Number(pageSize.text)) return;
    			page = new Number(currentPage.text)+1;
    			clickEvent = new SplitEvent("clickSplitEvent",page);
				dispatchEvent(clickEvent);
    		}
    		
    		//最后一页
    		private function lasts(event:Event):void{
    			if(Number(currentPage.text) ==Number(pageSize.text)) return;
    			page = new Number(pageSize.text);
    			clickEvent = new SplitEvent("clickSplitEvent",page);
				dispatchEvent(clickEvent);
    		}
    		
    		//下拉框
    		private function selectPage(event:Event):void{
    			page = new Number(pageSelects.selectedItem.data);
    			clickEvent = new SplitEvent("clickSplitEvent",page);
				dispatchEvent(clickEvent);
    		}
    	]]>
    </mx:Script>
	<mx:HBox width="100%" height="100%" horizontalAlign="right" verticalAlign="middle" horizontalGap="1">
		<mx:Label text="共"/>
		<mx:Label id="total" text=""/>
		<mx:Label text="条"/>
		<mx:Spacer width="5"/>
		<mx:Label id="currentPage" text="" /><mx:Label text="/" width="13"/>
		<mx:Label id="pageSize" text=""/>	
		<mx:Label text="页"/>
		<mx:Spacer width="5"/>
		<mx:Image id="top" click="first(event);" x="628" y="7" height="20" source="images/top.gif" width="26"/>
		<mx:Image id="privous" click="previous(event);" x="628" y="7" height="20" source="images/privous.gif" width="26"/>
		<mx:Spacer width="5"/>
		<mx:ComboBox width="94" id="pageSelects" close="selectPage(event);"></mx:ComboBox>
		<mx:Spacer width="5"/>
		<mx:Image id="next" click="nexts(event);" x="628" y="7" height="20" source="images/next.gif" width="26"/>
		<mx:Image id="last" click="lasts(event);" x="628" y="7" height="20" source="images/bottom.gif" width="26"/>
		<mx:Spacer width="10"/>
			
		
	</mx:HBox>
</mx:Canvas>

   

2.as实现代码:

 

//获取列表信息
		    private function getlist(page:Number,lineSize:Number):void
		    {
		    	menuRo= new RemoteObject("menuService"); 
		    	operation = menuRo.getOperation("getMenuList");
				menuToken = operation.send(page,lineSize);
				menuToken.addResponder(new AsyncResponder(success,null));  
		    }
		    
		    //成功返回处理
			public function success(result:Object,token:Object=null):void
			{
				var eve:ResultEvent = result as ResultEvent;
				if(eve.result != null)
				{			
					var returnArray:Array = eve.result as Array;
					var returnString:String = returnArray[0];
					var xmlList:XMLList = new XMLList(returnString);
					xmlListCollection = new XMLListCollection(xmlList);
					dg.dataProvider = xmlListCollection;
					
					splitPage.currentPage.text = new String(returnArray[1]);
					if(returnArray[1] ==1){
						splitPage.total.text=new String(returnArray[2]);
						splitPage.pageSize.text=new String(returnArray[3]);
						splitPage.pageSelects.dataProvider=returnArray[4];
						
					}
					splitPage.pageSelects.selectedIndex=returnArray[1]-1;
				}
			}
//翻页处理
			private function clicksplitPage(event:Event):void{
				var nextPage:SplitEvent = event as SplitEvent;
				var page:Number = nextPage.current_page;
				getlist(page,lineSize);
			}

 

3.java代码:

public Object[] getMenuList(int current_page, int lineSize) { 
		Object[] obj = new Object[5];
		int totalRecord =0;
		int pages = 0;
		List pageSelect = new ArrayList();
		if(current_page == 0 || current_page ==1){
			current_page = 1;  //当前页
			totalRecord = this.service.getAllCount("TFunction")-1;
			pages =((totalRecord+lineSize-1)/lineSize);
			pageSelect = PagComboBox.listToxml(pages);
		}
		List list = new ArrayList();
		list = this.service.findAllObjects("TFunction", current_page, lineSize,"");
		
		String listXml ="";
		if(list.size()>0){
			listXml = listToxml(list);
			
		}
		
		obj[0] = listXml;
		obj[1] = current_page;
		obj[2] = totalRecord;
		obj[3] = pages;
		obj[4] = pageSelect;
		
        return obj;   
    }

/**
	 * 把list对象转化成XML   
	 * @param list
	 * @return 
	 * 2010-2-9	
	 * Administrator
	 */
    private String listToxml(List list) {   
        String listXml = "";
        List listF =this.service.findAllObjects("TFunction", 0, 0,"");
        for (int i = 0; i < list.size(); i++) {   
        	TFunction tFunction = (TFunction) list.get(i);
        	String moduleid ="";
        	if(tFunction.getModuleId() ==0){
    			moduleid="权限管理系统";
    			continue;
    		}else{
	        	for(int j=0;listF !=null && j<listF.size();j++){
	        		TFunction tF = (TFunction) listF.get(j);
	        		if(tFunction.getModuleId() == tF.getId()){
	        			moduleid = tF.getModuleName();
	        			break;
	        		}
	        		
	        	}
    		}
			listXml += "<functions>\n";
        	listXml += "<ID>"+tFunction.getId()+"</ID>\n";
        	listXml += "<ModuleName>"+tFunction.getModuleName()+"</ModuleName>\n";
        	listXml += "<ModuleID>"+moduleid+"</ModuleID>\n";
        	listXml += "<Hreflink>"+tFunction.getHreflink()+"</Hreflink>\n";
        	listXml += "<Sort>"+tFunction.getSort()+"</Sort>\n";
        	listXml += "<Description>"+tFunction.getDescription()+"</Description>\n";
        	listXml +="</functions>";
        }
        return listXml;   
    }

 

 

分享到:
评论

相关推荐

    好用简单漂亮在WEB界面框架

    1. **什么是WEB界面框架**:WEB界面框架是一组预先设计和编码的组件库,用于简化网页界面的开发过程。这些框架通常包括CSS样式、JavaScript库和HTML模板,以实现一致的设计风格、响应式布局和交互功能。 2. **...

    EasyUI-CRUD-DataGrid

    EasyUI 是一个基于 jQuery 的前端框架,主要用于构建用户界面,尤其在Web应用中提供丰富的组件和样式,使得开发者能够快速创建美观且功能齐全的页面。DataGrid 是 EasyUI 中的一个核心组件,它是一个数据表格,可以...

    Laravel开发-laravel-datagrid-builder

    总的来说,"Laravel开发-laravel-datagrid-builder"项目提供了一种高效且易于维护的方式来在Laravel应用中实现数据网格功能,结合Bootgrid,你可以快速创建出美观且功能强大的数据展示界面。通过熟悉其工作原理和...

    商业编程-源码-DataGrid数据增删及分页演示.zip

    DataGrid控件通常是基于Web或Windows应用程序的,它允许用户以表格形式查看和编辑数据。在这个示例中,你可能会学习到如何将数据库中的数据绑定到DataGrid上,以及如何通过编程方式处理用户在DataGrid上的交互,如...

    datagrid-detailview.js datagrid-bufferview.js datagrid-groupview.js

    在IT领域,特别是Web开发中,EasyUI是一个广泛使用的JavaScript框架,它基于jQuery,用于构建用户界面。EasyUI提供了一套完整的组件,如表格(datagrid)、对话框、表单等,帮助开发者快速创建功能丰富的网页应用。...

    easyui-datagrid2-demo.zip

    EasyUI 是一个基于 jQuery 的前端框架,用于快速构建用户界面,尤其适合开发管理类Web应用。其中 Datagrid 是 EasyUI 的一个重要组件,它提供了一种表格形式的数据展示和操作功能。"easyui-datagrid2-demo.zip" 文件...

    datagrid-groupview.js

    在给定的标题"datagrid-groupview.js"中,我们可以看出这是一个针对jQuery EasyUI Datagrid组件的扩展,用于实现表格数据的分组显示功能。现在,我们将深入探讨这个知识点。 首先,jQuery EasyUI的Datagrid组件是一...

    datagrid-export.zip

    这个“datagrid-export.zip”文件提供了一种解决方案,使得开发者能够将EasyUI-datagrid中的数据按照其在界面上的样式,包括合并的单元格、复杂的表头、背景色和文字颜色等,方便地导出到Excel中,实现“所见即所得...

    datagrid-scrollview-demo

    【标题】"datagrid-scrollview-demo" 是一个基于DataGrid组件的滚动视图示例项目,主要展示了如何在网页中实现数据表格的高效滚动浏览功能。DataGrid是前端开发中常用的一种展示大量数据的控件,它能够以表格的形式...

    EasyUI DataGrid过滤用法实例

    EasyUI 是一个基于 jQuery 的 UI 框架,它提供了丰富的组件,包括表格(DataGrid)等,使得 Web 应用程序的界面开发更加便捷。在这个"EasyUI DataGrid 过滤用法实例"中,我们将深入探讨如何利用 EasyUI 的 DataGrid ...

    Spring Boot 系列教程 EasyUI-datagrid

    EasyUI则是一个轻量级的前端框架,常用于构建用户界面,而datagrid是EasyUI中的一个组件,用于展示数据表格,提供了丰富的数据操作功能。本教程将深入讲解如何在Spring Boot项目中集成EasyUI的datagrid,以实现高效...

    EasyUI_05-datagrid-src.zip

    EasyUI 是一个基于 jQuery 的前端框架,主要用于构建用户界面,尤其在企业级Web应用中广泛应用。这个名为 "EasyUI_05-datagrid-src.zip" 的压缩包文件很可能包含的是EasyUI框架中关于datagrid组件的源代码和相关资源...

    datagrid

    - 在Java环境中,DataGrid可能与Swing、JavaFX等桌面应用框架,或者JSF、Vaadin等Web框架结合使用。 7. **文件"DataGrid.java"**: - 这个文件很可能是DataGrid组件的具体实现代码,包含了类定义、方法和事件处理...

    datagrid单元格上点击弹出窗口(官网例子)

    在IT行业中,datagrid组件是常用于展示数据列表的控件,尤其在开发桌面应用程序或Web应用时。在标题“datagrid单元格上点击弹出窗口(官网例子)”中提到的功能,是实现用户在datagrid的某一单元格上点击时,能够弹...

    datagrid-detailview.js

    在IT领域,尤其是在Web开发中,`EasyUI`是一个基于jQuery的前端框架,它提供了丰富的UI组件,使得开发者能够快速构建用户界面。本篇将详细探讨`datagrid-detailview.js`在实现EasyUI datagrid主从表功能中的作用,...

    easyui的datagrid生成合并行,合计计算价格

    在IT行业中,EasyUI是一个基于JavaScript和jQuery的前端框架,它提供了一系列的UI组件,用于构建用户界面。在描述中提到的"easyui的datagrid生成合并行,合计计算价格",指的是如何使用EasyUI的DataGrid组件来实现...

    bootstrap的datagrid组件

    总的来说,Bootstrap的DataGrid组件是Web开发中的一个强大工具,它集成了数据展示、操作和检索的核心功能,能够帮助开发者快速构建数据驱动的用户界面,提升应用的用户体验。通过熟练掌握和灵活运用,开发者可以创建...

    easyUI的dataGrid的使用DEMO

    EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,帮助开发者快速构建用户界面。在这些组件中,`dataGrid` 是一个非常重要的数据展示控件,它类似于 HTML 的表格,但提供了更多功能,如分页、...

    easyui-datagrid&&easyui-tree实例

    在本文中,我们将深入探讨如何使用EasyUI框架与ASP.NET技术来实现数据网格(datagrid)与数据库的交互,以及如何构建动态的树形结构(tree)来加载数据库数据。EasyUI是一个基于jQuery的轻量级前端框架,它提供了一...

    asp.net-datagrid控件实例

    ASP.NET是微软开发的一种Web应用程序框架,用于构建动态网站、Web应用和服务。在ASP.NET中,`DataGrid`控件是一个强大的数据展示工具,它允许开发者以表格的形式展示来自数据库或其他数据源的数据。本实例将深入讲解...

Global site tag (gtag.js) - Google Analytics