-
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 封装大量JS3.使用前端框架
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 © 版权 </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({代码}),这个是初始化了吗? 就出现了两个全选 !... -
Easyui easyui-datebox日期控件格式设置
2018-09-27 15:15:08easyui-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:33jQuery 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:09EasyUI 简介 easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户... -
EasyUI easyui-textbox,easyui-validatebox的自定义校验
2017-03-30 17:25:09可以用于easyui-textbox和easyui-validatebox的控件自定义校验设置 -
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:24easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。 easyui... -
EasyUI简介
2016-12-14 20:49:14EasyUI 简介easyui是一种基于jQuery的用户界面插件集合。easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。... -
[EasyUI] EasyUI安装
2013-12-01 16:43:252、引入“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:281.1layui与easyui 简单点说就是: 一个是邻家女孩,尚处芳龄,简而纯 一个是彪悍妇女,昨日黄花,强而丑 easyui是功能强大但是有很多的组件使用功能是十分强大的,而layui是2016年才出来的前端框架,... -
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:16jQuery EasyUI Demo -
EasyUI整套皮肤组件_EasyUI 后台模板HTML_后台管理系统模板最新46M
2017-06-28 22:45:57EasyUI皮肤组件UI设计 这套easyui皮肤,用了扁平化的设计风格,在easyui官方最新版jQuery EasyUI 1.4.5的基础上重新设计所有组件,与easyui默认皮肤一样,可以很方便的进行替换设置,并且也可以很方便的对本套皮肤... -
EasyUI 简介
2016-05-12 09:35:58easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。 easyui... -
jquery-easyui完整demo演示
2012-02-03 11:57:07jquery-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:01easyui-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:14EasyUI常用图标:图标——名字 只要在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...
-
光伏并网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是什么