easyui的简单控件使用

淡淡的烟草味﹌ 2022-06-10 02:47 416阅读 0赞

使用前，需要先导入必要的样式库和函数库

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>

一、layout布局的使用

easyui通过加载class的名字来进行样式的修订，layout可以将一个页面布局成五个部分--东南西北中，其中“中部”为必须，其他部分任意。

<body class="easyui-layout">
    	
    	<div title="xxx管理系统" style="height:100px" data-options="region:'north'">北部区域</div>
    	<div title="系统菜单" style="width:200px" data-options="region:'west'">西部区域</div>
    	<div data-options="region:'center'">中心区域</div>
    	<div style="width:100px" data-options="region:'east'">东部区域</div>
    	<div style="height: 50px" data-options="region:'south'">南部区域</div>
    </body>

二、accordion折叠面板的使用

折叠面板一般放在左侧分割菜单。

<div title="系统菜单" style="width:200px" data-options="region:'west'">
    		
    		 <div class="easyui-accordion" data-options="fit:true">
    		 	<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
    		 	<div data-options="iconCls:'icon-edit'" title="面板二">2222</div>
    		 	<div data-options="iconCls:'icon-save'" title="面板三">3333</div>
    		 </div>
    	</div>

三、tabs选项卡面板的使用

选项卡面板一般放在中部区域，进行点击某个菜单后的内容显示，点击一次，弹出一个选项卡面板。

<div data-options="region:'center'">
    		
    		 <div id="mytabs" class="easyui-tabs" data-options="fit:true">
    		 	<div data-options="closable:true" title="面板一">1111</div>
    		 	<div data-options="iconCls:'icon-edit'" title="面板二">2222</div>
    		 	<div data-options="iconCls:'icon-save'" title="面板三">3333</div>
    		 </div>
    	</div>

这时需要控制tabs选项卡，点击菜单时，如果该菜单的选项卡已经点开，则选中状态，如果没有点开，则点开一个新的tabs选项卡。

<div class="easyui-accordion" data-options="fit:true">
    		 	<div data-options="iconCls:'icon-cut'" title="面板一">
    		 		<a id="but1" class="easyui-linkbutton">打开一个新的选项卡</a>
    		 	</div>
    		 	<script type="text/javascript">
    		 		$(function(){
    		 			$("#but1").click(function(){
    		 				
    		 				var e = $("#mytabs").tabs("exists",'系统管理');
    		 				if(e){
    		 					$("#mytabs").tabs("select",'系统管理');
    		 				}else{
    			 				//调用tabs对象的add方法动态添加一个选项卡
    			 				$("#mytabs").tabs("add",{
    			 					title:"系统管理",
    			 					iconCls:"icon-edit",
    			 					closable:true,
    			 					content:'<iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>'
    			 				})
    		 				}                           
    		 				                            
    		 			});                             
    		 		});                                 
    		 	</script>                                	                                        
    		 </div>
                   </div>

四、messager的使用

使用之前为了让弹窗出现中文效果，需要先将easyui中文包导入

<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"></script>

1、alert方法提示框，第一个参数是标题，第二个为内容，第三个为类型。

//alert方法的提示框	
    	$.messager.alert("title","内容","info");

2、confirm方法确认框

//confirm 方法的确认框
    	$.messager.confirm("提示信息","您确定要删除吗？",function(r){
    		alert(r); 
    	})

3、show右下角信息展示

$.messager.show({  	
    		  title:'欢迎信息',  	
    		  msg:'欢迎您，XXX',  	
    		  timeout:5000,  	
    		  showType:'slide'  
    		});

五、menubutton的使用

先将元素的class写为class="easyui-menubutton" ，然后data-options中有属性menu：\#id，这个id就是该按钮的下拉按钮

<body >
    	<a class="easyui-menubutton" data-options="iconCls:'icon-help',menu:'#mm'">控制面板</a>
    	<div id="mm">
    		<div data-options="iconCls:'icon-edit'">修改密码</div>
    		<div>注销用户</div>
    		
    		<div class="menu-sep"></div>
    		<div>退出登录</div>
    	</div>
    </body>

六、datagird的使用

1、创建一个带有id值的表格

<table id="mytab"></table>

2、datagrid中的属性也是json格式。使用JS动态载入表格数据，发送ajax请求，field的值就是返回json对应数据位置的名字。checkbox：true属性是将该列的数据内容显示为多选框，一般用于id列。

<script type="text/javascript">
    		//页面加载完成后，创建数据表格datagrid
    		$(function(){
    			$("#mytab").datagrid({
    				columns:[[
    					{title:"编号",field:"id",checkbox:true},
    					{title:"姓名",field:"name"},
    					{title:"年龄",field:"age"},
    					{title:"地址",field:"address"}
    				]],
    				//指定数据表格发送ajax请求
    				url:'${pageContext.request.contextPath }/json/datagrid_data.json',
    				rownumbers:true,
    				/* singleSelect:true, */
    				//定义工具栏
    				toolbar:[
    					{text:"保存",iconCls:"icon-add",handler:function(){
    						alert("123");
    					}},
    					{text:"查询",iconCls:"icon-search"},
    					{text:"删除",iconCls:"icon-remove"},
    					{text:"修改",iconCls:"icon-edit"}
    				],
    				//显示分页
    				pagination:true
    			});
    		});
    		
    	</script>

3、将datagrid表格中的数据动态修改，不好解释，直接上代码模板

<script type="text/javascript">
    		//页面加载完成后，创建数据表格datagrid
    		$(function(){
    			var myIndex = -1; //创建一个全局索引，用来作为进行编辑行的标志
    			$("#mytab").datagrid({
    				columns:[[
    					{width:120,title:"编号",field:"id",checkbox:true},
    					{width:120,title:"姓名",field:"name",editor:{
    						type:"validatebox",
    						option:{}
    					}},
    					{width:120,title:"年龄",field:"age",editor:{
    						type:"numberbox",
    						option:{}
    					}},
    					{width:120,title:"地址",field:"address",editor:{
    						type:"validatebox",
    						option:{}
    					}}
    				]],
    				//指定数据表格发送ajax请求
    				url:'${pageContext.request.contextPath }/json/datagrid_data.json',
    				rownumbers:true,
    				/* singleSelect:true, */
    				//定义工具栏
    				toolbar:[
    					{text:"保存",iconCls:"icon-add",handler:function(){
    						$("#mytab").datagrid("endEdit",myIndex);
    					}},
    					{text:"新增",iconCls:"icon-search",handler:function(){
    						$("#mytab").datagrid("insertRow",{
    							index:0,//在第一行插入数据
    							row:{}, //插入一行空的数据
    						});
    						$("#mytab").datagrid("beginEdit",0); //插入后就可以编辑
    						myIndex = 0;
    					}},
    					{text:"删除",iconCls:"icon-remove",handler:function(){
    						var rows = $("#mytab").datagrid("getSelections");
    						if (rows.length == 1) {
    							row = rows[0];
    							//获取当前行的下标赋给myIndex
    							myIndex = $("#mytab").datagrid("getRowIndex",row);
    						}
    						$("#mytab").datagrid("deleteRow",myIndex);
    						
    					}},
    					{text:"修改",iconCls:"icon-edit",handler:function(){
    						var rows = $("#mytab").datagrid("getSelections");
    						if (rows.length == 1) {
    							row = rows[0];
    							myIndex = $("#mytab").datagrid("getRowIndex",row);
    						}
    						$("#mytab").datagrid("beginEdit",myIndex);
    					}}
    				],
    				//显示分页
    				pagination:true,
    				//监听编辑后的操作
    				onAfterEdit:function(index,data,change){
    					
    				}
    			});
    		});
    		
    	</script>

用到了很多datagrid的方法，方法具体的使用方法可查看文档，这里写不下去了。

这里创建一个全局变量myIndex的作用是防止每次的增删查改都在第一行数据。

七、combobox的使用

这个控件类似于select标签，valueField:'id'是实际值，而textField:'name'是显示值，editable:false是不能自己手动输入数据。

<body>
    	<input class="easyui-combobox" 
    			data-options="valueField:'id',
    			textField:'name',
    			url:'${pageContext.request.contextPath }/json/combobox.json',
    			editable:false">
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，416人围观）

还没有评论，来说两句吧...

相关阅读

相关 05-EasyUI_登陆的实现2-Form控件的使用

简单登陆使用控件Form提交表单源码下载:[EasyUI\_03.zip][EasyUI_03.zip] 步骤:

淡淡的烟草味﹌/ 2022年09月18日 01:51/ 0 赞/ 144 阅读

相关 EasyUI datagrid控件的基本使用

首先运行一个它的datagrid示例；出现下图错误； ![f5fb5537564d4578b692a61a11fac6d2.PNG][] 这是因为它的示例把js

深碍√TFBOYSˉ_/ 2022年09月14日 11:10/ 0 赞/ 219 阅读

相关 Tab Control控件简单使用

本文讲述在普通对话框上添加标签的简单示例第一步拖一个Tab Control到对话框上并添加变量m\_tabCtrl; ![a.jpg][] 第二步添加两个对话框资源ID

拼搏现实的明天。/ 2022年08月20日 06:14/ 0 赞/ 274 阅读

相关 EasyUI的简单使用

WebRoot┐ ├js┐ ├easyUI┐ ├themes┐

矫情吗；*/ 2022年08月07日 13:46/ 0 赞/ 278 阅读

相关 easyui的简单控件使用

使用前，需要先导入必要的样式库和函数库 <link rel="stylesheet" type="text/css" href="${pageContext.requ

淡淡的烟草味﹌/ 2022年06月10日 02:47/ 0 赞/ 417 阅读

相关 EasyUI界面控件的使用

转自：http://www.cnblogs.com/wuhuacong/p/3317223.html 在前面介绍了两篇关于我的基于MVC4+EasyUI

以你之姓@/ 2022年06月05日 23:10/ 0 赞/ 635 阅读

相关 easyUI的datagrid控件日期列格式化

转自：https://blog.csdn.net/idoiknow/article/details/8136093 EasyUI是一套比较轻巧易用的Jquery控件，在使用过

野性酷女/ 2022年05月26日 05:36/ 0 赞/ 311 阅读

相关《easyUI高级控件》

1，js增删改查代码 (内含代码注释) $(function() { var Url=$("Murl").val(); //请求路径

客官°小女子只卖身不卖艺/ 2022年05月09日 04:46/ 0 赞/ 294 阅读

相关 EasyUI中控件汉化问题

\--BY ZYZ 我在使用EasyUI的过程中，遇到了控件无汉化的情况，如下图。 ![Center][] ![Center 1][] 这么多洋文看着觉得挺烦的。时间居

Bertha 。/ 2022年03月31日 10:00/ 0 赞/ 253 阅读

相关 easyui——datebox控件限制输入的日期

可以通过calendar控件的validator方法设置。实例： <head> <meta charset="UTF-8"> <t

野性酷女/ 2021年06月24日 14:34/ 0 赞/ 647 阅读