`

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;   
    }

 

 

分享到:
评论

相关推荐

    jQuery EasyUI框架中的Datagrid数据表格组件结构详解

    jQuery EasyUI是一个旨在辅助HTML5打造更好的Web界面的框架,而其中的Datagrid组件也是非常强大,这里我们就来看一下jQuery EasyUI框架中的Datagrid数据表格组件结构详解

    asp.net知识库

    自定义通用System.Web.UI.IHierarchicalDataSource简单实现 在 ASP.NET 2.0 中创建 Web 应用程序主题 ASP.NET 2.0 中的数据访问 ASP.NET 2.0:弃用 DataGrid 吧,有新的网格控件了! 将 ASP.NET 2.0 应用程序服务...

    基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用

    我们知道,一般Web界面包括的界面控件有:单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选择、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示信息...

    基于MVC4+EasyUI的Web开发框架形成之旅

    我们知道,一般Web界面包括的界面控件有:单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选择、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示信息...

    Jquery EasyUI Frame Wanglim V1.0

    基于EasyUI写的一个Web界面框架, 1、页面根据窗口自动计算布局。 2、应用Plan、datagrid、easyui-layout、tree等组件 初学者很有用。

    smart-webcomponents:专业Web应用程序的Web组件和自定义元素

    智能UI是用于构建Web组件和自定义元素的框架。 Smart与Stencil和LitElement相似。 它支持双向数据绑定,模板,属性更改通知,类似Typescript的类型检查和验证。 Smart没有第三方依赖性。 它是纯Javascript代码。 60...

    asp.net分页设计

    该文讨论了在ASP.NET 框架下对WEB 数据库几种实现分页 显示的方法。对利用自带分页功能的数据控件(如:DataGrid)和对于没有自带分页功能的控件(如:DataList)进行分页分别结合实例 进行了详细的阐述。

    jquery-easyui-1.3.6.zip

    jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解...

    ASP.net一夜速成视频教程列表

    2.设置web.config,学用DataGrid控件 3.为DataGrid网格控件添加后台代码 4.创建一个新闻详细内容页面 5.为新闻详细页添加后台代码 ·第四章 管理员模块(已发布)  6.设计“更新、删除”的管理员界面 7.添加...

    jQWidgets:Angular,Vue,React,Web组件,Blazor,Javascript,jQuery和ASP .NET Framework,

    jQWidgets是用于Angular,React,Vue,Blazor,Web组件,Javascript和ASP .NET的高级UI框架。 什么是jQWidgets? jQWidgets代表一个基于Javascript的框架,用于构建可在PC,Touch和移动设备上运行的基于Web的应用...

    GoodProject Maven Webapp.zip

    Easyui:jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,...

    gwt-pf:从 code.google.compgwt-pf 自动导出

    GWT Pleso Framework 是一个基于 Google Web Toolkit (GWT) 的高级框架,用于创建可视化 AJAX 数据库前端用户界面。 这是某种复杂的 CRUD 框架。 GWT Pleso Framework 使您能够基于业务逻辑类创建自动生成的用户...

    asp.net 操作excel的实现代码

     ASP.NET是Microsoft公司极力推荐的一个产品,作为.NET FrameWork框架中的一个重要组成部分,他主要用于Web设计。全新的设计理念、强大功能使得ASP.NET正在受到越来越多的程序设计人员的欢迎。也正是ASP.NET的强大...

    构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统

    4. 一个样例程序,他实现了利用easyui datagrid的列表显示,用了jquery ajax的增删改。 5. 数据验证注解 6. 权限管理系统,他将精确到每个按钮,我们将在过滤器判断权限,你的代码非常简洁,只需要一个数据注解就...

    flex3的cookbook书籍完整版dpf(包含目录)

    16.4.节设计图表的刻度线 16.5.节为图表创建自定义标签 16.6.节创建列状图的明细项目效果 16.7节为图表的元素更换皮肤 16.8.节使用ActionScript动态添加和去除图表中的列 16.9.节重叠多个图表 16.10.节拖曳图表中的...

    透视图:通过WebAssembly进行流数据透视

    通过WebWorker(WebAssembly)或WebSocket(Python / Node)与框架无关的用户界面组件和 Widget,以及一组Datagrid和 Chart插件。 `例子 超市奥运自定义样式 可编辑的流媒体CSV IEX云纽约市市民自行车JupyterLab...

    WPF编程宝典 part1

    11.3.5 Blend中的设计时行为支持 271 11.4 小结 271 第Ⅲ部分 图画和动画 第12章 形状、画刷和变换 275 12.1 理解形状 275 12.1.1 Shape类 276 12.1.2 矩形和椭圆 277 12.1.3 改变形状的尺寸和放置形状 278 12.1.4 ...

Global site tag (gtag.js) - Google Analytics