`

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站点升级完毕，朋友们 ...
评论
30 楼 yin_bp 2012-10-19  
lx13345 写道
http://localhost:8888/easyuidatagrid/examples/index.page，easyuidatagrid为项目名称

可以的，你在下载下来试试，我更新了一下里面的框架包，另外也可看看官网的demo 效果：
http://www.bbossgroups.com/portal/portal.page
29 楼 lx13345 2012-10-19  
http://localhost:8888/easyuidatagrid/examples/index.page，easyuidatagrid为项目名称
28 楼 lx13345 2012-10-19  
ajax那个还正常
27 楼 lx13345 2012-10-19  
不行哎，这个例子
26 楼 jarorwar 2011-06-30  
谢谢，需要学习 。。
25 楼 yin_bp 2011-06-28  
不知道大侠们对easyui portal以及datagride和bbossgroups mvc框架结合的案例有些什么看法或者意见，能不能指点一二啊
24 楼 yin_bp 2011-06-24  
kjj 写道

        昨晚喝了点.................说话太哪个了,是我会错意了,在这里向楼主道歉啊..............

别喝多了，我只是借题发挥一下，你给个台阶我就上一下，呵呵，绝无它意。
23 楼 kjj 2011-06-24  
yin_bp 写道
kjj 写道
这样推广你 框架觉得费劲不,让大家接受,必须要个理由吧,个人觉得,这个框架,高手不屑用,新手学了也没多大用处...........
呵呵...................................


呵呵，一点都不费劲啊，写点资料，介绍介绍bbossgroups，我是乐在其中啊。我想kjj是误解我的意图了，我从来没有强制要大家接受框架的意思，发帖目的在于利用iteye的论坛来发表一些关于bbossgroups功能以及技术方面介绍性的文章，这样自己有个时候也可以经常看看，温故而知新啊，也希望拿出来和大家交流分享，有意见的发表意见，拍砖的拍砖，你说谁不想把自己比较得意的东西亮出来啊，是不是；至于高手用不用，新手学了有没有用，写帖子的时候我倒没有想这么多。

呵呵，说句实话，我们的项目开发人员还是高度认可bbossgroups的。

确实有人想实践一下的话，我也举手欢迎，呵呵，并且非常乐意提供帮助

有一点是可以肯定的，新手学了bbossgroups肯定是有用的，而且非常有用。bbossgroups框架相比ssh的优势就是简单易用，容易上手，没有太多的概念性的东西，能够解决项目里面的实际问题，而且性能稳定、可靠，即使是高手看了也会喜欢的。


        昨晚喝了点.................说话太哪个了,是我会错意了,在这里向楼主道歉啊..............
22 楼 faye0412 2011-06-24  
很不错，呵呵
21 楼 yaofaye 2011-06-24  
楼主强悍 研究研究！
20 楼 cheneystar 2011-06-24  
顶 一 下，先留下个脚印，有空再来仔细研究！呵呵
19 楼 liangbangyu 2011-06-24  
很喜欢这种datagrid,只是不知道性能怎样，下载来学习一下，谢谢分享。
18 楼 yin_bp 2011-06-24  
新写了一篇介绍Ajax方式发送XML及接收xml响应的文章，感兴趣的朋友也可以去看看
http://www.iteye.com/topic/1102764
17 楼 mouse5s306 2011-06-23  
呵呵
还是可以仔细看下
学习下
16 楼 yin_bp 2011-06-23  
kjj 写道
这样推广你 框架觉得费劲不,让大家接受,必须要个理由吧,个人觉得,这个框架,高手不屑用,新手学了也没多大用处...........
呵呵...................................


呵呵，一点都不费劲啊，写点资料，介绍介绍bbossgroups，我是乐在其中啊。我想kjj是误解我的意图了，我从来没有强制要大家接受框架的意思，发帖目的在于利用iteye的论坛来发表一些关于bbossgroups功能以及技术方面介绍性的文章，这样自己有个时候也可以经常看看，温故而知新啊，也希望拿出来和大家交流分享，有意见的发表意见，拍砖的拍砖，你说谁不想把自己比较得意的东西亮出来啊，是不是；至于高手用不用，新手学了有没有用，写帖子的时候我倒没有想这么多。

呵呵，说句实话，我们的项目开发人员还是高度认可bbossgroups的。

确实有人想实践一下的话，我也举手欢迎，呵呵，并且非常乐意提供帮助

有一点是可以肯定的，新手学了bbossgroups肯定是有用的，而且非常有用。bbossgroups框架相比ssh的优势就是简单易用，容易上手，没有太多的概念性的东西，能够解决项目里面的实际问题，而且性能稳定、可靠，即使是高手看了也会喜欢的。

15 楼 kjj 2011-06-23  
这样推广你 框架觉得费劲不,让大家接受,必须要个理由吧,个人觉得,这个框架,高手不屑用,新手学了也没多大用处...........
呵呵...................................
14 楼 yin_bp 2011-06-23  
bugu1986 写道
sf的速度太慢了。。下载all-in-one要7个小时的说，最近要出差等出差回来下来看看。不过我不是做互联网和web的，对web框架了解的不多，表示鸭梨很大，呵呵。


sf的速度是有点慢，网速慢确实要点时间，而且all-in-one 确实大了点，因为它是完整的eclipse工程并包含所有依赖包，下下来解开导入eclipse就可以使用。其实bbossgroups运行环境内核就五六兆（包含依赖包）的样子，本文的附件demo就是mvc的完整运行环境只有4兆多。
13 楼 bugu1986 2011-06-23  
sf的速度太慢了。。下载all-in-one要7个小时的说，最近要出差等出差回来下来看看。不过我不是做互联网和web的，对web框架了解的不多，表示鸭梨很大，呵呵。
12 楼 bugu1986 2011-06-23  
yin_bp 写道
caoyangx 写道
顶贴的人都是你群里的吧？
我都不知道他们所谓的顶啊、牛啊。。是在说什么。
说实话，看了半天，不知道你发的东西要干什么，能干什么？


估计您是高手，从头像就看得出来，上面发帖支持的朋友，我非常感谢，感谢大家的支持。这个例子要说明的功能很简单：
1.介绍bbossgroups  mvc框架控制器方法如何自动将java对象转换为json对象返回给jquery easyui的datagride插件进行数据展示。能干什么，这就是要干的事情。不知道解释的对不对。求caoyangx指点，代码是多了点，其实在附件中都有，呵呵，如果你还不知道是干什么的，那就请下载demo部署一下，体验一下再来回帖，不要光看不练。
2.另外顺带演示了一下mvc框架和jquery easyui portal插件协同工作的场景，喜欢的朋友直接用就可以了，不喜欢的话也不强求。

3.你要是真的不知道这个实例是干什么的，就请麻烦把demo下下来自己部署一下，不要告诉我你看不懂不会部署，呵呵，再一次把部署步骤贴在这里：

1 下载示例工程
http://dl.iteye.com/topics/download/5d678bd7-439b-3b0c-8577-94dce98a99c4
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




楼主不要理他。。哗众取宠。奉劝“头像帝”，对人要尊重，不要丢我们沈阳人的脸！
11 楼 yin_bp 2011-06-23  
caoyangx 写道
顶贴的人都是你群里的吧？
我都不知道他们所谓的顶啊、牛啊。。是在说什么。
说实话，看了半天，不知道你发的东西要干什么，能干什么？


估计您是高手，从头像就看得出来，上面发帖支持的朋友，我非常感谢，感谢大家的支持。这个例子要说明的功能很简单：
1.介绍bbossgroups  mvc框架控制器方法如何自动将java对象转换为json对象返回给jquery easyui的datagride插件进行数据展示。能干什么，这就是要干的事情。不知道解释的对不对，求caoyangx指点。代码是多了点，其实在附件中都有，呵呵，如果你还不知道是干什么的，那就请下载demo部署一下，体验一下再来回帖，不要光看不练,这种类型的伙计落到我手里会被我骂的（骂的时候还不能回嘴），呵呵。

2.另外顺带演示了一下mvc框架和jquery easyui portal插件协同工作的场景，喜欢的朋友直接用就可以了，不喜欢的话也不强求。

3.你要是真的不知道这个实例是干什么的，就请麻烦把demo下下来自己部署一下，不要告诉我你看不懂不会部署，呵呵，再一次把部署步骤贴在这里：

1 下载示例工程
http://dl.iteye.com/topics/download/5d678bd7-439b-3b0c-8577-94dce98a99c4
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

caoyangx回帖的时候，千万不要再说看了半天不知道是干什么的（有了这半天的时间，估计稍微用几分钟就可以把demo下下来部署起来并看了效果了，呵呵）。如果说做了半天做不出来，那说明bbossgroups太复杂了，做的不够好，我会虚心接受您的批评意见，持续改进bbossgroups，以便让像caoyangx这样的朋友也能够把bbossgroups用起来并且用好，呵呵。




发表评论

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

相关推荐

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