`

MVC结合Easyui Portal 实例

MVCjQueryjson框架 
阅读更多
本文介绍bbossgroups mvc结合jquery easyui datagrid portal的一个简单案例，分3部分：
第一部分：案例效果
第二部分：实战-下载案例工程和部署案例
第三部分：功能和代码实现介绍

本案例大致功能描述如下：

1.通过bbossgroups 控制器方法返回对象，然后mvc框架将对象转换为json对象返回给jquery easyui datagrid展示
2.jquery easyui datagrid通过指定对应控制器方法的请求url来获取datagrid的数据，然后展示出来
3.同时结合jquery easyui portal插件来做界面集成展示。


第一部分 案例效果

介绍之前先看下效果图：


第二部分 实战部署指南：
1 下载示例工程
http://dl.iteye.com/topics/download/0f97d852-03c3-39af-a8ee-a0108fb3530c
2.将mvc工程导入eclipse，并编译通过
3.准备好tomcat 6和jdk 15或以上
4 在tomcat 6的conf\Catalina\localhost下增加datagride.xml文件，内容为： 
<?xml version='1.0' encoding='utf-8'?>
<Context docBase="D:\workspace\easyuidatagrid\WebRoot" path="/datagride" debug="0" reloadable="false">
</Context>


用户可以根据自己的情况设置docBase属性的值

5.启动tomcat，输入以下地址即可访问本实例了，呵呵：
http://localhost:8080/datagride/examples/index.page
应该可以看到上述的效果示意图中的界面了。

第三部分 功能介绍和代码实现：


3.下面看控制器的实现： 
package org.frameworkset.mvc;

import java.util.ArrayList;
import java.util.List;

import org.frameworkset.util.annotations.RequestParam;
import org.frameworkset.util.annotations.ResponseBody;


/**
 * <p>PortalController.java</p>
 * <p> Description: </p>
 * <p> bboss workgroup </p>
 * <p> Copyright (c) 2009 </p>
 * @Date 2011-6-19
 * @author biaoping.yin
 * @version 1.0
 */
public class EasyUIDatagridController
{
	private static List<Address> addresses ;
	static 
	{
		addresses = new ArrayList<Address>();
		for(int i = 0; i < 10000; i ++)
		{
			Address address = new Address();
			address.setAddr("地址-" + i);
			address.setCode("代码-" + i);
			address.setCol4("col4 数据-" + i);
			address.setName("名称" + i);
			addresses.add(address);
		}
	}
	public String index()
	{
		return "path:portal";
	}
	
	public @ResponseBody(datatype="json") Addresses datagrid_data_pagine(@RequestParam(name="page",defaultvalue="1") int page,@RequestParam(name="rows",defaultvalue="10") int rows)
	{
		return pagerList(addresses,(page - 1)*rows,rows);
		
	}
	public @ResponseBody(datatype="json") GouWuChe datagrid_data_footer()
	{
		GouWuChe container = new GouWuChe();
		container.setTotal(28);
		List<Productor> rows = new ArrayList<Productor>();
		for(int i = 0; i < 28; i ++)
			rows.add( buildProductor(i));
		container.setRows(rows);
		container.setFooter(buildFooterProductor());
		return container;
	}
	
	private Productor buildProductor(int i)
	{
		Productor p = new Productor();
		p.setProductid("FI-SW-0" + i);
		p.setUnitcost(10.00 + i);
		p.setStatus("P");
		p.setListprice(16.50 + i);
		if(i % 3 == 0)
			p.setAttr1("桃子");
		else if(i % 3 == 1)
			p.setAttr1("火龙果");
		if(i % 3 == 2)
			p.setAttr1("芒果");	
		p.setItemid("EST-" + i);
		return p;
	}
	
	private List<Productor> buildFooterProductor()
	{
		Productor p = new Productor();
		p.setProductid("Average:" );
		p.setUnitcost(19.80);		
		p.setListprice(60.40);
		List<Productor> footer = new ArrayList<Productor>();
		footer.add(p);
		p = new Productor();
		p.setProductid("Total:" );
		p.setUnitcost(198.00);
		p.setListprice(604.00);
		footer.add(p);
		return footer;
	}
	/**
	 * 对列表进行分页操作,数据源是一个列表
	 * @param datas 列表数据
	 * @param offset 获取数据的起始位置
	 * @param pageItems 获取数据的条数
	 * @return ListInfo 对分页数据和总记录条数的封装类
	 */

	private static Addresses pagerList(List datas,int offset,int pageItems)
	{
		if(datas == null)
			return null;
		List list = new ArrayList();
		if(offset >= datas.size())
		{
		    int temp = datas.size() % pageItems;
		    offset = datas.size() - temp;
		}
		for(int i = offset; i < datas.size() && i < offset + pageItems; i ++)
		{
		    list.add(datas.get(i));
		}
		Addresses address = new Addresses();
		address.setRows(list);
		address.setTotal(datas.size());
		return address;
	}
}


4.依赖的po对象-GouWuChe 和Productor，GouWuChe对象将被转换为json对象，是根据jquery easyui datagrid要求的结构定义的json对象容器，包含的产品对象Productor是具体的po记录对象。
GouWuChe 对象的结构如下： 
public class GouWuChe
{
	private long total;//总记录数
	private List<Productor> rows;//要显示的记录
	private List<Productor> footer;//统计页脚，包含平均价格和总价格
	//get和set方法，省略掉
}


Productor对象结构如下,包含产品的所有属性： 
public class Productor
{
	private String productid;
	private double unitcost;
	private String status;
	private double listprice;
	private String attr1;
	private String itemid;
       //get和set方法，省略掉
}


5.依赖的po对象-Addresses 和Address，Addresses 对象将被转换为json对象，是根据jquery easyui 分页datagrid要求的结构定义的json对象容器，包含的产品对象Address是具体的po记录对象。
Addresses对象结构如下,包含产品的所有属性： 
public class Addresses
{
	private long total;
	private List<Address> rows;
 //get和set方法，省略掉
}


Addresses对象结构如下,包含产品的所有属性： 
public class Address
{
	private String code;
	private String name;
	private String addr;
	private String col4;
       //get和set方法，省略掉
}


6.mvc控制器配置： 
<properties>
	<property name="/examples/*.page"
		path:portal="/examples/portal.jsp"
		class="org.frameworkset.mvc.EasyUIDatagridController">
	</property>
</properties>

7.再来看看jquery easyui datagrid页面代码-portal.jsp： 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bboss mvc demo -jQuery EasyUI DataGrid Portal</title>
	<link rel="stylesheet" type="text/css" href="../include/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../include/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../include/jquery-easyui-portal/portal.css">
	<style type="text/css">
		.title{
			font-size:16px;
			font-weight:bold;
			padding:20px 10px;
			background:#eee;
			overflow:hidden;
			border-bottom:1px solid #ccc;
		}
		.t-list{
			padding:5px;
		}
	</style>
	<script type="text/javascript" src="../include/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../include/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../include/jquery-easyui-portal/jquery.portal.js"></script>
	<script>
		$(function(){
			$('#pp').portal({
				border:false,
				fit:true
			});
			//add();
			
			$('#test').datagrid({
			
				iconCls:'icon-save',
				width:600,
				height:350,
				fit:true,border:false,
				nowrap: false,
				striped: true,
				url:'datagrid_data_pagine.page',
				sortName: 'code',
				sortOrder: 'desc',
				remoteSort: false,
				idField:'code',
				frozenColumns:[[
	                {field:'ck',checkbox:true},
	                {title:'code',field:'code',width:80,sortable:true}
				]],
				columns:[[
			        {title:'Base Information',colspan:3},
					{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
						formatter:function(value,rec){
							return '<span style="color:red">Edit Delete</span>';
						}
					}
				],[
					{field:'name',title:'Name',width:120},
					{field:'addr',title:'Address',width:120,rowspan:2,sortable:true,
						sorter:function(a,b){
							return (a>b?1:-1);
						}
					},
					{field:'col4',title:'Col41',width:150,rowspan:2}
				]],
				pagination:true,
				rownumbers:true,
				toolbar:[{
					id:'btnadd',
					text:'Add',
					iconCls:'icon-add',
					handler:function(){
						$('#btnsave').linkbutton('enable');
						alert('add')
					}
				},{
					id:'btncut',
					text:'Cut',
					iconCls:'icon-cut',
					handler:function(){
						$('#btnsave').linkbutton('enable');
						alert('cut')
					}
				},'-',{
					id:'btnsave',
					text:'Save',
					disabled:true,
					iconCls:'icon-save',
					handler:function(){
						$('#btnsave').linkbutton('disable');
						alert('save')
					}
				}]
			});
			var p = $('#test').datagrid('getPager');
			if (p){
				$(p).pagination({
					onBeforeRefresh:function(){
						alert('before refresh');
					}
				});
			}
		});
		
	}
	</script>
</head>
<body class="easyui-layout">
	
	<div region="center" border="false">
		<div id="pp" style="position:relative">
			
			<div style="width:40%;">
				<div title="Clock" collapsible="true"   closable="true" style="text-align:center;background:#f3eeaf;height:150px;padding:5px;">
					<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="100">
				      <param name="movie" value="http://www.respectsoft.com/onlineclock/analog.swf">
				      <param name=quality value=high>
				      <param name="wmode" value="transparent">
				      <embed src="http://www.respectsoft.com/onlineclock/analog.swf" width="100" height="100" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
				    </object>
				</div>
				<div id="pgrid" title="DataGrid" collapsible="true" closable="true"  style="height:300px;">
					<table class="easyui-datagrid" style="width:650px;height:auto"
							fit="true" border="false"
							singleSelect="true"
							idField="itemid" url="datagrid_data_footer.page" showFooter="true">  
						<thead>
							<tr>
								<th field="itemid" width="60">Item ID</th>
								<th field="productid" width="60">Product ID</th>
								<th field="listprice" width="80" align="right">List Price</th>
								<th field="unitcost" width="80" align="right">Unit Cost</th>
								<th field="attr1" width="120">Attribute</th>
								<th field="status" width="50" align="center">Status</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div style="width:60%;">
				<div id="pgrid-1" title="DataGrid" collapsible="true" closable="true"  style="height:350px;">
					<table id="test"> </table>
				</div>
			</div>
			
		</div>
	</div>
</body>
</html>


所有的内容就介绍完了。






  • 大小: 217.6 KB
分享到：
| bbossgroups项目demo站点升级完毕，朋友们 ...
评论
10 楼 caoyangx 2011-06-23  
顶贴的人都是你群里的吧？
我都不知道他们所谓的顶啊、牛啊。。是在说什么。
说实话，看了半天，不知道你发的东西要干什么，能干什么？
9 楼 yin_bp 2011-06-23  
ericslegend 写道
支持楼主更新，我个人有点不太喜欢extjs的样子。
弱弱的说一句：bbossgroups这个名字，太长了点。


这个是用jquery easyui的portal插件，后台用的bbossgroups的mvc框架实现的，不是extjs哦。
8 楼 yin_bp 2011-06-23  
ericslegend 写道
支持楼主更新，我个人有点不太喜欢extjs的样子。
弱弱的说一句：bbossgroups这个名字，太长了点。

嗯，大家有合适名字的话，可以发给我，呵呵
7 楼 ericslegend 2011-06-23  
支持楼主更新，我个人有点不太喜欢extjs的样子。
弱弱的说一句：bbossgroups这个名字，太长了点。
6 楼 hnlikaiping 2011-06-23  
顶上,不错..... :     功能强劲
5 楼 ilrxx 2011-06-23  
群主，很牛！
4 楼 cs624178950 2011-06-23  
群主，很牛！
3 楼 yin_bp 2011-06-23  
t22011787 写道
沙发。。。很不错。。portal效果很绚

嗯，可以下载附件工程感受一把哦
2 楼 t22011787 2011-06-23  
沙发。。。很不错。。portal效果很绚
1 楼 AnDong 2011-06-21  
很不错，顶一个。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于MVC3+EasyUI精美实例

    在这个"基于MVC3+EasyUI精美实例"中，我们将会探讨如何结合这两个技术来创建一个高效、易于维护的Web应用。首先，MVC3作为后端框架，负责处理业务逻辑、数据操作以及与数据库的交互。它通过路由系统接收HTTP请求，并...

    MVC结合EasyUI的小案例

    在本项目中，我们探索的是一个基于MVC（Model-View-Controller）框架，结合Entity Framework（EF）数据访问技术和EasyUI前端库的小型应用程序案例。这个案例旨在展示如何高效地构建一个用户界面友好的Web应用。 ...

    MVC+easyui案例

    在本案例中，"MVC+easyui"结合使用，创建了一个完整的增删改查功能，这对于初学者理解MVC模式及其在实际开发中的应用非常有帮助。 **EasyUI框架** EasyUI是一款基于jQuery的前端UI库，提供了丰富的组件，如表格、...

    C#基于MVC+EasyUI+ECharts后台管理系统完整源码

    MVC + easyUI + sqlserver2014 + ECharts 3. 主要功能:新增、修改、删除、分页、导出Excel文件、上传图片、权限设置、图形报表展示 (权限设置只是为了练习easyUI tree的使用,具体项目具体分析) (例子涉及两张表...

    MVC与EASYUI结合使用实例

    在这个"**MVC与EASYUI结合使用实例**"中，我们将会看到如何在MVC框架下利用EasyUI的组件来增强用户体验。特别是**datagrid**，它是一个强大的表格展示和管理组件，可以用来显示和编辑大量的结构化数据。 1. **...

    Easyui Mvc结合使用实例

    本实例探讨的是如何将轻量级的前端库EasyUI与Microsoft的MVC（Model-View-Controller）框架结合使用，以创建一个Asp.net Web应用程序。EasyUI为开发者提供了丰富的组件和简洁的API，而MVC则是一种设计模式，它帮助...

    MVC+EASYUI+通用权限管理

    技术特点：三层工厂模式架构，JQuery Ajax+MVC+EASYUI 功能描述：通用权限管理系统，主要运用非常典型的三层工厂模式架构， 界面友好，运用了JQuery Ajax，实现了根据多个角色组合来实现用户的权限。

    Asp.Net MVC+EasyUI 进销存系统源码，可进行二次开发.zip

    EasyUI与Asp.Net MVC结合，能够帮助开发者轻松创建响应式和交互式的前端页面。 【进销存系统】进销存系统是企业管理中的关键组成部分，用于跟踪商品的流入（采购）、流出（销售）以及存储（库存）情况。这类系统...

    asp.net+Web+mvc4.0 EasyUI 最新 权限管理系统源码教程

    【标题】"asp.net+Web+mvc4.0 EasyUI 最新 权限管理系统源码教程" 提供的是一款基于ASP.NET技术栈，利用Web和MVC4.0框架，结合EasyUI前端库构建的权限管理系统。这个系统旨在帮助开发者理解和实现用户权限的精细控制...

    可拖拽布局组件easyui-portal

    在IT行业中，构建用户友好的界面是至关重要的，这正是`EasyUI-Portal`组件发挥作用的地方。`EasyUI-Portal`是一个基于JavaScript和CSS的开源框架，专为创建可定制、可拖拽的布局而设计，它使得开发人员能够轻松构建...

    .NET MVC + EasyUI 后台管理系统

    .NET MVC + EasyUI 后台管理系统是基于微软的ASP.NET MVC技术栈，结合了流行的前端框架EasyUI，用于构建高效、美观的后台管理界面。在VS 2015集成开发环境中，MVC 4提供了强大的模型-视图-控制器（MVC）架构，为Web...

    MVC3+EasyUI完整实例

    **MVC3+EasyUI 完整实例详解** 在现代Web开发中，Microsoft的MVC（Model-View-Controller）框架和EasyUI前端库的结合是构建高效、可维护的Web应用的常见选择。本实例将深入探讨如何利用这两者构建一个功能完善的Web...

    asp.net+Web+mvc4.0 EasyUI 权限管理系统源码教程.zip

    管理系统，作为一种高效的企业运营管理工具，旨在通过集成化、系统化的手段，对组织内部的各类资源进行规划、协调、控制和优化，以实现企业战略目标，提升运营效率，增强核心竞争力。以下是对管理系统的详细介绍： ...

    asp.net mvc4 easyui CRUD 分页 查询

    在本项目中，"asp.net mvc4 easyui CRUD 分页 查询"是结合了这两个技术，实现了数据的创建（Create）、读取（Read）、更新（Update）和删除（Delete）功能，并且加入了分页和查询功能，使得数据管理更加高效。...

    一套通用的Easyui+asp.net mvc开发框架源码

    【标题】"一套通用的Easyui+asp.net mvc开发框架源码"揭示了这是一个用于构建Web应用程序的基础架构，结合了两种技术：Easyui和asp.net MVC5。Easyui是一个基于jQuery的用户界面库，提供了丰富的组件和主题，用于...

    asp.net mvc+easyui附件上传

    EasyUI是一个基于jQuery的UI库，提供了丰富的组件，如表格、下拉框、对话框等，可以方便地与ASP.NET MVC结合使用，实现界面的美化和交互。在本教程中，我们将探讨如何使用ASP.NET MVC和EasyUI实现附件上传功能。 ...

    基于asp.net+Web+mvc4.0 EasyUI 最新 权限管理 开源 MES建材管理系统源码

    权限管理 开源 MES建材管理系统源码”指的是一个开源的MES（Manufacturing Execution System）建材管理系统，该系统构建于.NET技术栈上，具体使用了ASP.NET、Web技术和MVC4.0框架，并结合了EasyUI进行界面设计和权限...

    【推荐下载】 C# asp.net MVC+EASYUI 视频教程

    本套教程主要讲解了easyUI和mvc结合开发项目的实例，以用户管理为模型，用easyUI做了数据表格的增加，删除，修改 分页，普通查询，组合查询，以及后端参数的接收和响应，导出EXCEL，批量导入数据等。特别是easyUI ...

Magicbox
Global site tag (gtag.js) - Google Analytics