http://blessht.iteye.com/blog/1069749/

已注册：ooip 关联的csdn

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

  • 首先看运行效果：

【图一：登录页】

【图二：页面布局】

【图三：用户编辑层】

【图四：确认弹出框】

  • 准备

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

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

  1. <script type="text/javascript" src="<%=root%>/Web/common/js/jquery-1.4.4.min.js"></script>
  1. <link rel="stylesheet" type="text/css" href="<%=root%>/Web/common/js/easyui/themes/default/easyui.css">
  2. <link rel="stylesheet" type="text/css" href="<%=root%>/Web/common/js/easyui/themes/icon.css">
  3. <script type="text/javascript" src="<%=root%>/Web/common/js/easyui/js/jquery.easyui.min.js"></script>
  4. <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专属属性）

  1. <div id="cc" style="width:600px;height:400px;">
  2. <div region="north" title="North Title" split="true" style="height:100px;"></div>
  3. <div region="south" title="South Title" split="true" style="height:100px;"></div>
  4. <div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>
  5. <div region="west" split="true" title="West" style="width:100px;"></div>
  6. <div region="center" title="center title" style="padding:5px;background:#eee;"></div>
  7. </div>

然后在js中指定id为cc的div为layout：

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

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

  1. <body class="easyui-layout">
  2. <!-- 正上方panel -->
  3. <div region="north" style="height:100px;padding:10px;" href="<%=root%>/Web/common/page/top.html"></div>
  4. <!-- 正左边panel -->
  5. <div region="west" title="菜单栏" split="true" style="width:280px;padding1:1px;overflow:hidden;">
  6. <div class="easyui-accordion" fit="true" border="false">
  7. <!-- selected -->
  8. <div title="用户权限管理" selected="true">
  9. <ul>
  10. <li><a href="javascript:addTab('tabId_loginInfo','用户管理','<%=root%>/ospm/loginInfo/goLoginInfoMain.jhtml');">用户管理</a></li>
  11. <li><a href="javascript:addTab('tabId_privilege','权限管理','<%=root%>/ospm/loginInfo/goPrivilegeMain.jhtml');">权限管理</a></li>
  12. </ul>
  13. </div>
  14. </div>
  15. </div>
  16. <!-- 正中间panel -->
  17. <div region="center" title="功能区" >
  18. <div class="easyui-tabs" id="centerTab" fit="true" border="false">
  19. <div title="欢迎页" style="padding:20px;overflow:hidden;">
  20. <div style="margin-top:20px;">
  21. <h3>你好，欢迎来到权限管理系统</h3>
  22. </div>
  23. </div>
  24. </div>
  25. </div>
  26. <!-- 正下方panel -->
  27. <div region="south" style="height:50px;" align="center">
  28. <label>
  29. 作者：白糖<br/>
  30. 时间：2011-5-17
  31. </label>
  32. </div>
  33. </body>

运行效果如【图二：页面布局】

  • 创建选项卡

【图二：页面布局】上面标记了在菜单栏点击“用户管理”链接即可在功能区创建一个叫“用户管理”的选项卡并加载相应数据。注意：用户管理页面是另一个jsp，需要远程调用。

最初我使用tabs的href属性来远程调用用户管理jsp，发现页面会有js冲突，导致用户管理页面的添加、编辑等各种功能失效，我猜想可能是js冲突，因为布局页引用了easyui，而用户管理jsp也引用了同样的easyui。

后来看了下项目经理ext的布局代码，原来在点击链接的时候会创建一个tabs，只是tabs的内容是一个iframe分隔：

  1. /**
  2. * 创建新选项卡
  3. * @param tabId    选项卡id
  4. * @param title    选项卡标题
  5. * @param url      选项卡远程调用路径
  6. */
  7. function addTab(tabId,title,url){
  8. //如果当前id的tab不存在则创建一个tab
  9. if($("#"+tabId).html()==null){
  10. var name = 'iframe_'+tabId;
  11. $('#centerTab').tabs('add',{
  12. title: title,
  13. closable:true,
  14. cache : false,
  15. //注：使用iframe即可防止同一个页面出现js和css冲突的问题
  16. content : '<iframe name="'+name+'"id="'+tabId+'"src="'+url+'" width="100%" height="100%" frameborder="0" scrolling="auto" ></iframe>'
  17. });
  18. }
  19. }

不过群里也有些大神提醒：如果大量使用iframe会使页面性能降低，所以使用iframe分隔tabs只适合小型项目使用。

  • datagrid表格

easyui datagrid是争议最大的一个功能插件，很多人说它不开源，提供的api不全面，标题列内容可能不对齐，操作繁杂等等。其实个人觉得这个table的功能已经相当不错了，如果只需要做基本的显示则只需配很少的代码。

下面简单介绍下datagrid的使用：

①首先肯定需要有一个table标签，给它定义一个id，在js中通过id.datagrid方法即可创建表格

<table id="tt"></table>

$('#tt').datagrid(options);

②创建表格的列名有两种方式：第一种是直接在table标签中定义，第二种是在js中定义：

我使用的是第一种方式：

  1. <!-- 表格 -->
  2. <table   id="loginInfoTable"
  3. title="用户信息一览"
  4. border="0"
  5. cellspacing="0"
  6. cellpadding="0"
  7. iconCls="icon-edit"
  8. width="98%"
  9. idField="loginId"
  10. pagination="true"
  11. remoteSort="false"
  12. singleSelect="false"
  13. showFooter="false"
  14. striped="true"
  15. url="<%=root%>/ospm/loginInfo/doLoginInfoSearch.jhtml">
  16. <thead>
  17. <tr align="center">
  18. <th field="ck" width="20" checkbox="true" width="20"></th>
  19. <th field="loginCode"  width="200">用户名</th>
  20. <th field="statuValue"  width="100">状态</th>
  21. <th field="opt" formatter='optFormater' width="150">操作</th>
  22. </tr>
  23. </thead>
  24. </table>

第二种方式如下：

  1. columns:[[
  2. {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
  3. {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
  4. {title:'Item Details',colspan:4}
  5. ],[
  6. {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
  7. {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
  8. {field:'attr1',title:'Attribute',width:100},
  9. {field:'status',title:'Status',width:60}
  10. ]]

③向后台请求数据

datagrid有一个属性叫url，在进入页面后，它会通过ajax方式向后台发送请求，后台封装相应数据（JSON格式）再返回给前台即可显示。注意：datagrid在回调函数中必须获得两项json数据：total表示查询出的总结过，rows表示显示在table中的数据集合。

  1. /**
  2. * 封装Json数据
  3. */
  4. long total = 0; // 符合查询的总条数
  5. List<LoginInfoTableDto> lstTable = null; // 查询结果
  6. total = (Long) mapLoginInfo.get(Constant4Ospm.TOTAL);
  7. if (mapLoginInfo.get(Constant4Ospm.SEARCH_RESULT) != null) {
  8. lstTable = (List<LoginInfoTableDto>) mapLoginInfo
  9. .get(Constant4Ospm.SEARCH_RESULT);
  10. } else {
  11. //注：如果从数据库查询不出数据，也必须封装一个空的json集合，不然页面就会报js错误
  12. lstTable = new ArrayList<LoginInfoTableDto>();
  13. }
  14. JSONObject datas = new JSONObject();
  15. // 设置总共有多少条记录
  16. datas.put(Constant4Ospm.TOTAL, total);
  17. // 设置当前页的数据
  18. datas.put(Constant4Ospm.PAGE_SIZE, lstTable);

④后台数据与表格关联

后台过来的数据怎么与表格每一列对应呢？其实很简单：后台rows中包含了名叫LoginInfoTableDto的javabean-json集合，datagrid的field和idField对应LoginInfoTableDto中的一个属性（大体上是这样，当然field也可以不对应javabean的属性，你可以进行一些转换）。

⑤toolbar工具栏

【图二：页面布局】能够看到datagrid有“添加新用户”、“批量删除”等工具栏，这些工具栏的实现方式也很简单：

  1. $('#loginInfoTable').datagrid({
  2. toolbar:[{//正上方工具栏
  3. text:'添加新用户',
  4. iconCls:'icon-add',
  5. handler:function(){
  6. //点击工具栏运行的js方法
  7. openDialog_add();
  8. }
  9. },'-',{
  10. text:'批量删除',
  11. iconCls:'icon-cancel',
  12. handler:function(){
  13. batch('delete');
  14. }
  15. ...............

当然easyui datagrid还有很多其它的功能，网上有很多大神已经详细介绍过，这里就不赘述了。

  • dialog

对话框的使用也很简单：你只需要定义一个带id的div，在div中填入你需要在对话框中显示的内容，然后调用一下方法即可变成easyui的dialog：

  1. <div id="dd" title="My Dialog" style="width:400px;height:200px;">
  2. Dialog Content.
  3. </div>
  1. $('#dd').dialog(options);

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

jsp页面：

  1. <!-- 编辑 -->
  2. <div id="loginInfoEdit" icon="icon-save"
  3. style="padding: 5px; width: 500px; height: 300px;">
  4. <h5 id="loginInfoEdit_message" style="color: red;"></h5>
  5. <div class="ToolTip_Form" id="table_loginInfoEdit" onkeydown="if(event.keyCode==13){loginInfoEdit();}">
  6. <input type="hidden" id="loginInfoEdit_loginId"></input>
  7. <ul>
  8. <li>
  9. <label>用户名：</label>
  10. <label id="loginInfoEdit_loginCode"></label>
  11. </li>
  12. <li>
  13. <label>密码：</label>
  14. <input type="password" class="easyui-validatebox" id="loginInfoEdit_password" maxlength="20" required="true"></input>
  15. </li>
  16. <li>
  17. <label>重复密码：</label>
  18. <input type="password" class="easyui-validatebox" id="loginInfoEdit_repassword" maxlength="20" required="true"></input>
  19. </li>
  20. <li>
  21. <a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="loginInfoEdit();">提交</a>
  22. </li>
  23. </ul>
  24. </div>
  25. </div>

js代码：

  1. //设置弹出框的属性
  2. function setDialog_edit(){
  3. $('#loginInfoEdit').dialog({
  4. title : '用户编辑',
  5. modal: true,            //模式窗口：窗口背景不可操作
  6. collapsible : true,     //可折叠，点击窗口右上角折叠图标将内容折叠起来
  7. resizable : true        //可拖动边框大小
  8. });
  9. }
  10. //打开对话框
  11. function openDialog_edit(loginId,loginCode){
  12. loginInfoEditReset(loginId,loginCode);
  13. $('#loginInfoEdit').dialog('open');
  14. }
  15. //关闭对话框
  16. function closeDialog_edit(){
  17. $('#loginInfoEdit').dialog('close');
  18. }
  • messager消息框

【图四：确认弹出框】就是一个消息框，easyui它可以模仿html的alert()、confirm()等提示框，而且画面更美观。

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

  1. //禁用操作
  2. $.messager.confirm('禁用提示', '你确定禁用下列用户吗?<br/>'+cods.join(','), function(r){
  3. if (r){
  4. var url = root+'/ospm/loginInfo/doLoginInfoInvalid.jhtml?loginId='+loginId;
  5. changeStatus(url);
  6. }
  7. });

很抱歉，只完成了用户管理一个模块的功能。

附件带项目源码，希望对大家有所帮助。(源码一包含项目源码和数据库，源码二包含项目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下然后启动

 

jquery-easyui实现页面布局和增删改查操作（SSH2框架支持）转载的更多相关文章

  1. Jquery easyui开启行编辑模式增删改操作

    Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...

  2. [转]Jquery easyui开启行编辑模式增删改操作

    本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...

  3. 通过flask实现web页面简单的增删改查bootstrap美化版

    通过flask实现web页面简单的增删改查bootstrap美化版 项目目录结构 [root@node1 python]# tree -L 2 . ├── animate.css ├── fileut ...

  4. 详谈easyui datagrid增删改查操作

    转自:http://blog.csdn.net/abauch_d/article/details/7734395 前几天我把easyui dadtagrid的增删改查的实现代码贴了出来,发现访问量达到 ...

  5. 通过flask实现web页面简单的增删改查

    通过flask实现web页面简单的增删改查 # 1.后台程序falsk_web01.py #coding:utf-8 from flask import Flask,render_template,r ...

  6. 后盾网lavarel视频项目---lavarel使用模型进行增删改查操作

    后盾网lavarel视频项目---lavarel使用模型进行增删改查操作 一.总结 一句话总结: 使用模型操作常用方法 查一条:$model=Tag::find($id); 删一条:Tag::dest ...

  7. 浅谈dataGridView使用，以及画面布局使用属性，对datagridview进行增删改查操作，以及委托使用技巧

        通过几天的努力后,对datagridview使用作一些简要的介绍,该实例主要运用与通过对datagridview操作.对数据进行增删改查操作时,进行逻辑判断执行相关操作.简单的使用委托功能,实 ...

  8. 如何搭建一个WEB服务器项目（二）—— 对数据库表进行基本的增删改查操作

    使用HibernateTemplate进行增删改查操作 观前提示:本系列文章有关服务器以及后端程序这些概念,我写的全是自己的理解,并不一定正确,希望不要误人子弟.欢迎各位大佬来评论区提出问题或者是指出 ...

  9. 国产化之路-统信UOS + Nginx + Asp.Net MVC + EF Core 3.1 + 达梦DM8实现简单增删改查操作

    专题目录 国产化之路-统信UOS操作系统安装 国产化之路-国产操作系统安装.net core 3.1 sdk 国产化之路-安装WEB服务器 国产化之路-安装达梦DM8数据库 国产化之路-统信UOS + ...

随机推荐

  1. pycurl，Python cURL library

    pycurl — A Python interface to the cURL library Pycurl包是一个libcurl的Python接口.pycurl已经成功的在Python2.2到Pyt ...

  2. bespoke_百度百科

    bespoke_百度百科 bespoke

  3. rac 实例被莫名重启的案例分析

    详见原文博客链接地址: Rac 实例被莫名重启一列分析

  4. ASP.NET 内置对象涉略

    一.ASP.NET中内置的常用对象的介绍 本文列举了ASP.NET 的八个内置对象,其中前五个是比较常用的. 1.Response Response 对象用于从服务器向用户发送输出的结果. Write ...

  5. UI 响应者链

    响应者链  概念: 每一个应用有一个响应者链,我们的视图结构是一个N叉树(一个视图可以有多个子视图,一个子视图同一时刻只有一个父视图),而每一个继承UIResponder的对象都可以在这个N叉树中扮演 ...

  6. iOS开发 日常错误积累

    1.ios7 tableviewcell上面加入一个view,view上面有button,点击button不运行button的点击事件 解决的方法: self.view.userInteraction ...

  7. [置顶] 吃论扯谈---吃货和Office 365订阅的关系

    什么事物都可以和吃联系起来,在女孩子穿裙子的季节这是一个悲伤的故事! 说明: :Office365是微软云计算产品之一,其采取订阅的方式,按人头*每月的方式付费,用户可以选择自己需要的服务 2:Off ...

  8. cocos2d-html5 简易 下拉表单 控件

    刚才在CH5的群里问了问  有没有大侠写过 下拉表单控件啊!  没人鸟窝 ,DZ老师表示非常伤心啊  ,于是乎  自己写一个把 共享给大家. 效果图上一个  仅仅实现了一个最最主要的控件  非常eas ...

  9. [Swust OJ 1084]--Mzx0821月赛系列之情书(双线程dp)

    题目链接:http://acm.swust.edu.cn/problem/1084/ Time limit(ms): 1000 Memory limit(kb): 65535   Descriptio ...

  10. 手势滑动结束 Activity（一）基本功能的实现

    喜欢听音乐的朋友可能都看过天天动听这款 app, 这款 app 有一个亮点就是在切换页面(Fragment)的时候能够通过手势滑动来结束当前页面.这里先说一下,我为什么会这么关心这个功能呢,由于前两天 ...