MVC结合Easyui Portal
实例 - Bboss 每天进步一点点 - ITeye博客
博客分类：
本文介绍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 下载示例工程
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，输入以下地址即可访问本实例了，呵呵：
应该可以看到上述的效果示意图中的界面了。
第三部分 功能介绍和代码实现：
3.下面看控制器的实现：
package org.frameworkset.
import java.util.ArrayL
import java.util.L
import org.frameworkset.util.annotations.RequestP
import org.frameworkset.util.annotations.ResponseB
* &p&PortalController.java&/p&
* &p& Description: &/p&
* &p& bboss workgroup &/p&
* &p& Copyright (c) 2009 &/p&
* @author biaoping.yin
* @version 1.0
public class EasyUIDatagridController
private static List&Address&
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());
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);
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);
* 对列表进行分页操作,数据源是一个列表
* @param datas 列表数据
* @param offset 获取数据的起始位置
* @param pageItems 获取数据的条数
* @return ListInfo 对分页数据和总记录条数的封装类
private static Addresses pagerList(List datas,int offset,int pageItems)
if(datas == null)
List list = new ArrayList();
if(offset &= datas.size())
int temp = datas.size() % pageI
offset = datas.size() -
for(int i = i & datas.size() && i & offset + pageI i ++)
list.add(datas.get(i));
Addresses address = new Addresses();
address.setRows(list);
address.setTotal(datas.size());
4.依赖的po对象-GouWuChe 和Productor，GouWuChe对象将被转换为json对象，是根据jquery easyui datagrid要求的结构定义的json对象容器，包含的产品对象Productor是具体的po记录对象。
GouWuChe 对象的结构如下：
public class GouWuChe
//总记录数
private List&Productor&//要显示的记录
private List&Productor&//统计页脚，包含平均价格和总价格
//get和set方法，省略掉
Productor对象结构如下,包含产品的所有属性：
public class Productor
private String attr1;
//get和set方法，省略掉
5.依赖的po对象-Addresses 和Address，Addresses 对象将被转换为json对象，是根据jquery easyui 分页datagrid要求的结构定义的json对象容器，包含的产品对象Address是具体的po记录对象。
Addresses对象结构如下,包含产品的所有属性：
public class Addresses
private List&Address&
//get和set方法，省略掉
Addresses对象结构如下,包含产品的所有属性：
public class Address
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"&
&meta http-equiv="Content-Type" content="text/ 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"&
font-size:16
font-weight:
padding:20px 10
background:#
border-bottom:1px solid #
&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&
$(function(){
$('#pp').portal({
border:false,
$('#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');
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
&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:background:#f3height:150padding:5"&
&object classid="clsid:D27CDB6E-AE6D-11cf-96B8-" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="100"&
&param name="movie" value="/onlineclock/analog.swf"&
&param name=quality value=high&
&param name="wmode" value="transparent"&
&embed src="/onlineclock/analog.swf" width="100" height="100" quality=high pluginspage="/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"&&/embed&
&div id="pgrid" title="DataGrid" collapsible="true" closable="true"
style="height:300"&
&table class="easyui-datagrid" style="width:650height:auto"
fit="true" border="false"
singleSelect="true"
idField="itemid" url="datagrid_data_footer.page" showFooter="true"&
&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&
&div style="width:60%;"&
&div id="pgrid-1" title="DataGrid" collapsible="true" closable="true"
style="height:350"&
&table id="test"& &/table&
所有的内容就介绍完了。
下载次数: 657
论坛回复 /
(29 / 11979)
http://localhost:8888/easyuidatagrid/examples/index.page，easyuidatagrid为项目名称
可以的，你在下载下来试试，我更新了一下里面的框架包，另外也可看看官网的demo 效果：
&&&&&&& 昨晚喝了点.................说话太哪个了,是我会错意了,在这里向楼主道歉啊..............
别喝多了，我只是借题发挥一下，你给个台阶我就上一下，呵呵，绝无它意。
kjj 写道这样推广你 框架觉得费劲不,让大家接受,必须要个理由吧,个人觉得,这个框架,高手不屑用,新手学了也没多大用处...........
呵呵...................................
呵呵，一点都不费劲啊，写点资料，介绍介绍bbossgroups，我是乐在其中啊。我想kjj是误解我的意图了，我从来没有强制要大家接受框架的意思，发帖目的在于利用iteye的论坛来发表一些关于bbossgroups功能以及技术方面介绍性的文章，这样自己有个时候也可以经常看看，温故而知新啊，也希望拿出来和大家交流分享，有意见的发表意见，拍砖的拍砖，你说谁不想把自己比较得意的东西亮出来啊，是不是；至于高手用不用，新手学了有没有用，写帖子的时候我倒没有想这么多。
呵呵，说句实话，我们的项目开发人员还是高度认可bbossgroups的。
确实有人想实践一下的话，我也举手欢迎，呵呵，并且非常乐意提供帮助
有一点是可以肯定的，新手学了bbossgroups肯定是有用的，而且非常有用。bbossgroups框架相比ssh的优势就是简单易用，容易上手，没有太多的概念性的东西，能够解决项目里面的实际问题，而且性能稳定、可靠，即使是高手看了也会喜欢的。
&&&&&&& 昨晚喝了点.................说话太哪个了,是我会错意了,在这里向楼主道歉啊..............
这样推广你 框架觉得费劲不,让大家接受,必须要个理由吧,个人觉得,这个框架,高手不屑用,新手学了也没多大用处...........
呵呵...................................
呵呵，一点都不费劲啊，写点资料，介绍介绍bbossgroups，我是乐在其中啊。我想kjj是误解我的意图了，我从来没有强制要大家接受框架的意思，发帖目的在于利用iteye的论坛来发表一些关于bbossgroups功能以及技术方面介绍性的文章，这样自己有个时候也可以经常看看，温故而知新啊，也希望拿出来和大家交流分享，有意见的发表意见，拍砖的拍砖，你说谁不想把自己比较得意的东西亮出来啊，是不是；至于高手用不用，新手学了有没有用，写帖子的时候我倒没有想这么多。
呵呵，说句实话，我们的项目开发人员还是高度认可bbossgroups的。
确实有人想实践一下的话，我也举手欢迎，呵呵，并且非常乐意提供帮助
有一点是可以肯定的，新手学了bbossgroups肯定是有用的，而且非常有用。bbossgroups框架相比ssh的优势就是简单易用，容易上手，没有太多的概念性的东西，能够解决项目里面的实际问题，而且性能稳定、可靠，即使是高手看了也会喜欢的。
sf的速度太慢了。。下载all-in-one要7个小时的说，最近要出差等出差回来下来看看。不过我不是做互联网和web的，对web框架了解的不多，表示鸭梨很大，呵呵。
sf的速度是有点慢，网速慢确实要点时间，而且all-in-one 确实大了点，因为它是完整的eclipse工程并包含所有依赖包，下下来解开导入eclipse就可以使用。其实bbossgroups运行环境内核就五六兆（包含依赖包）的样子，本文的附件demo就是mvc的完整运行环境只有4兆多。
caoyangx 写道顶贴的人都是你群里的吧？
我都不知道他们所谓的顶啊、牛啊。。是在说什么。
说实话，看了半天，不知道你发的东西要干什么，能干什么？
估计您是高手，从头像就看得出来，上面发帖支持的朋友，我非常感谢，感谢大家的支持。这个例子要说明的功能很简单：
1.介绍bbossgroups& mvc框架控制器方法如何自动将java对象转换为json对象返回给jquery easyui的datagride插件进行数据展示。能干什么，这就是要干的事情。不知道解释的对不对。求caoyangx指点，代码是多了点，其实在附件中都有，呵呵，如果你还不知道是干什么的，那就请下载demo部署一下，体验一下再来回帖，不要光看不练。
2.另外顺带演示了一下mvc框架和jquery easyui portal插件协同工作的场景，喜欢的朋友直接用就可以了，不喜欢的话也不强求。
3.你要是真的不知道这个实例是干什么的，就请麻烦把demo下下来自己部署一下，不要告诉我你看不懂不会部署，呵呵，再一次把部署步骤贴在这里：
1 下载示例工程
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，输入以下地址即可访问本实例了，呵呵：
楼主不要理他。。哗众取宠。奉劝“头像帝”，对人要尊重，不要丢我们沈阳人的脸！
顶贴的人都是你群里的吧？
我都不知道他们所谓的顶啊、牛啊。。是在说什么。
说实话，看了半天，不知道你发的东西要干什么，能干什么？
估计您是高手，从头像就看得出来，上面发帖支持的朋友，我非常感谢，感谢大家的支持。这个例子要说明的功能很简单：
1.介绍bbossgroups& mvc框架控制器方法如何自动将java对象转换为json对象返回给jquery easyui的datagride插件进行数据展示。能干什么，这就是要干的事情。不知道解释的对不对，求caoyangx指点。代码是多了点，其实在附件中都有，呵呵，如果你还不知道是干什么的，那就请下载demo部署一下，体验一下再来回帖，不要光看不练,这种类型的伙计落到我手里会被我骂的（骂的时候还不能回嘴），呵呵。
2.另外顺带演示了一下mvc框架和jquery easyui portal插件协同工作的场景，喜欢的朋友直接用就可以了，不喜欢的话也不强求。
3.你要是真的不知道这个实例是干什么的，就请麻烦把demo下下来自己部署一下，不要告诉我你看不懂不会部署，呵呵，再一次把部署步骤贴在这里：
1 下载示例工程
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，输入以下地址即可访问本实例了，呵呵：
caoyangx回帖的时候，千万不要再说看了半天不知道是干什么的（有了这半天的时间，估计稍微用几分钟就可以把demo下下来部署起来并看了效果了，呵呵）。如果说做了半天做不出来，那说明bbossgroups太复杂了，做的不够好，我会虚心接受您的批评意见，持续改进bbossgroups，以便让像caoyangx这样的朋友也能够把bbossgroups用起来并且用好，呵呵。
& 上一页 1
浏览: 301411 次
来自: 长沙
qq 写道怎么设置配置文件 可以查看执行的S ...
怎么设置配置文件 可以查看执行的SQL语句。 我只能getSq ...
pandge 写道我在尝试使用的时候发现一个问题，如果我在Se ...
我在尝试使用的时候发现一个问题，如果我在Session中放一个 ...EasyUI 鍩烘湰鐨勬嫋鍔ㄥ拰鏀剧疆 鏈?暀绋嬪悜鎮ㄥ睍绀哄?浣曚娇 HTML 鍏冪礌鍙?嫋鍔?紝鍦ㄦ湰渚嬩腑锛屾垜浠?皢鍒涘缓涓変釜 DIV 鍏冪礌鐒跺悗鍚?敤浠栦滑鐨勬嫋鍔ㄥ拰鏀剧疆銆