什么是EasyUI，如何使用EasyUI？--easyui的十二种用法
2024-05-09 10:16:39
文章目录
- 简单说明
- EasyUI的下载
- EasyUI的测试
- EasyUI的执行需要依赖jQuery
- 1. 拖拽
- 2. 进度条
- 3. 菜单按钮
- 4. 按钮
- 5. 弹出框
- 6. 创建表格
- 7.树形结构
- 点击进入对其余五种EasyUI用法的详情介绍(面板/分类面板/选项卡/标签页/页面布局/super(融合))
简单说明
- 1.easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。
- 2.easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
- 3.使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
- 4.easyui是个完美支持HTML5网页的完整框架。
- 5.easyui节省您网页开发的时间和规模。
- 6.easyui很简单但功能强大的。
EasyUI的下载
官网地址：http://www.jeasyui.com/download/v19.php
点击下载（免费即可）：
EasyUI的测试
EasyUI的执行需要依赖jQuery
故JS引入;
<!--引入jquery的js，EasyUI的执行需要依赖于jQuery -->
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<!--easyUI的js主文件 -->
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<!--国际化的js文件 -->
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<!--引入easyUI的样式 -->
<link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
1. 拖拽
<body><div class="easyui-draggable">拖动DIV</div><div class="easyui-draggable">测试div</div></body>
2. 进度条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI-进度条</title>
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<script type="text/javascript">$(function(){$("#b").click(function(){onload(); })/*采用递归的方法实现进度条刷新 */var i = 0;function onload(){$('#p').progressbar({ value:i++});if(i<=100){/*延时加载,到了指定的时间,则执行函数,时间单位是毫秒*/setTimeout(function(){onload();}, 1)}}})</script>
</head><body><div id="p" class="easyui-progressbar" style="width:400px;"></div><input id="b" type="button" value="加载"/> </body></html>
3. 菜单按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI-3-菜单按钮</title>
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<script type="text/javascript">$(function(){//菜单是默认影藏的，使其进行展现$('#mm').menu('show', { left: 200, //左侧位置top: 100 //顶部位置});})function menuHandler(item){alert("添加点击事件做想做的事情,其中item表示点击的菜单项");alert(item.text); //输出点击项的文本内容}
</script>
</head>
<body><h1>Easy-UI的菜单项</h1><!--引入class属性easyui-menu 调用Easy_UId的Css样式进行展现 宽度定义为200px --><div id="mm" class="easyui-menu" style="width: 200px;" data-options="onClick:menuHandler"><!--定义div标签 定义第一个菜单元素新建 --><div>新建</div><!--定义第二个菜单元素 并且定义了二级菜单 --><div><!--二级菜单的名称 --><span>打开</span><!--二级菜单的具体内容 定义宽度为150px --><div style="width: 150px;"><div><b>Word</b></div><div>Excel</div><div>PowerPoint</div><div>自定义选项</div></div></div><!--定义第三个菜单 并且为其左侧添加图标 icon-save为可变的随意更换 --><div data-options="iconCls:'icon-save'")">保存</div><!--定义菜单分离器 --><div class="menu-sep"></div><!--定义第四个菜单 --><div><span>自定义</span><div style="width:150px;"><div data-options="name:'返回',iconCls:'icon-blank'">返回</div><div data-options="name:'新增',iconCls:'icon-add'">新增</div><div data-options="iconCls:'icon-edit'">编辑</div><div data-options="iconCls:'icon-clear'">清空</div><div data-options="iconCls:'icon-remove'">移动</div></div></div><!--定义第五个菜单 退出 --><div>退出</div></div>
</body>
</html>
4. 按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI-4-按钮</title>
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<script type="text/javascript">$(function(){//为按钮添加点击事件$("#btn1").bind("click",function(){alert("点击事件添加成功");});})</script>
</head>
<body><h1>Easy-UI按钮</h1><!--该页面中主要展现 不同的按钮格式 --><a id="btn1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-back'">返回</a><a id="btn2" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a><a id="btn3" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">编辑</a><a id="btn4" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'">清空</a><a id="btn5" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">移除</a><br><a id="btn6" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a><a id="btn7" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut'">剪切</a><a id="btn8" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">ok</a><a id="btn9" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-no'">no</a><a id="btn10" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a><br><a id="btn11" href="#" class="easyui-linkbutton" data-options="iconCls:'reload'">重载</a><a id="btn12" href="#" class="easyui-linkbutton" data-options="iconCls:'search'">查询</a><a id="btn13" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print'">打印</a><a id="btn14" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'">帮助</a><a id="btn15" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-undo'">取消</a><br></body>
</html>
5. 弹出框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI-5-弹出框</title>
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<script type="text/javascript">$(function(){$("#btn1").bind("click",function(){$("#win1").window({title:"弹出框",width:400,height:400,modal:true //这是一个模式窗口，只能点击弹出框，不允许点击别处})})$("#btn3").click(function(){alert("关闭");$("#win2").window("close");});/*定义退出消息框 */$("#btn4").click(function(){$.messager.confirm('退出','你确定要退出吗',function(r){ if (r){ alert("确认退出");} });})/*定义消息提示框 */$.messager.show({ title:'My Title', msg:'蛋蛋都胖成一个球了，圆圆的', timeout:5000,height:200,width:300,showType:'slide' }); })
</script>
</head>
<body><h1>Easy-弹出窗口</h1><!--主要展现弹出框 --><a id="btn1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a><div id="win1"></div><!--定义弹出窗口 --><div id="win2" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true"> 我是一个窗口<a id="btn3" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-back'">关闭</a></div><div style="float: right"><a id="btn4" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">退出系统</a></div></body>
</html>
6. 创建表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI-6-创建表格</title>
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<script type="text/javascript">/*通过js创建表格 */$(function(){$("#table3").datagrid({/*定义工具栏 */toolbar: [{ iconCls: 'icon-edit', handler: function(){alert("点击工具栏")} },'-',{ iconCls: 'icon-help', handler: function(){alert('帮助工具栏')} },'-',{iconCls: 'icon-save',handler: function(){alert('保存工具栏')}}], columns:[[{field:'itemIds',checkbox:true},{field:'itemId',title:'商品Id',width:100}, {field:'itemName',title:'商品名称',width:100}, {field:'itemDesc',title:'商品描述',width:100,align:'right'} ]],fitColumns:true, //自动适应url:"datagrid_item.json", //请求数据的地址method:"get", //提交方式striped:true, //有条纹的行nowrap:true, //提高加载性能loadMsg:"正在加载", //加载数据时打印pagination:true, //分页加载rownumbers:true, //显示行号//singleSelect:true, //只允许选中一行数据})})
</script>
</head><body><h1>Easy-表格数据1</h1><div><table class="easyui-datagrid" style="width:400px;height:250px"> <thead> <tr> <th data-options="field:'code'">Code</th> <th data-options="field:'name'">Name</th> <th data-options="field:'price'">Price</th> </tr> </thead> <tbody> <tr> <td>001</td><td>name1</td><td>2323</td> </tr> <tr> <td>002</td><td>name2</td><td>4612</td> </tr><tr> <td>003</td><td>name3</td><td>4612</td> </tr> </tbody> </table></div><hr/><h1>通过数据请求创建表格</h1><div>定义表格，并且通过url访问json数据， fitColumns:true表示自动适应，singleSelect:true 表示选中单个<table class="easyui-datagrid" style="width:500px;height:300px" data-options="url:'datagrid_data.json',method:'get',fitColumns:true,singleSelect:true,pagination:true"> <thead> <tr> <th data-options="field:'code',width:100">Code</th> <th data-options="field:'name',width:100">Name</th> <th data-options="field:'price',width:100,align:'right'">Price</th></tr> </thead> </table> </div><hr/><h1>通过js创建表格</h1><table id="table3" style="width:700px"></table></body>
</html>
datagrid_data.json
{"total":2000,"rows":[{"code":"A","name":"果汁","price":"20"},{"code":"B","name":"汉堡","price":"30"},{"code":"C","name":"鸡柳","price":"40"},{"code":"D","name":"可乐","price":"50"},{"code":"E","name":"薯条","price":"10"},{"code":"F","name":"麦旋风","price":"20"},{"code":"G","name":"套餐","price":"100"}]
}
datagrid_item.json
{"total":200,"rows":[{"itemId":"1","itemName":"手机","itemDesc":"苹果手机"},{"itemId":"2","itemName":"电脑","itemDesc":"外星人"},{"itemId":"3","itemName":"平板","itemDesc":"游戏平板"},{"itemId":"4","itemName":"诺基亚","itemDesc":"砸核桃专用"},{"itemId":"5","itemName":"摩托罗拉","itemDesc":"估计快倒闭了"},{"itemId":"6","itemName":"小米","itemDesc":"组装的都这么厉害"}]
}
7.树形结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI-7-树形结构</title>
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<script type="text/javascript">/*通过js创建树形结构 */$(function(){$("#tree").tree({url:"tree.json", //加载远程JSON数据method:"get", //请求方式 POSTanimate:true, //表示显示折叠端口动画效果checkbox:true, //表述复选框lines:true, //表示显示连接线dnd:true, //是否拖拽onClick:function(node){ //添加点击事件//控制台console.info(node);}});})
</script>
</head><body><h1>EasyUI-树形结构</h1><ul id="tree"></ul></body>
</html>
tree.json
[{"id":"1","text":"英雄联盟","iconCls":"icon-save","children":[{"id":"4","text":"沙漠死神"},{"id":"5","text":"德玛西亚"},{"id":"6","text":"诺克萨斯之手"},{"id":"7","text":"蛮族之王"},{"id":"8","text":"孙悟空"}],"state":"open"},{"id":"2","text":"王者荣耀","children":[{"id":"10","text":"阿科"},{"id":"11","text":"吕布"},{"id":"12","text":"陈咬金"},{"id":"13","text":"典韦"}],"state":"closed"},{"id":"3","text":"吃鸡游戏","iconCls":"icon-save"}
]
点击进入对其余五种EasyUI用法的详情介绍(面板/分类面板/选项卡/标签页/页面布局/super(融合))
什么是EasyUI，如何使用EasyUI？--easyui的十二种用法相关推荐
- EasyUI学习总结(五)——EasyUI组件使用
EasyUI学习总结(五)--EasyUI组件使用 一.EasyUI组件的简单介绍 easyUI提供了很多组件让我们使用,如下图所示: 使用这些组件可以帮助我们快速地进行项目开发,下面以一个用户登录程 ...
- EasyUI学习总结(一)——EasyUI入门
一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jQuery EasyUI 1.4.1 下载完成之 ...
- abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之六(三十二)
abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统--ABP总体介绍(一) abp(net core)+ ...
- abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二)
abp(net core)+easyui+efcore实现仓储管理系统--解决方案介绍(二) 参考文章: (1)abp(net core)+easyui+efcore实现仓储管理系统--解决方案介绍( ...
- Easyui combobox设置值和文本的几种方式和问题
Easyui combobox设置值和文本的几种方式和问题 1.在Easyui 帮助文档中,我们可以看到combobox是继承自combo,combo中有两上方法:setText.setValue. ...
- php能调用easyui窗口,关于jQuery EasyUI window窗口使用实例详解
本文主要给大家介绍了jQuery EasyUI window窗口使用功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 需求:点击[增加]按钮,弹出窗口,并对所有 ...
- php+easyui+上传文件,easyui 上传文件代码
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.IO ...
- easyui 表头合并_JQuery EasyUI DataGrid动态合并（标题）单元） 一
JS: /** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList 要合并的列,用逗号分隔(例如:&q ...
- java 动态加载控件_JS动态添加节点后渲染为EasyUI控件，EasyUI动态渲染解析解决方案...
这是个小菜在实际工作中遇到的问题,相信很多EasyUI新手很可能也遇到这样的问题,因此小菜觉得有必要拿出来分享一下. 这个问题要从EasyUI的datebox组件说起,小菜用这个组件的时候,发现用$( ...
- java easyui 分页_Spring mvc+easyui做列表展示及分页
Spring mvc有一个注解@ResponseBody可以自己将返回数据解析成json,不用在response.getWriter(),设置response的编码之类的. 1.首先在spring-m ...
最新文章
- HTML基础复习（三）表格
- “汇新杯”新兴科技+互联网创新大赛青年创客专项赛即将截止报名
- 【Linux】一步一步学Linux——passwd命令(85)
- linux命令窗口颜色,如何修改ssh命令行下登录时的颜色
- linux ll命令无效
- c语言设计第4章答案,《C语言程序设计》第4章习题答案.doc
- PE下如何安装 安装版系统
- NB-IoT终端进网检测介绍
- NFT去中心化自治组织YGG完成130万美元融资，Delphi Digital领投
- LINUX用户执行过的命令，保存在.bash_history
- 使用 GNU CC 的预编译头文件加快编译速度
- centos6 和 centos7 防火墙基本操作
- 史上最全Java项目实战课程(含项目实战+源码)
- unity如何实现图片透视_如何用java实现图片与base64转换
- 为了机器学习把MacBook Pro换成Asus TUF Gaming 全家桶
- USB写保护的一些工具记录
- 读书笔记-人月神话10
- 操作系统实验一到实验九合集(哈工大李治军)
- 来看看最全的“css布局”喽
- 一个PDF免费转WORD的网站，亲测，好用！