easyui

万次阅读 2013-01-10 10:19:31

/scripts/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js要在后面引入。 2.DataGrid修改表格样式，通过rowStyler改变行高 rowStyler:function(index,row){ return 'height:2.8em;'; }

1.国际化显示中文


<script type="text/javascript" src="/scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>

<script type="text/javascript" src="/scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>

<script type="text/javascript" src="/scripts/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>

/scripts/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js要在后面引入。



2.DataGrid修改表格样式，通过rowStyler改变行高
 rowStyler:function(index,row){
    return 'height:2.8em;';
   }

收起

展开全文

EasyUI项目
千次下载 热门讨论 2014-07-07 23:24:42
本项目采用struts2+JDBC+easyui进行编写，对easyui各个组件进行详细介绍。由于水平有限,项目bug在所难免,欢迎指正。博文参考地址：http://blog.csdn.net/itmyhome1990/article/details/37502601 使用方法： 1、...
收起
easyUI文件上传
千次下载 热门讨论 2013-07-10 20:30:44
基于easyui上传支持大型文件多文件上传希望用到的朋友不要忘记评价
收起

【EasyUI】EasyUI学习笔记

千次阅读 2019-09-27 13:55:04

一.EasyUI 简介 1.EasyUI 是前端框架. 2.前端框架 2.1 封装大量css 2.2 封装大量JS 3.使用前端框架 3.1 给标签设置easyui提供的 class 属性即可，id属性可以随便起名。 4.easyui 中需要注意的地方 4.1 data-options ...

一.EasyUI 简介
1.EasyUI 是前端框架.
2.前端框架

2.1 封装大量css

2.2 封装大量JS
3.使用前端框架

3.1 给标签设置easyui提供的 class 属性即可，id属性可以随便起名。
4.easyui 中需要注意的地方

4.1 data-options 属性定义easyui 属性的.

4.2 如果easyui 提供的属性和html 标签属性相同,可以把这个属性

不写在data-options 中

4.3 每一个效果使用纯标签方式和使用标签结合js 方式

4.3.1 如果效果是静态的建议使用纯html 标签方式

4.3.2 如果效果是动态建议使用html 结合js 方式

4.4 在easyui 中所有脚本功能语法:

4.4.1 如果该效果(组件)是abc,控制abc 的语法
$(“jquery 选择器获取到abc”).abc({
	属性名:值,
	事件:function([参数]){}
})

4.4.2 如果该效果(组件)是abc,控制abc 方法的语法
$(“jquery 选择器获取到abc”).abc(“方法名”);//调用方法
$(“jquery 选择器获取到abc”).abc(“方法名”,”参数”);//调用方法

4.5 每个组件可能会有继承关系.
5.EasyUI 适用于后台管理界面,不适用于前台项目页面.用于处理服务器端处理真实数据的效率比较高。

5.1 优点:处理服务器传递过来json 数据能力比较强.

登录页面示例
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css">   
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>   
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script> 
<style type="text/css">
.myicon-login{
	background:url('images/login.png') no-repeat center center;
}
</style>
<script type="text/javascript">
$(function(){
	$("#login_submit").click(function(){
		$('#login_form').form('submit', {    
		    url:'login',    
		    onSubmit: function(){    
		        //非空验证等   
		        if($(":text:eq(0)").val()==""){
		        	$.messager.alert('系统信息','用户名不能为空');
		        	return false;
		        }
		        else if($(":password:eq(0)").val()==""){
		        	$.messager.alert('系统信息','密码不能为空');
		        	return false;
		        }
		    },    
		    success:function(data){    
		       	if(data=="1"){
		       		location.href="page/main.jsp";
		       	}else{
		       		$.messager.alert('系统信息','登录失败');  
		       	}
		    }    
		});
	})
})
</script>
</head>
<body style="background-color:#E9F1FF;">
	<div style="margin:100px auto;width:400px;">
		<div id="p" class="easyui-panel" title="登录"     
	        style="width:400px;height:200px;padding:10px;background:#fafafa;"   
	        data-options="iconCls:'myicon-login'">   
		        <form action="login" method="post" id="login_form">
		        	 <table width="225" align="center">
		        	 	<tr>
		        	 		<td colspan="2" style="text-align:center;font-size:20px; font-weight:bold">至尊管理系统</td>
		        	 	</tr>
		        	 	<tr style="height:40px;">
		        	 		<td>登录名</td>
		        	 		<td><input type="text" name="username"/> </td>
		        	 	</tr>
		        	 	<tr style="height:40px;">
		        	 		<td>
		        	 			密码
		        	 		</td>
		        	 		<td><input type="password" name="password"/> </td>
		        	 	</tr>
		        	 	<tr>
		        	 		<td colspan="2" align="right">
		        	 			<a id="login_submit" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">登录</a> 
		        	 		</td>
		        	 	</tr>
		        	 </table>
		        </form>
		</div>
	</div>
</body>
</html>


根据不同用户显示不同页面


使用json的树，要求数据格式：EasyUI官方文档-树的数据格式
每个节点可以包括下列属性：

id：节点的 id，它对于加载远程数据很重要。

text：要显示的节点文本。

state：节点状态，‘open’ 或 ‘closed’，默认是 ‘open’。当设置为 ‘closed’ 时，该节点有子节点，并且将从远程站点加载它们。

checked：指示节点是否被选中。

attributes：给一个节点添加的自定义属性。

children：定义了一些子节点的节点数组。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主页面</title>
		<link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css">  
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>   
		<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript">
		$(function(){
			$('#main_tree').tree({    
			    url:"data/tree_data.json",
			    onClick:function(node){
			    	if($("#main_tabs").tabs("getTab",node.text)==null){
				    	//alert(node.text);
				    	$('#main_tabs').tabs('add',{
				    		title: node.text,
				    		selected: true,
				    		//content:'<b>adsfadsf</b>'
				    		//只能引进来<body>标签的内容
				    		href:node.attributes.filename,
				    		closable:true
				    	});
					}else{
						$("#main_tabs").tabs("select",node.text);
					}
			    }
			}); 
		})
		</script>
	</head>
	<body class="easyui-layout">
		<!-- 顶部 -->
	    <div data-options="region:'north',title:'至尊管理系统'" style="height:100px;">
	    	<div style="width:400px;height:50px; float:left;font-size:20px; font-weight:bold;line-height: 50px;padding-left:20px;">
	    		至尊管理系统
	    	</div>
	    	<div style="width:200px;height:50px;float:right;line-height: 50px;">
	    		您好,用户,欢迎登录!
	    	</div>
	    </div>   
	    
	    
	    <!-- 左侧树 -->
	    <div data-options="region:'west',title:'菜单'" style="width:200px;">
	    	<ul id="main_tree"></ul> 
	    </div>
	    
	    <!-- 中间 -->
	    <div data-options="region:'center',title:'内容'" style="padding:5px;background:#eee;">
	    	<div id="main_tabs" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true">   
			    <div title="首页" style="padding:20px;">   
			        tab1    
			    </div>
			    <div title="第二页" style="padding:20px;">   
			        tab2 
			    </div>  
			     
			</div>
	    </div>
	    
	    <!-- 底部 -->
	    <div data-options="region:'south',title:'底部声明'" style="height:100px;">
	    	<div style="height:50px; line-height: 50px; text-align:center;color:gray">
	    		Copyright &copy; 版权
	    	</div>
	    </div>
	</body>
</html>

收起

展开全文

Easyui easyui-checkbox问题
2018-12-26 11:04:00
<input id="chkAll" name="chkAll" class="easyui-checkbox" data-options="label:'全选'" /> ``` 标签是这样，然后js用了个 $("#chkAll").checkbox({代码}),这个是初始化了吗？就出现了两个全选 !...
收起
javascript

Easyui easyui-datebox日期控件格式设置

万次阅读 2018-09-27 15:15:08

easyui-datebox默认格式为 10/12/2018 1、设置格式化月份，将easyui-datebox日期控件格式设置为自定义形式，如：2018-09，只显示年月，如下： html如下： <input id="st_mouth" ...

easyui-datebox默认格式为 10/12/2018

 1、设置格式化月份，

将easyui-datebox日期控件格式设置为自定义形式，如：2018-09，只显示年月，如下：



html如下：

<input id="st_mouth" editable="false"  class="easyui-datebox" name="name" data-options="label:'月份：'" />

JS设置:

$(document).ready(function(){	
	$('#st_mouth').datebox({
	       //显示日趋选择对象后再触发弹出月份层的事件，初始化时没有生成月份层
	       onShowPanel: function () {
	          //触发click事件弹出月份层
	          span.trigger('click'); 
	          if (!tds)
	            //延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔
	            setTimeout(function() { 
	                tds = p.find('div.calendar-menu-month-inner td');
	                tds.click(function(e) {
	                //禁止冒泡执行easyui给月份绑定的事件
	                e.stopPropagation(); 
	                //得到年份
	                var year = /\d{4}/.exec(span.html())[0] ,
	                //月份
	                //之前是这样的month = parseInt($(this).attr('abbr'), 10) + 1; 
	                month = parseInt($(this).attr('abbr'), 10);  

					//隐藏日期对象                     
					$('#st_mouth').datebox('hidePanel') 
					//设置日期的值
					.datebox('setValue', year + '-' + month); 
	                });
	            }, 0);
	    },
	    //配置parser，返回选择的日期
	    parser: function (s) {
	        if (!s) return new Date();
	        var arr = s.split('-');
	        return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);
	    },
	    //配置formatter，只返回年月 之前是这样的d.getFullYear() + '-' +(d.getMonth()); 
	    formatter: function (d) { 
	        var currentMonth = (d.getMonth()+1);
	        var currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + '');
	        return d.getFullYear() + '-' + currentMonthStr; 
	    }
	});

	//日期选择对象
	var p = $('#st_mouth').datebox('panel'), 
	//日期选择对象中月份
	tds = false, 
	//显示月份层的触发控件
	span = p.find('span.calendar-text'); 
	var curr_time = new Date();

	//设置默认值为当前月
	$("#st_mouth").datebox("setValue", formatter(curr_time));	
		
});


完成！

 

2、设置格式化年-月-日

参考官网例子：



<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Date Format - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Date Format</h2>
	<p>Different date formats are applied to different DateBox components.</p>
	<div style="margin:20px 0;"></div>
	<input class="easyui-datebox"></input>
	<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"></input>
	<script type="text/javascript">
		function myformatter(date){
			var y = date.getFullYear();
			var m = date.getMonth()+1;
			var d = date.getDate();
			return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
		}
		function myparser(s){
			if (!s) return new Date();
			var ss = (s.split('-'));
			var y = parseInt(ss[0],10);
			var m = parseInt(ss[1],10);
			var d = parseInt(ss[2],10);
			if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
				return new Date(y,m-1,d);
			} else {
				return new Date();
			}
		}
	</script>
</body>
</html>

完成！

收起

展开全文

JqueryEasyui

万次阅读 热门讨论 2016-07-06 12:05:33

jQuery EasyUI是一组基于jQuery的UI插件集合体，而他的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面，开发者只需要了解一些html标签，jQuery EasyUI从名字上就一眼可以了解到Easy，他将很多css和...

强烈推荐一个大神的人工智能的教程：http://www.captainbed.net/zhanghan

简介

jQuery EasyUI是一组基于jQuery的UI插件集合体，而他的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面，开发者只需要了解一些html标签，jQuery EasyUI从名字上就一眼可以了解到Easy，他将很多css和js代码封装起来，在我们需要的时候直接引入就可以。

应用

1、好的东西用在真实的环境中才能突显他的价值！首先我们需要先下载jQueryEasyui,下载网址如下：

2、搭建三层环境

3、建立一个文件夹Contents,将第一步下载的easyui中的如下内容复制进来,供我们之后调用

4、在Views文件夹下建立我们的html页

5、在我们之前的学习过程中，到了第四步就应该写css代码或者js代码，但是现在还没结束，我们应该在Controllers中添加相应Views文件夹下的控制器，这里我们用到了MVC的内容，如下：

我们打开一个cs文件，例如，AdminController，我们可以看到其中有一个Action是Index，index的名字是和Views文件夹下Admin文件下的html文件名称相同的。

6、基本的环境搭建好后就要开始编写html代码了，我们首先引入我们需要用的代码，其中我们可以看到我们调用了icon.css，在我们的html代码中直接用了其中的一个data-options="iconCls:'icon-save'"

7、最后一步就是去浏览器运行一下看看效果了，点击VS中的运行,发现无法找到资源，看一下地址栏，发现并没有要访问的主页呀！

然后我们输入如下地址，发现成功了，并且要说明，user是Views文件夹下方的名字，我们可以看到第5步的图中有很多的html页，如果没有指明，那么默认的就是index页，如果想访问其他页，在此举一个例子：locallhost:39456/user/basiclayout，那我们就可以访问basiclayout页了。

注意

Easyui的引入顺序一定要注意，jquery在前，easyui在后

    <link href="../Contents/Easyui/themes/default/easyui.css" rel="stylesheet" type="text/css"/>
    <link href="../Contents/Easyui/themes/icon.css" rel="stylesheet" type="text/css"/>
    <script src="../Contents/Easyui/jquery.min.js" type="text/javascript"></script>
    <script src="../Contents/Easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../Contents/Easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>

收起

展开全文

EasyUI使用
千次阅读 热门讨论 2016-07-26 10:59:09
EasyUI 简介 easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户...
收起
EasyUI easyui-textbox,easyui-validatebox的自定义校验
千次阅读 2017-03-30 17:25:09
可以用于easyui-textbox和easyui-validatebox的控件自定义校验设置
收起
Javascript JQuery
easyUI easyui-combobox 和 easyui-combogrid 用法
千次阅读 2017-08-14 11:34:06
加载成功后赋值<input class="easyui-combobox" style="width:200px" id="jmslx" name="jmslx" data
收起
jQuery EasyUI 1.3.2 离线API简体中文版
千次下载 热门讨论 2013-05-12 22:46:00
近期由于参与的一个Web系统项目前台使用了EasyUI作为Web解决方案，所以查了一下EasyUI的相关资料，发现离线的中文API不太多，而且版本都比较老，索性自己讲EasyUI官网给扣下来，然后做了翻译，文档是2月份过年的时候...
收起
python easyUI
千次阅读 2017-11-17 17:47:11
最近在学习easyUI，顾名思义easyUI很简单，总结一下我在学习EasyUI的时候是怎么学习的，学习的时候主要从四个方面入手: ①什么是 ②什么时候用 ③怎么用 ④遇到的问题 ⑤优缺点一、...
收起
EasyUI easyui-combobox 值改变操作
千次阅读 2019-05-09 15:39:51
最近在优化公司的项目, 项目的框架使用的是EasyUI 为了写一个多选下拉框,让我和一个前端的小伙子费劲脑汁.最终选择先搁置这个功能. 先来谈一谈EasyUI的这个框架吧, 因为公司内部的管理系统是非常老的框架. 当时的...
收起
easyui 入门
千次阅读 2017-11-30 09:59:24
easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 easyui...
收起
EasyUI简介
千次阅读 2016-12-14 20:49:14
EasyUI 简介easyui是一种基于jQuery的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。...
收起
javascript jquery html5
[EasyUI] EasyUI安装
千次阅读 2013-12-01 16:43:25
2、引入“jquery.easyui.min.js” 3、引入“themes/default/easyui.css” 1.2系统图标使用需要引入themes/icon.css 注意：css都在“themes”这个文件夹下面找 2.1 layout 布局把页面分成上下左右中五块，...
收起
layui和easyui Bootstrap的对比介绍
万次阅读 多人点赞 2018-10-30 20:34:28
1.1layui与easyui 简单点说就是：一个是邻家女孩，尚处芳龄，简而纯一个是彪悍妇女，昨日黄花，强而丑 easyui是功能强大但是有很多的组件使用功能是十分强大的，而layui是2016年才出来的前端框架，...
收起
layui
easyui radiobutton
2020-07-18 11:26:04
<form id="auditNodeForm"> <div style="border:1px solid #ccc;padding-bottom:5px;"> <div style="margin-...input id="auditRuleUserType_2" class="easyui-radiobutton" name="auditRuleUse.
收起
EasyUI主题
千次阅读 2018-05-15 14:55:09
劳动结晶，有偿出售，价格合理，QQ2358882406！支持EasyUI 1.5 及向下兼容！IE/Google Chrome/Firefox支持只要是EasyUI版本支持的浏览器，主题效果都支持！
收起
easyui模板
千次阅读 2016-07-01 15:33:16
jQuery EasyUI Demo
收起
EasyUI整套皮肤组件_EasyUI 后台模板HTML_后台管理系统模板最新46M
热门讨论 2017-06-28 22:45:57
EasyUI皮肤组件UI设计这套easyui皮肤，用了扁平化的设计风格，在easyui官方最新版jQuery EasyUI 1.4.5的基础上重新设计所有组件，与easyui默认皮肤一样，可以很方便的进行替换设置，并且也可以很方便的对本套皮肤...
收起
EasyUI 简介
千次阅读 2016-05-12 09:35:58
easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 easyui...
收起
jquery-easyui完整demo演示
千次下载 热门讨论 2012-02-03 11:57:07
jquery-easyui完整demo演示
收起
Vue EasyUI 入门
2020-04-10 21:41:39
安装步骤 1. 使用NPM进行安装。 npm install vx-easyui --save 2. 引入 EasyUI 文件. ...import 'vx-easyui/dist/themes/default/easyui.css'; import 'vx-easyui/dist/themes/icon.css'; import 'vx-easyui/dis...
收起
【EasyUI】关于EasyUI中numberbox onblur事件失效的问题
千次阅读 2020-03-25 23:31:01
easyui-numberbox 与 easyui-validatebox 参考以下： easyui-numberbox不像easyui-validatebox那样能绑定blur事件，最简单的解决方法可以将class="easyui-numberbox"换为class="easyui-validatebox"，但是输入框的...
收起
Python easyui
千次阅读 2017-11-17 17:19:52
本文说明如何在flask框架下使用前端组件EasyUI。在flask框架中链接css文件，js脚本和图片等静态文件的方式和其他web服务器存在差别。在flask框架中这些静态文件一般存放与static文件夹中，并通过url_for函数指定...
收起
easyui-datebox和easyui-datetimebox区别
2019-09-03 18:06:41
<input class="easyui-datebox"和<input class="easyui-datetimebox"区别是后者精确到时分秒，前者只精确到年月日
收起
Easyui常用按钮图标汇总
万次阅读 多人点赞 2018-01-29 21:02:14
EasyUI常用图标：图标——名字只要在icons属性上，加上图标对应的名字，easyUI就会显示对应的图标。
收起
Easyui设置easyui-textbox不可编辑
万次阅读 2017-12-14 13:41:27
在easyui里由于easyui-textbox被封装，通过一般的jquery方法无法实现禁止输入的效果通过F12可以看到，自己写的input被设置为display：none，并且在下方又添加了一个id="-easyui-textbox-input1"的input。其中input1...
收起
jquery

EasyUI

EasyUI项目

easyUI文件上传

【EasyUI】EasyUI学习笔记

一.EasyUI 简介

登录页面示例

根据不同用户显示不同页面

Easyui easyui-checkbox问题

Easyui easyui-datebox日期控件格式设置

JqueryEasyui

EasyUI使用

EasyUI easyui-textbox,easyui-validatebox的自定义校验

easyUI easyui-combobox 和 easyui-combogrid 用法

jQuery EasyUI 1.3.2 离线API简体中文版

python easyUI

EasyUI easyui-combobox 值改变操作

easyui 入门

EasyUI简介

[EasyUI] EasyUI安装

layui和easyui Bootstrap的对比介绍

easyui radiobutton

EasyUI主题

easyui模板

EasyUI整套皮肤组件_EasyUI 后台模板HTML_后台管理系统模板最新46M

EasyUI 简介

jquery-easyui完整demo演示

Vue EasyUI 入门

【EasyUI】关于EasyUI中numberbox onblur事件失效的问题

Python easyui

easyui-datebox和easyui-datetimebox区别

Easyui常用按钮图标汇总

Easyui设置easyui-textbox不可编辑

easyui

光伏并网matlab仿真模型.zip

网上行销原则.txt

【Python-随到随学】FLask第二周

人脸识别之FaceNet详解

大数据的基本概况.jpg

基于SpringBoot+MyBatis的电影购票系统

2010-2011年品牌微博营销执行方案.ppt

装备制造行业智能制造方案.pptx

Rust解决cargo build太慢

小议前馈神经网络（Feedforward Neural Network ）

OC.Gen-X.2.9.2.dmg

frida2

2021年 系统架构设计师 系列课

PPT大神之路高清教程

快速幂解斐波那契数列

Web应用程序测试的工具selenium用法详解

Java内存区域与内存溢出异常

合同证明正版一元付费

php解析url并得到url中的参数及获取url参数的四种方式

vue.resource是什么

2021年系统架构设计师系列课