easyui的其他控件的练习

最新推荐文章于 2025-07-06 16:08:05 发布

只有自己努力才是真

最新推荐文章于 2025-07-06 16:08:05 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： easyui 文章标签： easyui

本文链接：https://blog.youkuaiyun.com/css1223mjf/article/details/52891096

easyui 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍并演示了EasyUI框架中的多种控件使用方法，包括表单验证、下拉列表、日期选择器等，通过具体示例展示了如何在网页中有效应用这些控件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上次练习了一些基本的控件，现在来学习一下表单还有其他树等的控件：

Form表单的控件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>16_Form.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">   
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">   
	<script type="text/javascript" src="../js/jquery.min.js"></script>   
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
  </head>
  
  <body>
	
	<form id="ff" method="post">   
	    <div>   
	        <label for="name">姓名:</label>   
	        <input class="easyui-validatebox" type="text" name="vname" data-options="required:true" />   
	    </div>   
	    <div>   
	        <label for="email">邮箱:</label>   
	        <input class="easyui-validatebox" type="text" name="vemail" data-options="required:true,validType:'email'" />   
	    </div>   
	    <div>   
			<a id="ss" href="#" data-options="iconCls:'icon-no'" class="easyui-linkbutton" style="margin-left:70px">提交</a>
	    </div>    
	</form> 
	
	
	<script type="text/javascript">
		//web页面加载时触发
		$(function(){
			//定位按钮，添加点击事件
			$("#ss").click(function(){
				$("#ff").form({  //动态的创建表单
					url:"/mjf.haihan.easyui01/FormServlet",
					onSubmit:function(param){  //param表示向服务器提交参数的封装对象
						param.vname = $("input[name='vname']").text().trim(),
						param.vemail = $("input[name='vemail']").text().trim()
					},
					success:function(backData){
						//var jsonObj = $("#ss").linkbutton("options");  //得到按钮的图片
						//jsonObj.iconCls = "icon-ok"; // 修改json对象的属性
						//$("#ss").linkbutton(jsonObj);   //重新在设置到linkbutton中
						$("#ss").linkbutton({
							iconCls :"icon-ok"
						})
						
						alert(backData);
					}
				});
				//提交表单，别忘了
				$("#ff").submit();
			});
		});
	</script>
	
	
  </body>
  
</html>

Validatebox验证框的控件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>11_ValidateBox.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">   
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">   
	<script type="text/javascript" src="../js/jquery.min.js"></script>   
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
  </head>
  
  <body>
	姓名:<input id="name" type="text" value="毛竣锋"/><br/>
	邮箱:<input id="email" type="text"/><br/>
	
	<script type="text/javascript">
		$(function(){
			//自定义规则Chinese
				//自定义规则
			//chinese:验证规则名
			//function(value){}具体的验证逻辑
			//value表示用户输入的内容
			//message出错以后的提示信息
			$.extend($.fn.validatebox.defaults.rules,{
					chinese:{
						validator:function(value){
								if(/^[\u3220-\uFA29]+$/.test(value)){   //使用正则表达式来验证
										return true;
								}
						},
						message:"内容需要为中文"
					}
			});
		
			//动态设置验证框
			$("#name").validatebox({
				required:true,
				missingMessage:"姓名为必填",
				validType:['length[1,4]','chinese']
			});
			
			//动态设置邮箱 
			$("#email").validatebox({
				required:true,
				missingMessage:"邮箱为必填",
				validType:['email','length[1,40]']
			});
		});
	</script>
  </body>
  
</html>

ComboBox下拉列表框的控件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>12B_ComboBox.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">   
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">   
	<script type="text/javascript" src="../js/jquery.min.js"></script>   
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
  </head>
  
  <body>
	城市：<input id="cc" type="text" value="选择城市"/>
	<script type="text/javascript">
		$(function(){
			//参数一：访问远程的路径，返回值需要一个JSON字符串
			//url:"/CityServlet"，将来访问是一个请求，响应结果就是JSON字符串
			//参数二：valueField看不见的值,是传递给服务器的值
			//参数三：textField看得见的值
			$("#cc").combobox({
				url:"citys.json",
				valueField:"id",
				textField:"name"
			});
			
		});
	</script>	
		
  </body>
  
</html>

DateBox日期输入框的控件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>13_DateBox.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">   
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">   
	<script type="text/javascript" src="../js/jquery.min.js"></script>   
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
  </head>
  
  <body>
		
		入职时间：<input id="dd"/>
		<a id="ss" href="#" class="easyui-linkbutton">提交</a>
		
		<script type="text/javascript">
			//自定义规则
			$(function(){
				var buttons = $.extend([], $.fn.datebox.defaults.buttons);
					buttons.splice(1, 0, {
						text: "嘿嘿",
						handler: function(target){
								alert("hehe");
						}
					});
				
				//动态设置DateBox
				$("#dd").datebox({
					required:true,
					panelWidth:300,
					panelHeight:250,
					okText:"没问题",
					disabled:false,
					buttons:buttons,
					formatter:function(date){
						var y = date.getFullYear();
						var m = date.getMonth()+1;
						var d = date.getDate();
						return y+'-'+m+'-'+d;
					}
				});
					   	
				//为提交按钮动态添加事件
				$("#ss").click(function(){
					//var tip = $(this).text().trim();
					//alert(tip);
					var strDate = $("#dd").datebox("getValue");
					alert(strDate);
				});	   	
					   	
			});
		</script>
		
		<!-- 
			思想：
			1_先找EasyUI自己的属性，事件，方法，如果没有的话
			2_再找JQuery的，如果没有的话
			3_后找JS
		 -->
		
  </body>
  
</html>

NumberSpinner数字微调的控件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>14_NumberSpinner.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">   
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">   
	<script type="text/javascript" src="../js/jquery.min.js"></script>   
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
  </head>
  
  <body>
	
	商品数量：<input id="ss" style="width:80px;" ><p>
	<span id="pp" style="color:red">1</span>
	<script type="text/javascript">
		$(function(){
		//动态设置spinner
			$("#ss").numberspinner({
				required:true,
				missingMessage:"商品量须填写",
				min:1,
				value:1,
				max:50,
				increment:5,
				editabled:false,
				readonly:false
			});
			
			//为spinner设置事件监听器
			$("#ss").numberspinner({
				onSpinUp:function(){  //上调
					//获取当前numberspinner的值
					var curr = $(this).numberspinner("getValue");
					//设置到span标签中去
					$("#pp").text(curr);
				},
				onSpinDown:function(){  //下调
					//获取当前numberspinner的值
					var curr = $(this).numberspinner("getValue");
					//设置到span标签中去
					$("#pp").text(curr);
				}
			});
		});
	</script>  
	
  </body>
  
</html>

Slider滑动条的控件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>15_Slider.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">   
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">   
	<script type="text/javascript" src="../js/jquery.min.js"></script>   
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
  </head>
  
  <body>
	
	拖动滑块条，改变盒子的宽：<br/><br/><br/>
	<div id="box" style="border-style:dotted;width:0px;height:100px">
	</div>
	
	
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<div id="ss" style="height:200px;width:1000px"></div>  
	<script type="text/javascript">
		$(function(){
			$("#ss").slider({
				mode:"h",
				showTip:true,
				value:0,
				min:0,
				max:100,
				rule:[0,10,20,30,40,50,60,70,80,90,100]
			});
			
			$("#ss").slider({
				//value表示新值
				onChange:function(value){
					//定位盒子
					$("#box").css("width",10*value+"px");
				}
			});
			
			$("#ss").slider({
				//滑动值被改变时
				onComplete:function(value){
					alert("现在移动到：" + value);
				}
			});
		});
	</script>
	
	
  </body>
  
</html>

Window窗口的控件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>17_Window.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">   
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">   
	<script type="text/javascript" src="../js/jquery.min.js"></script>   
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
  </head>
  
  <body>
	
	<input type="button" value="打开窗口"/>
	<input type="button" value="关闭窗口"/>
	<hr/>
	
	<div id="win"></div>
	<script type="text/javascript">
		$(function(){
			
			//打开窗口
			$("#win").window({
				width:200,
				height:200,
				title:"窗口1",
				top:100,
				left:50,
				minimizable:false,
				maximizable:false,
				closable:false,
				closed:false,
				draggable:false,
				resizable:false
			});
			
			//关闭窗口,默认创建的为打开状态
			$("#win").window("close");
			
			//定位二个按钮，同时添加单击事件
			$(":button").click(function(){
				var tip = $(this).val().trim();
				//判断
				if(tip=="打开窗口"){
					$("#win").window("open");
					//动态为窗口加载指定的页面,路径既可以用相对，又可以用绝对，项目用绝对路径
					$("#win").window("refresh","../base.html");
				}else if(tip=="关闭窗口"){
					$("#win").window("close");
				}
			});
		});
	</script>	
	
	
  </body>
  
</html>

Dialog对话框窗口的控件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>18_Dialog.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">   
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">   
	<script type="text/javascript" src="../js/jquery.min.js"></script>   
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
  </head>
  
  <body>
	
	<input type="button" value="打开对话框"/>
	<hr/>
	
	<div id="dd">
	</div>
	<script type="text/javascript">
		$(function(){
			$("#dd").dialog({
				width:300,
				height:300,
				top:100,
				left:300,
				draggable:false,
				title:"对话框1",
				toolbar:[{
					text:"打开",
					iconCls:"icon-print",
					handler:function(){alert("打开")
						$("#dd").dialog({
							href:"../base.html"
						});
					}
				}],
				buttons:[{
					text:"关闭",
					iconCls:"icon-no",
					handler:function(){
						$("#dd").dialog("close");							
					}
				}]
			});
			//开启的时候。默认为关闭
			$("#dd").dialog("close");
			
			//点击按钮，打开对话框
			$(":button").click(function(){
				$("#dd").dialog("open");
			});
		});
	</script>
	
	
  </body>
  
</html>

Messager消息窗口的控件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>19_Messager.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">   
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">   
	<script type="text/javascript" src="../js/jquery.min.js"></script>   
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
  </head>
  
  <body>
	
	
	<input type="button" value="显示警告窗口" style="background-color:#FF0000"/>
	<input type="button" value="显示确认窗口" style="background-color:#00FF00"/>
	
	<input type="button" value="显示提示窗口" style="background-color:#0000FF"/>
	<input type="button" value="显示消息窗口" style="background-color:yellow"/>
	
	
	<script type="text/javascript">
		$(function(){
		
			$(":button").click(function(){
				var tip = $(this).val().trim();
				if(tip == "显示警告窗口"){
					//参数四：关闭窗口的回调函数
					$.messager.alert("标题","内容","warning");
				}else if(tip == "显示确认窗口"){
					//参数三：按确认或取消后的回调函数
					$.messager.confirm("标题","你确认要关闭窗口码",function(value){
						if(value){
							window.close();
						}
					});
				}else if(tip == "显示提示窗口"){
					$.messager.prompt("城市选择","你希望去哪个城市工作",function(city){
						if(city!=""){
								alert(city+"是一个不错的城市，但压力山大");
							}else{
								alert("您输出的数据为空");
							}
					});
				}else if(tip == "显示消息窗口"){
					$.messager.show({
						showType:"slide",
						title:"当前状态",
						msg:"您卡上余额不足，请及时充值"
					});
					
					//$.messager.progress();
				}
			});
		});	
	</script>
  </body>
  
</html>

Datadrid表格的控件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>20E_DataGrid.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">   
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">   
	<script type="text/javascript" src="../js/jquery.min.js"></script>   
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
  </head>
  
  <body>
		
		<table id="dg" style="width:600px"></table>
		<script type="text/javascript">
			$(function(){
				$("#dg").datagrid({
					url:"users2.json",
					singleSelect:true,
					fitColumns:true,
					columns:[[    
				 	       {field:"id",title:"编号",width:100},    
				       	   {field:"name",title:"姓名",width:100},    
				       	   {
				       	   		field:"sal",
				       	   		title:"薪水",
				       	   		width:100,
				       	   		align:'center',
				       	   		formatter:function(value){
				       	   			return "￥" + value;
				       	   		},
				       	   		styler:function(value){
				       	   			if(value<=9000){
				       	   				return "color:blue";
				       	   			}else if(value<=13000){
				       	   				return "color:green";
				       	   			}else{
				       	   				return "color:red";
				       	   			}
				       	   		}
				       	   }    
				    ]],
				    pagination:true,
				    pageNumber:1,
				    pageSize:2,
				    pageList:[2,4]
				});
			});
		</script>
	
  </body>
  
</html>

Tree树的控件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>21B_Tree.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">   
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">   
	<script type="text/javascript" src="../js/jquery.min.js"></script>   
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
  </head>
  
  <body>
		
		<ul id="tt" style="width: 200px" data-options="checkbox:true"></ul>
		<script type="text/javascript">
			$(function(){
				$("#tt").tree({
					url:"countrys.json"
				});
			});
		</script>
	
  </body>
  
</html>

基本把api里面的常用方法和控件都练习了一次，今后还是需要大量的练习才行。