前几天心血来潮用jquery-easyui+spring、struts2、hibernate实现了一个系统的一小部分功能，下面给大家分享一下。
- 首先看运行效果：
【图一：登录页】
【图二：页面布局】
【图三：用户编辑层】
【图四：确认弹出框】
- 准备
easyui插件简介在这就不赘述了，大家可以在iteye上找到很多该插件的相关消息。
如果页面需要使用easyui插件，需要引进一下js和css（使用的时候需要注意easyui版本依赖的jquery.js版本要对应）：
Html代码
- <script type=“text/javascript” src=“<%=root%>/Web/common/js/jquery-1.4.4.min.js”></script>
<script type="text/javascript" src="<%=root%>/Web/common/js/jquery-1.4.4.min.js"></script>
Html代码
- <link rel=“stylesheet” type=“text/css” href=“<%=root%>/Web/common/js/easyui/themes/default/easyui.css”>
- <link rel=“stylesheet” type=“text/css” href=“<%=root%>/Web/common/js/easyui/themes/icon.css”>
- <script type=“text/javascript” src=“<%=root%>/Web/common/js/easyui/js/jquery.easyui.min.js”></script>
- <script type=“text/javascript” src=“<%=root%>/Web/common/js/easyui/js/easyui-lang-zh_CN.js”></script>
<link rel="stylesheet" type="text/css" href="<%=root%>/Web/common/js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="<%=root%>/Web/common/js/easyui/themes/icon.css"> <script type="text/javascript" src="<%=root%>/Web/common/js/easyui/js/jquery.easyui.min.js"></script> <script type="text/javascript" src="<%=root%>/Web/common/js/easyui/js/easyui-lang-zh_CN.js"></script>
- 布局
为了让一个主页实现上下左右中的布局方式显示，这里就需要用到easyui一个叫layout的东西，通常有多种方式可以实现布局。
①使用js创建layout
首先定义一个div，设置region，title等属性（注html是没有region属性的，这是easyui专属属性）
Html代码
- <div id=“cc” style=“width:600px;height:400px;”>
- <div region=“north” title=“North Title” split=“true” style=“height:100px;”></div>
- <div region=“south” title=“South Title” split=“true” style=“height:100px;”></div>
- <div region=“east” iconCls=“icon-reload” title=“East” split=“true” style=“width:100px;”></div>
- <div region=“west” split=“true” title=“West” style=“width:100px;”></div>
- <div region=“center” title=“center title” style=“padding:5px;background:#eee;”></div>
- </div>
<div id="cc" style="width:600px;height:400px;">
<div region="north" title="North Title" split="true" style="height:100px;"></div>
<div region="south" title="South Title" split="true" style="height:100px;"></div>
<div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>
<div region="west" split="true" title="West" style="width:100px;"></div>
<div region="center" title="center title" style="padding:5px;background:#eee;"></div>
</div>
然后在js中指定id为cc的div为layout：
Html代码
- ('#cc').layout(options); </span></span></li></ol></div><pre name="code" class="html" codeable_id="" codeable_type="BlogComment" source_url="http://blessht.iteye.com/blog/1069749/#" pre_index="3" title="jquery-easyui实现页面布局和增删改查操作（SSH2框架支持）" style="display: none;">(‘#cc’).layout(options);
简单介绍几个layout属性：
属性名 数据类型 功能 默认值 title string 指定布局的标题名称 无 region string 指定布局位置，分：东、西、南、北、中 border boolean 是否显示边界 true split boolean 是否显示分界线从而用户可以拖动改变其大小 false iconCls string 指定布局的图标样式 无 href string 指定该布局远程调用的html路径 无 ②让整个body使用easyui的cssclass：class=”easyui-layout”自动创建layout
这也是我使用的方式，看下面代码：
Html代码
- <body class=“easyui-layout”>
- <!– 正上方panel –>
- <div region=“north” style=“height:100px;padding:10px;” href=“<%=root%>/Web/common/page/top.html”></div>
- <!– 正左边panel –>
- <div region=“west” title=“菜单栏” split=“true” style=“width:280px;padding1:1px;overflow:hidden;”>
- <div class=“easyui-accordion” fit=“true” border=“false”>
- <!– selected –>
- <div title=“用户权限管理” selected=“true”>
- <ul>
- <li><a href=“javascript:addTab(‘tabId_loginInfo’,’用户管理’,’<%=root%>/ospm/loginInfo/goLoginInfoMain.jhtml’);”>用户管理</a></li>
- <li><a href=“javascript:addTab(‘tabId_privilege’,’权限管理’,’<%=root%>/ospm/loginInfo/goPrivilegeMain.jhtml’);”>权限管理</a></li>
- </ul>
- </div>
- </div>
- </div>
- <!– 正中间panel –>
- <div region=“center” title=“功能区” >
- <div class=“easyui-tabs” id=“centerTab” fit=“true” border=“false”>
- <div title=“欢迎页” style=“padding:20px;overflow:hidden;”>
- <div style=“margin-top:20px;”>
- <h3>你好，欢迎来到权限管理系统</h3>
- </div>
- </div>
- </div>
- </div>
- <!– 正下方panel –>
- <div region=“south” style=“height:50px;” align=“center”>
- <label>
- 作者：白糖<br/>
- 时间：2011-5-17
- </label>
- </div>
- </body>
<body class="easyui-layout"> <!-- 正上方panel --> <div region="north" style="height:100px;padding:10px;" href="<%=root%>/Web/common/page/top.html"></div> <!-- 正左边panel --> <div region="west" title="菜单栏" split="true" style="width:280px;padding1:1px;overflow:hidden;"> <div class="easyui-accordion" fit="true" border="false"> <!-- selected --> <div title="用户权限管理" selected="true"> <ul> <li><a href="javascript:addTab('tabId_loginInfo','用户管理','<%=root%>/ospm/loginInfo/goLoginInfoMain.jhtml');">用户管理</a></li> <li><a href="javascript:addTab('tabId_privilege','权限管理','<%=root%>/ospm/loginInfo/goPrivilegeMain.jhtml');">权限管理</a></li> </ul> </div> </div> </div> <!-- 正中间panel --> <div region="center" title="功能区" > <div class="easyui-tabs" id="centerTab" fit="true" border="false"> <div title="欢迎页" style="padding:20px;overflow:hidden;"> <div style="margin-top:20px;"> <h3>你好，欢迎来到权限管理系统</h3> </div> </div> </div> </div> <!-- 正下方panel --> <div region="south" style="height:50px;" align="center"> <label> 作者：白糖<br/> 时间：2011-5-17 </label> </div> </body>运行效果如【图二：页面布局】
- 创建选项卡
【图二：页面布局】上面标记了在菜单栏点击“用户管理”链接即可在功能区创建一个叫“用户管理”的选项卡并加载相应数据。注意：用户管理页面是另一个jsp，需要远程调用。
最初我使用tabs的href属性来远程调用用户管理jsp，发现页面会有js冲突，导致用户管理页面的添加、编辑等各种功能失效，我猜想可能是js冲突，因为布局页引用了easyui，而用户管理jsp也引用了同样的easyui。
后来看了下项目经理ext的布局代码，原来在点击链接的时候会创建一个tabs，只是tabs的内容是一个iframe分隔：
Html代码
- /**
- * 创建新选项卡
- * @param tabId 选项卡id
- * @param title 选项卡标题
- * @param url 选项卡远程调用路径
- */
- function addTab(tabId,title,url){
- //如果当前id的tab不存在则创建一个tab
- if(("#"+tabId).html()==null){ </span></li><li><span> var <span class="attribute">name</span><span> = </span><span class="attribute-value">'iframe_'</span><span>+tabId; </span></span></li><li><span> (‘#centerTab’).tabs(‘add’,{
- title: title,
- closable:true,
- cache : false,
- //注：使用iframe即可防止同一个页面出现js和css冲突的问题
- content : ’<iframe name=”’+name+’”id=”’+tabId+’”src=“’+url+’” width=“100%” height=“100%” frameborder=“0” scrolling=“auto” ></iframe>‘
- });
- }
- }
/** * 创建新选项卡 * @param tabId 选项卡id * @param title 选项卡标题 * @param url 选项卡远程调用路径 */ function addTab(tabId,title,url){ //如果当前id的tab不存在则创建一个tab if($("#"+tabId).html()==null){ var name = 'iframe_'+tabId; $('#centerTab').tabs('add',{ title: title, closable:true, cache : false, //注：使用iframe即可防止同一个页面出现js和css冲突的问题 content : '<iframe name="'+name+'"id="'+tabId+'"src="'+url+'" width="100%" height="100%" frameborder="0" scrolling="auto" ></iframe>' }); } }不过群里也有些大神提醒：如果大量使用iframe会使页面性能降低，所以使用iframe分隔tabs只适合小型项目使用。
- datagrid表格
easyui datagrid是争议最大的一个功能插件，很多人说它不开源，提供的api不全面，标题列内容可能不对齐，操作繁杂等等。其实个人觉得这个table的功能已经相当不错了，如果只需要做基本的显示则只需配很少的代码。
下面简单介绍下datagrid的使用：
①首先肯定需要有一个table标签，给它定义一个id，在js中通过id.datagrid方法即可创建表格
<table id="tt"></table>
$('#tt').datagrid(options);
②创建表格的列名有两种方式：第一种是直接在table标签中定义，第二种是在js中定义：
我使用的是第一种方式：
Html代码
- <!– 表格 –>
- <table id=“loginInfoTable”
- title=“用户信息一览”
- border=“0”
- cellspacing=“0”
- cellpadding=“0”
- iconCls=“icon-edit”
- width=“98%”
- idField=“loginId”
- pagination=“true”
- remoteSort=“false”
- singleSelect=“false”
- showFooter=“false”
- striped=“true”
- url=“<%=root%>/ospm/loginInfo/doLoginInfoSearch.jhtml”>
- <thead>
- <tr align=“center”>
- <th field=“ck” width=“20” checkbox=“true” width=“20”></th>
- <th field=“loginCode” width=“200”>用户名</th>
- <th field=“statuValue” width=“100”>状态</th>
- <th field=“opt” formatter=‘optFormater’ width=“150”>操作</th>
- </tr>
- </thead>
- </table>
<!-- 表格 --> <table id="loginInfoTable" title="用户信息一览" border="0" cellspacing="0" cellpadding="0" iconCls="icon-edit" width="98%" idField="loginId" pagination="true" remoteSort="false" singleSelect="false" showFooter="false" striped="true" url="<%=root%>/ospm/loginInfo/doLoginInfoSearch.jhtml"> <thead> <tr align="center"> <th field="ck" width="20" checkbox="true" width="20"></th> <th field="loginCode" width="200">用户名</th> <th field="statuValue" width="100">状态</th> <th field="opt" formatter='optFormater' width="150">操作</th> </tr> </thead> </table>第二种方式如下：
Js代码
- columns:[[
- {field:’itemid’,title:‘Item ID’,rowspan:2,width:80,sortable:true},
- {field:’productid’,title:‘Product ID’,rowspan:2,width:80,sortable:true},
- {title:’Item Details’,colspan:4}
- ],[
- {field:’listprice’,title:‘List Price’,width:80,align:‘right’,sortable:true},
- {field:’unitcost’,title:‘Unit Cost’,width:80,align:‘right’,sortable:true},
- {field:’attr1’,title:‘Attribute’,width:100},
- {field:’status’,title:‘Status’,width:60}
- ]]
columns:[[ {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true}, {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true}, {title:'Item Details',colspan:4} ],[ {field:'listprice',title:'List Price',width:80,align:'right',sortable:true}, {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true}, {field:'attr1',title:'Attribute',width:100}, {field:'status',title:'Status',width:60} ]]③向后台请求数据
datagrid有一个属性叫url，在进入页面后，它会通过ajax方式向后台发送请求，后台封装相应数据（JSON格式）再返回给前台即可显示。注意：datagrid在回调函数中必须获得两项json数据：total表示查询出的总结过，rows表示显示在table中的数据集合。
Java代码
- /**
- * 封装Json数据
- */
- long total = 0; // 符合查询的总条数
- List<LoginInfoTableDto> lstTable = null; // 查询结果
- total = (Long) mapLoginInfo.get(Constant4Ospm.TOTAL);
- if (mapLoginInfo.get(Constant4Ospm.SEARCH_RESULT) != null) {
- lstTable = (List<LoginInfoTableDto>) mapLoginInfo
- .get(Constant4Ospm.SEARCH_RESULT);
- } else {
- //注：如果从数据库查询不出数据，也必须封装一个空的json集合，不然页面就会报js错误
- lstTable = new ArrayList<LoginInfoTableDto>();
- }
- JSONObject datas = new JSONObject();
- // 设置总共有多少条记录
- datas.put(Constant4Ospm.TOTAL, total);
- // 设置当前页的数据
- datas.put(Constant4Ospm.PAGE_SIZE, lstTable);
/** * 封装Json数据 */ long total = 0; // 符合查询的总条数 List<LoginInfoTableDto> lstTable = null; // 查询结果 total = (Long) mapLoginInfo.get(Constant4Ospm.TOTAL); if (mapLoginInfo.get(Constant4Ospm.SEARCH_RESULT) != null) { lstTable = (List<LoginInfoTableDto>) mapLoginInfo .get(Constant4Ospm.SEARCH_RESULT); } else { //注：如果从数据库查询不出数据，也必须封装一个空的json集合，不然页面就会报js错误 lstTable = new ArrayList<LoginInfoTableDto>(); } JSONObject datas = new JSONObject(); // 设置总共有多少条记录 datas.put(Constant4Ospm.TOTAL, total); // 设置当前页的数据 datas.put(Constant4Ospm.PAGE_SIZE, lstTable);④后台数据与表格关联
后台过来的数据怎么与表格每一列对应呢？其实很简单：后台rows中包含了名叫LoginInfoTableDto的javabean-json集合，datagrid的field和idField对应LoginInfoTableDto中的一个属性（大体上是这样，当然field也可以不对应javabean的属性，你可以进行一些转换）。
⑤toolbar工具栏
【图二：页面布局】能够看到datagrid有“添加新用户”、“批量删除”等工具栏，这些工具栏的实现方式也很简单：
Js代码
- (</span><span class="string">'#loginInfoTable'</span><span>).datagrid({ </span></span></li><li><span> toolbar:[{<span class="comment">//正上方工具栏</span><span> </span></span></li><li><span> text:<span class="string">'添加新用户'</span><span>, </span></span></li><li><span> iconCls:<span class="string">'icon-add'</span><span>, </span></span></li><li><span> handler:<span class="keyword">function</span><span>(){ </span></span></li><li><span> <span class="comment">//点击工具栏运行的js方法</span><span> </span></span></li><li><span> openDialog_add(); </span></li><li><span> } </span></li><li><span> },<span class="string">'-'</span><span>,{ </span></span></li><li><span> text:<span class="string">'批量删除'</span><span>, </span></span></li><li><span> iconCls:<span class="string">'icon-cancel'</span><span>, </span></span></li><li><span> handler:<span class="keyword">function</span><span>(){ </span></span></li><li><span> batch(<span class="string">'delete'</span><span>); </span></span></li><li><span> } </span></li><li><span>............... </span></li></ol></div><pre name="code" class="js" codeable_id="" codeable_type="BlogComment" source_url="http://blessht.iteye.com/blog/1069749/#" pre_index="9" title="jquery-easyui实现页面布局和增删改查操作（SSH2框架支持）" style="display: none;">(‘#loginInfoTable’).datagrid({ toolbar:[{//正上方工具栏 text:’添加新用户’, iconCls:’icon-add’, handler:function(){ //点击工具栏运行的js方法 openDialog_add(); } },’-‘,{ text:’批量删除’, iconCls:’icon-cancel’, handler:function(){ batch(‘delete’); } ……………
当然easyui datagrid还有很多其它的功能，网上有很多大神已经详细介绍过，这里就不赘述了。
- dialog
对话框的使用也很简单：你只需要定义一个带id的div，在div中填入你需要在对话框中显示的内容，然后调用一下方法即可变成easyui的dialog：
Html代码
- <div id=“dd” title=“My Dialog” style=“width:400px;height:200px;”>
- Dialog Content.
- </div>
<div id="dd" title="My Dialog" style="width:400px;height:200px;"> Dialog Content. </div>Html代码
- ('#dd').dialog(options); </span></span></li></ol></div><pre name="code" class="html" codeable_id="" codeable_type="BlogComment" source_url="http://blessht.iteye.com/blog/1069749/#" pre_index="11" title="jquery-easyui实现页面布局和增删改查操作（SSH2框架支持）" style="display: none;">(‘#dd’).dialog(options);
前面【图三：用户编辑层】就是一个dialog，大家看下代码：
jsp页面：
Html代码
- <!– 编辑 –>
- <div id=“loginInfoEdit” icon=“icon-save”
- style=“padding: 5px; width: 500px; height: 300px;”>
- <h5 id=“loginInfoEdit_message” style=“color: red;”></h5>
- <div class=“ToolTip_Form” id=“table_loginInfoEdit” onkeydown=“if(event.keyCode==13){loginInfoEdit();}”>
- <input type=“hidden” id=“loginInfoEdit_loginId”></input>
- <ul>
- <li>
- <label>用户名：</label>
- <label id=“loginInfoEdit_loginCode”></label>
- </li>
- <li>
- <label>密码：</label>
- <input type=“password” class=“easyui-validatebox” id=“loginInfoEdit_password” maxlength=“20” required=“true”></input>
- </li>
- <li>
- <label>重复密码：</label>
- <input type=“password” class=“easyui-validatebox” id=“loginInfoEdit_repassword” maxlength=“20” required=“true”></input>
- </li>
- <li>
- <a href=“#” class=“easyui-linkbutton” icon=“icon-ok” onclick=“loginInfoEdit();”>提交</a>
- </li>
- </ul>
- </div>
- </div>
<!-- 编辑 --> <div id="loginInfoEdit" icon="icon-save" style="padding: 5px; width: 500px; height: 300px;"> <h5 id="loginInfoEdit_message" style="color: red;"></h5> <div class="ToolTip_Form" id="table_loginInfoEdit" onkeydown="if(event.keyCode==13){loginInfoEdit();}"> <input type="hidden" id="loginInfoEdit_loginId"></input> <ul> <li> <label>用户名：</label> <label id="loginInfoEdit_loginCode"></label> </li> <li> <label>密码：</label> <input type="password" class="easyui-validatebox" id="loginInfoEdit_password" maxlength="20" required="true"></input> </li> <li> <label>重复密码：</label> <input type="password" class="easyui-validatebox" id="loginInfoEdit_repassword" maxlength="20" required="true"></input> </li> <li> <a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="loginInfoEdit();">提交</a> </li> </ul> </div> </div>js代码：
Js代码
- //设置弹出框的属性
- function setDialog_edit(){
- (<span class="string">'#loginInfoEdit'</span><span>).dialog({ </span></span></li><li><span> title : <span class="string">'用户编辑'</span><span>, </span></span></li><li><span> modal: <span class="keyword">true</span><span>, </span><span class="comment">//模式窗口：窗口背景不可操作</span><span> </span></span></li><li><span> collapsible : <span class="keyword">true</span><span>, </span><span class="comment">//可折叠，点击窗口右上角折叠图标将内容折叠起来</span><span> </span></span></li><li><span> resizable : <span class="keyword">true</span><span> </span><span class="comment">//可拖动边框大小</span><span> </span></span></li><li><span> }); </span></li><li><span>} </span></li><li><span><span class="comment">//打开对话框</span><span> </span></span></li><li><span><span class="keyword">function</span><span> openDialog_edit(loginId,loginCode){ </span></span></li><li><span> loginInfoEditReset(loginId,loginCode); </span></li><li><span> (<span class="string">'#loginInfoEdit'</span><span>).dialog(</span><span class="string">'open'</span><span>); </span></span></li><li><span>} </span></li><li><span><span class="comment">//关闭对话框</span><span> </span></span></li><li><span><span class="keyword">function</span><span> closeDialog_edit(){ </span></span></li><li><span> $(’#loginInfoEdit’).dialog(‘close’);
- }
//设置弹出框的属性 function setDialog_edit(){ $('#loginInfoEdit').dialog({ title : '用户编辑', modal: true, //模式窗口：窗口背景不可操作 collapsible : true, //可折叠，点击窗口右上角折叠图标将内容折叠起来 resizable : true //可拖动边框大小 }); } //打开对话框 function openDialog_edit(loginId,loginCode){ loginInfoEditReset(loginId,loginCode); $('#loginInfoEdit').dialog('open'); } //关闭对话框 function closeDialog_edit(){ $('#loginInfoEdit').dialog('close'); }- messager消息框
【图四：确认弹出框】就是一个消息框，easyui它可以模仿html的alert()、confirm()等提示框，而且画面更美观。
图四批量禁用的代码如下：
Html代码
- //禁用操作
- $.messager.confirm(‘禁用提示’, ’你确定禁用下列用户吗?<br/>‘+cods.join(‘,’), function(r){
- if (r){
- var url = root+’/ospm/loginInfo/doLoginInfoInvalid.jhtml?loginId=’+loginId;
- changeStatus(url);
- }
- });
//禁用操作 $.messager.confirm('禁用提示', '你确定禁用下列用户吗?<br/>'+cods.join(','), function(r){ if (r){ var url = root+'/ospm/loginInfo/doLoginInfoInvalid.jhtml?loginId='+loginId; changeStatus(url); } });很抱歉，只完成了用户管理一个模块的功能。
附件带项目源码，希望对大家有所帮助。(源码一包含项目源码和数据库，源码二包含项目jar包)
关键jar版本：hibernate3.3、spring2.6、struts2.1
数据库：mysql5.1
数据库连接池：bonecp 0.7
项目类型：eclipse - dynamic web project
登录帐号：admin 密码：admin
部署方式：
①下载“源码一”和“源码二”，然后分别解压
②源码一包含项目源码和部分jar包以及*.sql；源码二包含其余jar包，直接放入OSPM\WebRoot\WEB-INF\lib目录下即可
③使用eclipse打开，import导入项目
④修改OSPM/config/mysql-jdbc.properties数据库连接帐号密码
⑤使用eclipse自带插件：servers部署启动项目
⑥访问http://localhost:8080/OSPM即可
需要注意的是，这个项目是eclipse下创建的dynamic web project不是tomcat项目
另一种方案：
完成上面①~④步骤以后把项目export成war包，直接放到tomcat的webapps下然后启动
