zoukankan      html  css  js  c++  java

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

    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="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="100px;"></div>  
    5.     <div region="west" split="true" title="West" style="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="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,80,sortable:true},  
    3.     {field:'productid',title:'Product ID',rowspan:2,80,sortable:true},  
    4.     {title:'Item Details',colspan:4}  
    5. ],[  
    6.     {field:'listprice',title:'List Price',80,align:'right',sortable:true},  
    7.     {field:'unitcost',title:'Unit Cost',80,align:'right',sortable:true},  
    8.     {field:'attr1',title:'Attribute',100},  
    9.     {field:'status',title:'Status',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="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;  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包，直接放入OSPMWebRootWEB-INFlib目录下即可 
    ③使用eclipse打开，import导入项目 
    ④修改OSPM/config/mysql-jdbc.properties数据库连接帐号密码 
    ⑤使用eclipse自带插件：servers部署启动项目 
    ⑥访问http://localhost:8080/OSPM即可 

    需要注意的是，这个项目是eclipse下创建的dynamic web project不是tomcat项目 

    另一种方案： 
    完成上面①~④步骤以后把项目export成war包，直接放到tomcat的webapps下然后启动
  • 相关阅读:
    Linux 性能工具安装部署
    JVM 详解
    十大经典排序算法动画与解析
    Linux 安装Jdk、mysql、apache、php、tomcat、nginx
    使用mysqldump备份数据库
    Linux 安装 python3.6 ，并且配置 Pycharm 远程连接开发
    python安装途中遇到的问题和解决方法
    Linux安装python2.7、pip和setuptools
    SELENIUM如何调用FIREFOX时加载插件
    NOSQL之MEMCACHE
  • 原文地址：https://www.cnblogs.com/tianxuan/p/4836829.html
Copyright © 2011-2022 走看看