论坛首页 → Web前端技术论坛 →

jquery-easyui实现页面布局和增删改查操作（SSH2框架支持）

浏览 83904 次
锁定老帖子 主题：jquery-easyui实现页面布局和增删改查操作（SSH2框架支持）
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • 白糖_
  • 等级: 一星会员
  • 性别:
  • 文章: 162
  • 积分: 190
  • 来自: 成都
   发表时间：2011-06-03   最后修改：2011-06-09


 前几天心血来潮用jquery-easyui+spring、struts2、hibernate实现了一个系统的一小部分功能，下面给大家分享一下。

 

  • 首先看运行效果：

【图一：登录页】

 

 

 

【图二：页面布局】



 

 

【图三：用户编辑层】



 

 

 

【图四：确认弹出框】

 

 

 

  • 准备

easyui插件简介在这就不赘述了，大家可以在iteye上找到很多该插件的相关消息。

如果页面需要使用easyui插件，需要引进一下js和css（使用的时候需要注意easyui版本依赖的jquery.js版本要对应）：

<script type="text/javascript" src="<%=root%>/Web/common/js/jquery-1.4.4.min.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专属属性）

 

<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：

 

$('#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

这也是我使用的方式，看下面代码：

<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分隔：

/**
 * 创建新选项卡
 * @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中定义：

我使用的是第一种方式：

<!-- 表格 -->
<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>

 第二种方式如下：

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中的数据集合。

/**
		 * 封装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有“添加新用户”、“批量删除”等工具栏，这些工具栏的实现方式也很简单：

$('#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：

<div id="dd" title="My Dialog" style="width:400px;height:200px;">
    Dialog Content.
</div>

$('#dd').dialog(options);

 前面【图三：用户编辑层】就是一个dialog，大家看下代码：

jsp页面：

<!-- 编辑 -->
<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代码：

//设置弹出框的属性
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()等提示框，而且画面更美观。

图四批量禁用的代码如下：

//禁用操作
$.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下然后启动

  • 大小: 17 KB
  • 大小: 106.1 KB
  • 大小: 27.7 KB
  • 大小: 34.9 KB
返回顶楼
         
  • dingchao.lonton
  • 等级: 初级会员
  • 性别:
  • 文章: 70
  • 积分: 40
  • 来自: 成都
   发表时间：2011-06-03  
敢问楼主在哪家公司供职
返回顶楼
          回帖地址
0 请登录后投票
  • dingchao.lonton
  • 等级: 初级会员
  • 性别:
  • 文章: 70
  • 积分: 40
  • 来自: 成都
   发表时间：2011-06-03  
成都支付宝，求内推，有意愿的请联系270422767@qq.com
返回顶楼
          回帖地址
0 请登录后投票
  • 白糖_
  • 等级: 一星会员
  • 性别:
  • 文章: 162
  • 积分: 190
  • 来自: 成都
   发表时间：2011-06-03  
dingchao.lonton 写道
敢问楼主在哪家公司供职


一个国企的子公司，只有国企的体制，没有国企的待遇
返回顶楼
          回帖地址
0 请登录后投票
  • jy158757
  • 等级: 初级会员
  • 文章: 13
  • 积分: 30
  • 来自: ...
   发表时间：2011-06-07  
楼主是银海的吗？还是30所的？同为成都javaer。easyui用了几个项目了。感觉还行，有空可以交流一下。
返回顶楼
          回帖地址
0 请登录后投票
  • fancool
  • 等级: 初级会员
  • 性别:
  • 文章: 152
  • 积分: 30
  • 来自: 成都
   发表时间：2011-06-07  
成都的哦,那就支持一下,我现在项目也是用easyui开发的
返回顶楼
          回帖地址
0 请登录后投票
  • 偶尔玩玩
  • 等级: 初级会员
  • 性别:
  • 文章: 21
  • 积分: 30
  • 来自: 苏州
   发表时间：2011-06-07  
我们也在用这个
返回顶楼
          回帖地址
0 请登录后投票
  • hamber
  • 等级: 初级会员
  • 性别:
  • 文章: 201
  • 积分: 30
  • 来自: 深圳
   发表时间：2011-06-07  
确信靠谱？
返回顶楼
          回帖地址
0 请登录后投票
  • hlj79513
  • 等级: 初级会员
  • 性别:
  • 文章: 26
  • 积分: 30
  • 来自: 厦门
   发表时间：2011-06-07   最后修改：2011-06-07
最近我也在写这块的.我也上传一下更LZ共享一下.呵呵.顺便提点疑问.
这个是主页面:

这个是点击下面的横幅,模仿mac 的 鼠标移动在上面会有驼峰效果

采用ajax 来读取后才数据 并且用dataGird来进行展现 读取的时候画面会显示进行等待

选中其中一条数据 点击进行更新 弹出easyui的window 并且将改条数据的内容传到window 部分设置了不可修改

点击OK window 关闭 并且 弹出messager

成功则 弹出 提醒

选中记录 点击删除 弹出 确认框

点击添加 弹出对话框 还是刚刚那个window  用来easyui的ValidateBox

数据还支持排序

好了到了提问的时间了.
小弟碰到一个问题 本来点击列 即是上面"序号" 的是否会弹出右键菜单 取消则该列的数据都不会显示
但是显示不正确
上面是实际的 下面的是理想的 不知道什么原因

这个是测试输出的效果

不知道有没那位有过相关经验
还有关于我现在的构架有点疑问:
如果照这样写的话 那前端的script不是很大了 而且还比较凌乱. 大家给点建议吧
返回顶楼
          回帖地址
0 请登录后投票
  • hlj79513
  • 等级: 初级会员
  • 性别:
  • 文章: 26
  • 积分: 30
  • 来自: 厦门
   发表时间：2011-06-07  
相关代码http://hlj79513.iteye.com/blog/1072163
有兴趣的朋友可以去参考参考.就不在这贴了 免得太乱
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics