easyui框架搭建

最新推荐文章于 2019-08-21 23:31:25 发布
最新推荐文章于 2019-08-21 23:31:25 发布
阅读量844 收藏
点赞数
分类专栏： 页面框架 文章标签： easyui

1.官网下载easyui：http://www.jeasyui.com

2.将easyui框架复制到您的项目中。

3.建立初始页面

[html]  view plain  copy
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>  
  2. <!DOCTYPE html >  
  3. <html>  
  4. <title>首页</title>  
  5. <script type="text/javascript" src="jslib/jquery-easyui-1.4.2/jquery.min.js"></script>  
  6. <script type="text/javascript" src="jslib/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>  
  7. <script type="text/javascript" src="jslib/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>  
  8. <link rel="stylesheet" href="jslib/jquery-easyui-1.4.2/themes/default/easyui.css" type="text/css"></link>  
  9. <link rel="stylesheet" href="jslib/jquery-easyui-1.4.2/themes/icon.css" type="text/css"></link>  
  10. <body class="easyui-layout">  
  11.     <div data-options="region:'north',title:'欢迎访问该系统',split:true" style="height: 100px;"></div>  
  12.     <div data-options="region:'south',title:'South',split:true" style="height: 10px;"></div>  
  13.     <div data-options="region:'east',title:'East',split:true" style="width: 100px;"></div>  
  14.     <div data-options="region:'west',title:'West',split:true" style="width: 100px;"></div>  
  15.     <div data-options="region:'center',title:'center title'" style="padding: 5px; background: #eee;"></div>  
  16. </body>  
  17. </html>  

3.1去除底部的折叠效果（去掉title标题即可），以及左侧的折叠效果并且带标题：修改代码如下：

[html]  view plain  copy
  1. split:true --》表示可以拖动边框。  
  2. <pre name="code" class="html">border:false --》去除title的边框。  
  3. <pre name="code" class="html">fit:true --》自适应panel的大小。  

 

 

 
 
 
  
 
   [html]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1. <body class="easyui-layout">  
  2.     <div data-options="region:'north',title:'欢迎访问该系统',split:true" style="height: 100px;"></div>  
  3.     <div data-options="region:'south',split:true" style="height: 25px;"></div>  
  4.     <div data-options="region:'east',title:'East',split:true" style="width: 100px;"></div>  
  5.     <div data-options="region:'west',split:true" style="width: 100px;">  
  6.         <div class="easyui-panel" data-options="title:'luckyssmm系统',border:false, fit:true"></div>  
  7.     </div>  
  8.     <div data-options="region:'center',title:'center title'" style="padding: 5px; background: #eee;"></div>  
  9. </body>  
 

 

 
3.2添加登录框： 

 

 

 
 
 
  
 
   [html]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1. <div class="easyui-dialog" data-options="title:'登录'">  
  2.     <table>  
  3.         <tr>  
  4.             <th>登录名</th>  
  5.             <td><input></td>  
  6.         </tr>  
  7.         <tr>  
  8.             <th>密码</th>  
  9.             <td><input></td>  
  10.         </tr>  
  11.     </table>  
  12. </div>  
 

 

 
3.3添加登录按钮等：通过查看dialog的api添加如下代码：http://www.jeasyui.com/documentation/index.php# 

 

 

 
 
 
  
 
   [html]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1. buttons --》 添加所需按钮。  
  2. <pre name="code" class="html">modal:true --》 模式化窗口，即只可操作当前窗口。  
 

 

 

 

 

 

 
 
 
  
 
   [html]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1. <div class="easyui-dialog" data-options="title:'登录',modal:true , buttons:[{  
  2.             text:'注册',  
  3.             iconCls:'icon-edit',  
  4.             handler:function(){alert('edit')}  
  5.         },{  
  6.             text:'登录',  
  7.             iconCls:'icon-help',  
  8.             handler:function(){alert('help')}  
  9.         }]">  
  10.     <table>  
  11.         <tr>  
  12.             <th>登录名</th>  
  13.             <td><input></td>  
  14.         </tr>  
  15.         <tr>  
  16.             <th>密码</th>  
  17.             <td><input></td>  
  18.         </tr>  
  19.     </table>  
  20. </div>  
 

 
3.4 通过查看windows的api实现，取消不显示关闭按钮。 

 

 

 
 
 
  
 
   [html]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1. closable:false --》设置不显示关闭按钮。  
 

 

 
3.5添加注册按钮的弹出框并设置其为隐藏状态： 

 

 

 
 
 
  
 
   [html]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1. <pre name="code" class="html">closed:true --》 设置当前弹出框为隐藏状态。windows的api查看。  
 

 

 

 

 

 

 
 
 
  
 
   [html]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1. <pre name="code" class="html"><div id="index_regDialog" class="easyui-dialog" data-options="title:'登录',modal:true, closed:true, buttons:[{  
  2.                 text:'注册',  
  3.                 iconCls:'icon-edit',  
  4.                 handler:function(){alert('edit')}  
  5.             }]">  
  6.         <table>  
  7.             <tr>  
  8.                 <th>登录名</th>  
  9.                 <td><input></td>  
  10.             </tr>  
  11.             <tr>  
  12.                 <th>密码</th>  
  13.                 <td><input></td>  
  14.             </tr>  
  15.             <tr>  
  16.                 <th>重复密码</th>  
  17.                 <td><input></td>  
  18.             </tr>  
  19.         </table>  
  20.     </div>  
 

 

 

 
3.6添加登录框的注册按钮的事件： 

 

 

 
 
 
  
 
   [html]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1. <pre name="code" class="html">                text:'注册',  
  2.                 iconCls:'icon-edit',  
  3.                 handler:function(){  
  4.                     $('#index_regDialog').dialog('open');  
  5.                 }  
 

 

 

 
3.7 另一种初始化dialog的写法，供参考(1.31版本可以实现dialog自适应功能，否则在div中初始化，dialog不会自适应。)： 

 

 

 
 
 
  
 
   [html]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1. <div id="index_regDialog_2">  
  2.     <table>  
  3.         <tr>  
  4.             <th>登录名</th>  
  5.             <td><input></td>  
  6.         </tr>  
  7.         <tr>  
  8.             <th>密码</th>  
  9.             <td><input></td>  
  10.         </tr>  
  11.         <tr>  
  12.             <th>重复密码</th>  
  13.             <td><input></td>  
  14.         </tr>  
  15.     </table>  
  16. </div>  
 

 

 

 
 
 
  
 
   [html]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1. <script type="text/javascript">  
  2.     $(function() {  
  3.         $('#index_regDialog_2').dialog({  
  4.             title : '登录2',  
  5.             modal : true,  
  6. //             closed : true,  
  7.             buttons : [ {  
  8.                 text : '注册',  
  9.                 iconCls : 'icon-edit',  
  10.                 handler : function() {  
  11.                     alert('edit')  
  12.                 }  
  13.             }]  
  14.         }).dialog('close');  
  15.     });  
  16. </script>  
 

 

 
3.8 添加注册校验功能。。 

 

3.8.1 注册窗口先添加form表单：
 

 

 
 
 
  
 
   [html]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1. <form id="index_regForm" method="post">  
  2.     <table>  
  3.         <tr>  
  4.             <th>登录名</th>  
  5.             <td><input></td>  
  6.         </tr>  
  7.         <tr>  
  8.             <th>密码</th>  
  9.             <td><input></td>  
  10.         </tr>  
  11.         <tr>  
  12.             <th>重复密码</th>  
  13.             <td><input></td>  
  14.         </tr>  
  15.     </table>  
  16. </form>  
 

 

 
3.8.2查看api添加，初始化form表单：http://www.jeasyui.com/documentation/index.php#，(如果使用ValidateBox，如下的onSubmit方法先要去掉。。。) 

 

 

 
 
 
  
 
   [html]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1. //初始化form  
  2. $('#index_regForm').form({  
  3.     url:'',  
  4.     onSubmit: function(){  
  5.         // do some check  
  6.         // return false to prevent submit;  
  7.     },  
  8.     success:function(data){  
  9.         alert(data)  
  10.     }  
  11. });  
 

 

 
3.8.3 添加注册按钮的表单提交事件：。。。。 

 

 

 
 
 
  
 
   [html]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1. $('#index_regForm').submit();  
 

 

 
3.8.4 添加easyui的验证属性，api的ValidateBox属性： 

 

 

 
 
 
  
 
   [html]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1.         <form id="index_regForm" method="post">  
  2.             <table>  
  3.                 <tr>  
  4.                     <th>登录名</th>  
  5.                     <td><input name="name" class="easyui-validatebox" data-options="required:true,missingMessage:'*登录名称必填'"></td>  
  6.                 </tr>  
  7.                 <tr>  
  8.                     <th>密码</th>  
  9.                     <td><input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true"></td>  
  10.                 </tr>  
  11.                 <tr>  
  12.                     <th>重复密码</th>  
  13.                     <!--td><input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" required="required" validType="eqPwd['#pwd']"></td-->  
  14.                     <td><input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" data-options="required:true, validType:'eqPwd[\'#pwd\']'"></td>  
  15.                  </tr>  
  16.             </table>  
  17.         </form>  
 

 

 
3.8.5 引入孙宇扩展的easyui插件，请自行搜索下载吧。 

 

 

3.8.6 form表单第二种初始化方法，写到dialog的buttons组件中。。。
 

 

 
 
 
  
 
   [html]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1. <div id="index_regDialog" class="easyui-dialog" data-options="title:'登录',modal:true, closed:true, buttons:[{  
  2.                 text:'注册',  
  3.                 iconCls:'icon-edit',  
  4.                 handler:function(){  
  5.                     //初始化form  
  6.                     $('#index_regForm').form({  
  7.                         url : '',  
  8.                         success : function(data) {  
  9.                             alert(data)  
  10.                         }  
  11.                     });  
  12.                     $('#index_regForm').submit();  
  13.                 }  
  14.             }]">  
 

 

 
3.8.7 form 第三种初始化方法，包含submit事件： 

 

 

 

 
 
 
  
 
   [html]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1. <div id="index_regDialog" class="easyui-dialog" data-options="title:'登录',modal:true, closed:true, buttons:[{  
  2.             text:'注册',  
  3.             iconCls:'icon-edit',  
  4.             handler:function(){  
  5.                 //初始化form  
  6.                 $('#index_regForm').form('submit', {  
  7.                     url : '',  
  8.                     success : function(data) {  
  9.                         alert(data)  
  10.                     }  
  11.                 });  
  12.             }  
  13.         }]">  
 

 


 

3.8.8 或者用如下方式初始化form表单：
 

 

 
 
 
  
 
   [java]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1. <div id="index_regDialog" class="easyui-dialog" data-options="title:'登录',modal:true, closed:true, buttons:[{  
  2.             text:'注册',  
  3.             iconCls:'icon-edit',  
  4.             handler:function(){  
  5.                 reg();  
  6.             }  
  7.         }]">  
 

 

 

 
 
 
  
 
   [java]  
   view plain 
    copy 
   
 
   
 
    
  
 
 
 
 
  1. </pre><pre name="code" class="java">    function reg() {  
  2.         //初始化form  
  3.         $('#index_regForm').form('submit', {  
  4.             url : '${pageContext.request.contextPath}/userController/reg.do',  
  5.             //          dataType : 'json',  
  6.             //          contentType : 'application/json;charset=UTF-8',  
  7.             success : function(data) {  
  8.                 var $data = $.parseJSON(data);  
  9.                 console.info($data.success);  
  10.                 console.info($data.message);  
  11.                 if ($data.success) {  
  12.                     $('#index_regDialog').dialog('close');  
  13.                 }  
  14.                 $.messager.show({  
  15.                     title : '提示',  
  16.                     msg : $data.message,  
  17.                     timeout : 5000,  
  18.                     showType : 'slide'  
  19.                 });  
  20.             }  
  21.         });  
  22.     }  
 

 

 

 


 
注：form表单的初始化：请参考api form : 
http://www.jeasyui.com/documentation/index.php# 

 


                

        

    

  



    



                



	

		

			

				
					
EasyUI后台管理框架

				
			

			

				

					01-18
				

			

		

		

			
				
EasyUI框架的后台管理模板，可进行三级管理，上下结构布局，上部分子系统按钮，下部分左侧菜单，下部右侧操作部分

			
		

	



                

            
              



	

		

			

				
					
C# MVC4+EasyUI框架搭建

				
			

			

				

					03-27
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用C# MVC4框架结合EasyUI进行Web应用程序开发。C# MVC（Model-View-Controller）是一种设计模式，用于构建可维护性和可测试性较高的Web应用，而EasyUI则是一个基于jQuery的UI库，提供...

			
		

	



              


  
              

                


	

		

			

				
					
easyui 后台框架搭建

				
			

			

				

					weixin_34301132的博客
				

				

					07-07
					
					231
					
				

			

		

		

			
				


近期公司要搭建一个后台管理项目。因为美工缺少 选择使用easyui jquery 框架 仅仅要懂点html js 这个用起来不是难事，看过API、在网上看了些 将它们组装起来 进行改动。因为本人也是第一次接触，如有不足多多不吝赐教。

1、首先去官方站点下载
http://www.jeasyui.com/download/index.php 我用的版本号1.4.3 中间


2...

			
		

	





	

		

			

				
					
搭建EasyUI环境

				
			

			

				

					qq_35158351的博客
				

				

					09-25
					
					540
					
				

			

		

		

			
				
1 安装Web服务器，在http://tomcat.apache.org/download-70.cgi下载Tomcat7安装版本。安装好Tomcat后，启动Tomcat，在浏览器输入http://localhost:8080/ ，如果看到欢迎界面，表示安装成功。2 在官方网站http://www.jeasyui.com/download/index.php下载jQuery EasyUI，这里使用的

			
		

	



		

			
		



	

		

			

				
					
jquery easyui基本框架搭建

				
			

			

				

					leo的专栏
				

				

					05-31
					
					1588
					
				

			

		

		

			
				
jquery easyui 下载地址： 
http://www.jeasyui.com/download/v155.php

下载之后，需要引入里面几个文件：



&lt;!--2个样式表文件--&gt;  
    &lt;link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/&gt;  
    &lt;...

			
		

	





	

		

			

				
					
C# MVC4与EasyUI框架搭建入门教程

				
			

			

				

					
				

			

		

		

			
				
1. C# MVC4框架搭建  MVC（Model-View-Controller）是一种软件设计模式，它将应用程序划分为三个核心组件：模型(Model)、视图(View)和控制器(Controller)。MVC促进了应用程序的模块化和松耦合，这有助于更好地管理...

			
		

	





	

		

			

				
					
Java Spring4集成MyBatis SpringMVC JQuery EasyUI 后台框架

				
			

			

				

					03-11
				

			

		

		

			
				
1. 该框架的开发环境为EclipseJEE集成开发工具。... 前台展示页面使用了JQuery EasyUI的布局、列表和消息组件。  6. 系统实现了较为完善的用户模块，对用户数据实现了增、删、改、查、分页等的功能。

			
		

	





	

		

			

				
					
easyui框架

				
			

			

				

					04-17
				

			

		

		

			
				
总的来说，EasyUI框架结合PHP（如ThinkPHP）可以快速搭建出功能完善的Web应用，通过其丰富的组件和灵活的扩展性，使得开发者可以专注于业务逻辑，而无需过多关注界面细节，从而提高开发效率和产品质量。

			
		

	





	

		

			

				
					
Easyui框架

				
			

			

				

					07-14
				

			

		

		

			
				
这是我自己空闲时间搭建的一个Easyui后台前端框架，希望它可以对大家有帮助。

			
		

	





	

		

			

				
					
SSM框架简易搭建(前端easyui)

				
			

			

				

					04-13
				

			

		

		

			
				
SSM框架简易搭建,包括拦截器,redis,定时器等,适用于新手学习

			
		

	





	

		

			

				
					
使用easyUI搭建的后台管理系统框架

				
			

			

				

					05-15
				

			

		

		

			
				
使用easyUI搭建的后台管理框架，后台管理模板，菜单切换效果

			
		

	





	

		

			

				
					
easyUI框架

				
			

			

				

					02-04
				

			

		

		

			
				
。net，easyUI框架，功能十分强大，包含数据库，MVC三层结构，适合做基础框架

			
		

	





	

		

			

				
					
jquery+easyUI搭建页面

				
			

			

				

					11-09
				

			

		

		

			
				
jquery+easyUI搭建页面
login是登陆页面
easy是主页界面

			
		

	





	

		

			

				
					
使用easyui框架的web应用

				
			

			

				

					08-21
				

			

		

		

			
				
使用easyui框架的web应用,详细介绍了使用easyui框架的的使用

			
		

	





	

		

			

				
					
easyUI环境搭建

				
			

			

				

					墨渐生微的博客
				

				

					10-12
					
					603
					
				

			

		

		

			
				
jQuery EasyUI是一组基于jQuery的UI插件集合, 而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面


&lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt;
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML...

			
		

	





	

		

			

				
					
easyui环境搭建

				
			

			

				

					TheB1stPR的博客
				

				

					07-11
					
					595
					
				

			

		

		

			
				
easyui环境搭建

			
		

	





	

		

			

				
					
JQuery EasyUI环境的搭建

				
			

			

				

					崔向阳@李晓的博客
				

				

					04-21
					
					2698
					
				

			

		

		

			
				
JQueryEasyUI搭建环境






1、下载JqueryEasyUI包 http://www.jeasyui.com/download/index.php

2、打开MyEclipse创建WebProject。

3、将下载下来的JqueryEasyUI包解压后放到到WebRoot下。如下图所示




二、包含文件

       新建一个heade

			
		

	





	

		

			

				
					
EasyUI框架

				
			

			

				

					zhongliwen1981的专栏
				

				

					08-21
					
					1万+
					
				

			

		

		

			
				
一、概述
1.1 EasyUI是什么？
EasyUI全称是Jquery-EasyUI,它是基于Jquery的一个UI插件库，封装了许多实用的控件和功能，并且是完美支持HTML5网页的框架。提供的控件包括数据表格，树形表格，菜单，进度条，选项卡，日期组合框，调节器，对话框等等。
EasyUI的目标就是帮助Web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值