EasyUI的使用

最新推荐文章于 2022-05-06 10:43:34 发布
最新推荐文章于 2022-05-06 10:43:34 发布
阅读量229 收藏
点赞数
分类专栏： javascript EasyUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41361162/article/details/103113695
版权

1.需要的js文件和引入js文件的写法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导入easyui相关文件</title>
<!-- 导入easyui的样式 -->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<!-- 导入icon图标 -->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> 
<!-- 导入jquery的脚本 -->  
<script type="text/javascript" src="easyui/jquery.min.js"></script>   
<!-- 导入easyui组件集合脚本 -->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!-- 设置成中文简体 -->
<script type="text/javascript" src="easyui/local/easyui-lang-zh_CN.js"></script> 
<script type="text/javascript">
	$(function(){
		// 创建:语法 元素选择器.组件名({对象属性})，在外面设置好窗体属性，供下面的调用
		$("#win").window({
			width:"400px",
			height:"200px",
		})
	})
</script>
</head>
<body>

<!-- 方式一  class="easyui-window" 通过class数据创建 ，直接在标签里面写创建的属性
	耦合性比较高
-->
<!-- <div width="400px" height="200px" class="easyui-window">第一个easyui 窗口</div> -->

<!-- 方法二:  Js代码创建  引用上面的win方法-->
<div id="win"> Js 创建的窗口 </div>

</body>
</html>

2. 属性设置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性的操作</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">  
<script type="text/javascript" src="easyui/jquery.min.js"></script>   
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/local/easyui-lang-zh_CN.js"></script> 

<script type="text/javascript">
	$(function(){
		// 创建:语法 元素选择器.组件名({对象属性})
		$("#win").window({
			width:"400px",
			height:"200px",
			title:"123",
			collapsible: true,
			resizable:false
		})
	})
</script>

</head>
<body>

<!--class="easyui-window" 通过class数据创建 
-->
 <div  class="easyui-window"
 	data-options =" fit:true, 
 					title:'456',
 					collapsible: false,
 					resizable:false"
 	>窗口</div>

<!-- Js代码创建  调用上面的方法-->
<!-- <div id="win"> Js 创建的窗口 </div> -->

</body>
</html>

 

3.  事物操作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事物的操作</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> 
<script type="text/javascript" src="easyui/jquery.min.js"></script>   
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/local/easyui-lang-zh_CN.js"></script> 
<script type="text/javascript">
	$(function(){
		$("#win").window({
			width:"400px",
			height:"200px",
			title:"123",
			collapsible: false,
			resizable:false,
			/* 点击和关闭都会调用相应的方法 */
			onClose:function(){
				alert(1);
			},
			onClick : function(){
			 	alert(2);
			}
		})
	})
</script>
</head>
<body>

<!-- 方式一  class="easyui-window" 
-->
<!--  <div  class="easyui-window"
 	data-options =" fit:true, 
 					title:'456',
 					collapsible: false,
 					resizable:false"
 	>第一个easyui 窗口</div> -->

<!-- 方法二:  Js代码创建  -->
<div id="win"> 窗口 </div>

</body>
</html>

4. 方法的使用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>方法创建</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> 
<script type="text/javascript" src="easyui/jquery.min.js"></script>   
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/local/easyui-lang-zh_CN.js"></script> 
<script type="text/javascript">
	$(function(){
		$("#win").window({
			width:"400px",
			height:"200px",
			title:"123",
		}),
		
		$("#btn").click(function(){
			// 点击按钮,清空window 中的内容
			// 窗口的组件是panel
			$("#win").panel("clear");
		})
	})
</script>
</head>
<body>

<!--  <div  class="easyui-window"
 	data-options =" fit:true, 
 					title:'456'
 	>第一个easyui 窗口</div> -->

<!-- 方法二:  Js代码创建  -->
<div id="win"> Js 创建的窗口 </div>
<button id="btn">清空</button>
</body>
</html>

 

5.设置了按键的图标属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置属性</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> 
<script type="text/javascript" src="easyui/jquery.min.js"></script>   
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> 
<script type="text/javascript">
	$(function(){
		// 创建按键的图标属性 ，  按键的组件是linkbutton
		$("#btn").linkbutton({
			iconCls:'icon-search',
		})
		
	})
</script>
</head>
<body>
<!-- 依然使用两种方式 -->
<button id="btn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">按钮1</button>

<button id="btn2" >按键</button>
</body>
</html>

 

6.判断标签是否存在样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> 
<script type="text/javascript" src="easyui/jquery.min.js"></script>   
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> 
<script type="text/javascript">
	$(function(){

		$("a").click(function(){
			// 拥有这个样式
			var f =  $(this).hasClass("l-btn-disabled");
			if(!f){
				// 判断是否有这个样式
				console.debug(this);
			} 
		})
		
	})
	
	$(function(){
		
		$("a").linkbutton({
			// 扁平化风格
			plain:true
		})
	})
	
</script>
</head>
<body>
    <div style="padding:5px 0;">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">Cut</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-kxy' ">Text Button</a>
    </div>

</body>
</html>

 

7.panel属性设置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> 
<script type="text/javascript" src="easyui/jquery.min.js"></script>   
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> 
<script type="text/javascript">
	$(function(){
		$("#p").panel({
			width:500,
			height:200,
			title:"说的是那",
			iconCls:"icon-kxy",
			closable:true,
			collapsible:true, 
			minimizable:true, 
			maximizable:true,
			/* fit:true, 自适应 */
			content: '<iframe frameborder=0 width="90%" height="90%" src="08_linkbutton使用.html"> </iframe>',
/* 			closed:true, */
			//'href' : "08_linkbutton使用.html" //  (只加载body里面内容)
			left: '500px',
			cls:"move"
		});
		
		$("#btn").click(function(){
			$("#p").panel("open");
		})
		
		// 方式一 
		// $(".panel").addClass("move");
		
		// 方式二: easyui直接的属性
/* 		cls string 添加一个CSS类ID到面板。
		headerCls string 添加一个CSS类ID到面板头部。 
		bodyCls string 添加一个CSS类ID到面板正文部分。 
 */
		
	})
	
	
</script>
<style type="text/css">
.move{
 	position: absolute
}

</style>
</head>
<body>

<!-- 
	iconCls:'icon-save' 图标
	closable:true 可关闭
	collapsible:true 可折叠
	minimizable:true, 最小
	maximizable:true  最大
	<P> 内容
 -->
<!-- 	<div id="p" class="easyui-panel" title="My Panel"     
	        style="width:500px;height:150px;padding:10px;background:#fafafa;"   
	        data-options="iconCls:'icon-save',closable:true,    
	                collapsible:true,minimizable:true,maximizable:true">   
	    <p>AAAAAA</p>   
	    <p>panel content.</p>   
</div>   -->
<div id="p"></div>

<button id="btn">显示面板</button>
</body>
</html>

8.属性 修改 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">  
<script type="text/javascript" src="easyui/jquery.min.js"></script>   
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> 
<script type="text/javascript">
	$(function(){
		// 点击按钮, 修改panel 的标题
		$("#btn").click(function(){
			// $("#p").prop("title","123");
			// 使用 方法,实现修改
			$("#p").panel("setTitle","456");
		})
	})
	
	
</script>

</head>
<body>

<!-- 
	iconCls:'icon-save' 图标
	closable:true 可关闭
	collapsible:true 可折叠
	minimizable:true, 最小
	maximizable:true  最大
	<P> 内容
 -->
<div id="p" class="easyui-panel" title="789"     
	        style="width:500px;height:150px;padding:10px;background:#fafafa;"   
	        data-options="iconCls:'icon-save',closable:true,    
	                collapsible:true,minimizable:true,maximizable:true">   
	    <p>AAAAAA</p>   
	    <p>panel content.</p>   
</div>  


<button id="btn">修改标题</button>
</body>
</html>

9. tree 节点

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> 
<script type="text/javascript" src="easyui/jquery.min.js"></script>   
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> 
<script type="text/javascript">
	$(function(){
		
		$('#tt').tree({    
		    url:'tree.json',
		    onClick:function(node){
		    	console.debug(node.id,node.text);
		    }
		    
		});  
		/* json 如果是最后一个节点,而且没有子节点,就不要设置为关闭状态 
		 "id": 1,     // 编号 
	    "text": "节点名",    
	    "state": "打开关闭的状态",  closed opened   
	    "children": [{     // 子节点
	        "id": 11,    
	        "text": "Node 11"   
	    },{    
	        "id": 12,    
	        "text": "Node 12"   
	    }]    
		
		*/
	})
	
	
</script>

</head>
<body>
	<!-- tree 一般通过 ul ol 实现-->
	<ul id="tt"></ul>  
	
</body>
</html>



-----------------------------------------------------------------------------
tree的json代码

[{    
    "id": 1,    
    "text": "Java SE",    
    "state": "opened",    
    "children": [{    
        "id": 11,    
        "text": "面向对象",
        "children": [{    
        "id": 111,    
        "text": "封装"   
	    },{    
        "id": 112,    
        "text": "继承"   
	    }]
    },{    
        "id": 12,    
        "text": "数据结构"   
    },{    
        "id": 13,    
        "text": "IO"   
    },{    
        "id": 14,    
        "text": "集合 List set Map"   
    }]    
},{    
    "id": 2,    
    "text": "Java Web"
}]

 

乔木晨子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
EasyUI的基本使用&布局
weixin_62270300的博客
05-06 3120
目录 一、什么是easyui？ 二、easyui能带给我们什么好处？ 三、easyui如何使用？ 1️⃣.将从官网上下载的EasyUI的资源压缩包解压 然后复制到项目中 2️⃣.引入必要的js和css样式文件 3️⃣.easyui文档网站 布局搭建和菜单搭建 index.jsp tree-data.json 一、什么是easyui？ easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。 easyui为创建现代化，互动，JavaScript...
easyui图标大全
02-02
很多个图标哦，只需要修改easyui的icons样式
collapsible: true GridPanel的滚动条不出现了!
yinyun594230的博客
09-22 182
我在一个页面中定义了一个viewport ,一个Panel,二个gridPanel, Panel在viewport中,gridPanel1和gridPanel2在Panel中 viewPort，layout:'border', Panel，layout:'anchor', 如下([size=medium]以下代码可以直接运行查看效果[/size]): [code="java"] ...
easyUI详解教程
woaini886353的博客
05-06 3412
教程 概述 这个教程的目的是说明如何使用easyui框架容易的创建网页。首先，你需要包含一些js和css文件： <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <script type="text/javascript" src="../jquery-1.4.2.min.js"></script> <script type="text/javascrip
EXT中panel表头折叠方向
weixin_30608131的博客
12-14 296
panel中表头折叠属性为：collapsible:true,视为有折叠按钮，false为没有。panel默认为向上， 而用来改变折叠方向的是：collapseDirection:'left',设置为向左折叠。 这里需要要注意是宽度，若是百分比，设置不好，折叠后将不会再还原成原来宽度，固定的宽度是可以的。 转载于:https://www.cnblogs.com/Cuimc/p/10119860...
EasyUi使用
04-15
在提供的压缩包文件 "08 EasyUI" 中，可能包含了更多关于 EasyUI 使用的示例、教程或资源，可以帮助开发者深入理解和实践 EasyUI 的各种功能。通过学习这些资源，开发者可以更熟练地运用 EasyUI 进行前端开发，提高...
Jqueryeasyui使用说明
07-22
资源名称：Jquery easyui 使用说明内容简介：Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的...
EasyUI使用手册
07-17
API文档是学习和使用EasyUI的重要参考资料，其中包含了所有组件的详细说明、示例代码和方法调用。通过阅读这份文档，开发者可以了解到每个组件的功能、配置项、事件以及如何与其他组件配合使用。 例如，`dialog`...
easyUi的使用
06-21
easyUi的使用easyUi的使用easyUi的使用easyUi的使用easyUi的使用easyUi的使用
easyui使用技巧
02-14
easyui常用技术，linkbutton、menubutton、datagrid、treegrid、combobox、updateRow、tree的汉化、构建tree...等的介绍详细代码。
easyui-lang-zh_CN.js，easyui汉化包
08-09
easyui插件的支持日期汉化，分页汉化，form表单提示汉化。
easyUI 属性总结
狼魂之力
07-30 1787
1、div easyui-window 生成一个window窗口样式。 属性如下： 1)modal:是否生成模态窗口。true[是] false[否] 2)shadow:是否显示窗口阴影。true[显示] false[不显示] 2、div easyui-panel 生成一个面板。 属性如下: 1)title:该标题文本显示在面板头部。 2)iconCls:在面板上通过一个CSS类显示16x16图标。 3)width:设置面板宽度。默认auto。 4)height:设置面板高
EasyUI iconCls 所有属性值
weixin_30561425的博客
08-24 788
icon-add icon-print icon-mini-add icon-cvs icon-play icon-refresh icon-edit icon-help icon-mini-edit icon-pencil icon-remove icon-undo icon-mini-refresh i...
Easy-ui常见用法总结
键盘哥的博客
10-22 2623
消息提示框： 1. .messager.alert(‘提示信息′,‘新增项目成功′,‘info′);2..messager.alert(‘提示信息’, ‘新增项目成功’, ‘info’); 2. .messager.alert(‘提示信息’, ‘新增项目失败’, ‘warning’); 通过Id设置不可编辑var SJSHJG = document.getElementById("
EasyUI入门:如何引入及简单使用
热门推荐
我们的征途是星辰大海
11-14 1万+
也许，只有当做比较大的项目的时候，才会发现封装好的东西会为程序猿们带来多少方便。合作开发的时候更应该强调复用，才能更加发挥团队的优势。         今天使用了一些EasyUI,发现很wonderful!         比如，以前，我们为了写一个还看得过去的按钮，得先在HTML里面加入按钮，然后在CSS里面写入样式，又用JS控制它的事件，整个按钮写下来，我们已经快被烦死了，抬起头看
【叨、校长】一套Metro风格的Easyui框架主题、皮肤
叨、校长灬
11-23 1181
本皮肤基于Easyui官方皮肤CSS文件整改，通俗易懂、老少皆宜！--叨、校长 个人还是蛮喜欢的！特此向大家分享！转载请注明出处！叨、校长 图片：   源码在附近内...
easyui酷黑风格主题模板组件html
12-24 1万+
模板简介：基于easyui目前最新版本1.6.11设计制作，后期会随easyui版本进行响应更新。模板仅修改easyui默认的css样式文件，可以很方便的与默认主题进行替换或切换。对于已有项目，可以快速的替换主题，不影响系统功能。对easyui所有组件都进行了美化设计，主题更加统一。 本作品仅供学习参考，请勿用于任何商业用途，版权所有：uimaker.com,谢绝任何网站转载，请互相理解！ 作...
数据滚动展现php,Easyui 使用虚拟滚动视图显示海量数据_EasyUI 教程
最新发布
05-25
在使用 Easyui 进行数据滚动展现时，可以使用其提供的 datagrid 组件，并设置其属性 virtual scrolling 为 true。这样就可以启用虚拟滚动视图功能。 具体操作如下： 1. 引入 Easyui 的 CSS 和 JS 文件。 2. 在 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值