easyui---使用教程

最新推荐文章于 2022-05-06 15:02:58 发布
最新推荐文章于 2022-05-06 15:02:58 发布
阅读量2k 收藏 15
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41532872/article/details/88776792
版权

一、概述

easyui ---->easy ui ====user interface
layui
vue.js
bootstrap

是一个非常好用的前端框架,一般使用在后台管理系统
http://www.jeasyui.com/

二、下载

http://www.jeasyui.com/download/index.php
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
1.目录说明
在这里插入图片描述
demo 例子
demo-moblie 移动端的案例
locale 本地化的js [国际化] i18n
plugins 插件
src 非插件的源代码
themes 主题
easyloader 封装的ajax的js
jquery.easyui.min.js easyui的核心 js
jquery.min.js jquery

因为easyui基于jquery那么在引入js的时候必须先引入jquery 再引入jqery.easyui.min.js

三、知识点

1.Panel
2.Layout
3.Tabs
4.LinkButton
5.SearchBox
6.Tree
7.ComboTree
8.DateBox、DateTimeBox、Calendar
9.TextBox、文本域
10.PasswordBox
11.RadioButton
12.CheckBox
13.ComboBox
14.FileBox
15.ValidateBox
16.Form
17.Dialog
18.Messager
19.DataGrid
可以展开的DataGrid

四、准备工作

1.创建项目
在这里插入图片描述
2.引入easyui的样式和js
在这里插入图片描述

五、Panel[面板]

1.使用HTML方式实现
在这里插入图片描述
相关样式
class: easyui-panel

<body>
    <h2>基础面板</h2>
    <div style="margin:20px 0 10px 0;">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">Open</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">Close</a>
    </div>
    <div id="p" class="easyui-panel" iconCls="icon-ok"
    	width="50%" height="200px"  border="true" collapsible="true" minimizable="true" maximizable="true" closable="true"
    	footer="#foo"  closed="false"  
     	title="基本面板" style="padding:10px;">
      	我是一个面板
    </div>
    <div id="foo">我是脚</div>
    
    <div id="p2" class="easyui-panel" iconCls="icon-ok"
    	width="50%" height="200px"  border="true" collapsible="true" minimizable="true" maximizable="true" closable="true"
    	footer="#foo2"  closed="false"   href="index.jsp"  method="post"
     	title="面板加载其它页面" style="padding:10px;">
     	fsadfdsafdsafdsafdsa
    </div>
    <div id="foo2">我是脚</div>
  </body>
  <script type="text/javascript">
  </script>
</html>

2.使用HTML方式实现2
在这里插入图片描述
data-options:作用：对所有属性进行打包
3.使用JS实现


  <body>
    <h2>基础面板</h2>
	<div id="p" class="easyui-panel"></div>    
	<div id="foo"></div>
	
	<input type="button" value="关闭" id="btn1">
	<input type="button" value="打开" id="btn2">
	<input type="button" value="更新标题" id="btn3">
	<input type="button" value="清空内容" id="btn4">
	<input type="button" value="刷新" id="btn5">
	<input type="button" value="展开" id="btn6">
	<input type="button" value="收起" id="btn7">
  </body>
  <script type="text/javascript">
  
  $("#btn1").click(function(){
	  $('#p').panel("close");
  });
  $("#btn2").click(function(){
	  $('#p').panel("open");
  });
  $("#btn3").click(function(){
	  $('#p').panel("setTitle","我是新标题");
  });
  $("#btn4").click(function(){
	  $('#p').panel("clear");
  });
  $("#btn5").click(function(){
	  $('#p').panel("refresh");
  });
  $("#btn6").click(function(){
	  $('#p').panel("expand");
  });
  $("#btn7").click(function(){
	  $('#p').panel("collapse");
  });
  $('#p').panel({
	    width:500,
	    height:150,
	    title:'My Panel',
	    iconCls:'icon-save',
	    border:true,
	    collapsible:true,
	    minimizable:true,
	    maximizable:true,
	    closable:true,
	    footer:"#foo",
	    closed:false,
	    href:'index.jsp',
	    method:'post',
	    tools:[{
	        iconCls:'icon-add',
	        handler:function(){alert('new');}
	    },{
	        iconCls:'icon-save',
	        handler:function(){alert('save');}
	    }]
	}); 
  </script>
</html>

4.相关属性

id="p2"     标记id
title=    "面板加载其它页面"     面板头上显示的文字
class="easyui-panel"     使用的样式
iconCls="icon-ok"      面板头文字左边的图标
width="50%"      宽度
height="200px"    高度
border="true"     是否显示边框  默认为true
collapsible="true"     是否显示展开和收起的按钮
minimizable="true"     是否显示最小化的按钮
maximizable="true"    是否显示最大化的按钮
closable="true"    是显示关闭的按钮
footer="#foo2"      面板的脚
closed="false"       是否默认关闭  默认为false
href="index.jsp"     面板内容的请求接口
method="post"    面板内容请求接口的请求方式

5.相关方法

	<input type="button" value="关闭" id="btn1">
	<input type="button" value="打开" id="btn2">
	<input type="button" value="更新标题" id="btn3">
	<input type="button" value="清空内容" id="btn4">
	<input type="button" value="刷新" id="btn5">
	<input type="button" value="展开" id="btn6">
	<input type="button" value="收起" id="btn7">
  </body>
  <script type="text/javascript">
  
  $("#btn1").click(function(){
	  $('#p').panel("close");
  });
  $("#btn2").click(function(){
	  $('#p').panel("open");
  });
  $("#btn3").click(function(){
	  $('#p').panel("setTitle","我是新标题");
  });
  $("#btn4").click(function(){
	  $('#p').panel("clear");
  });
  $("#btn5").click(function(){
	  $('#p').panel("refresh");
  });
  $("#btn6").click(function(){
	  $('#p').panel("expand");
  });
  $("#btn7").click(function(){
	  $('#p').panel("collapse");
  });

六、Layout【布局】

在easyui里面 上 下 左 右 中
北 南 西 东 中
north south west east center
只用掌握html的使用方法
1.实现北 南 西 东 中
在这里插入图片描述

<body>
  	<div id="l" class="easyui-layout" data-options="withd:'100%',height:'100%'">
  		<div class="easyui-panel" data-options="region:'north',split:true,title:'北',iconCls:'icon-search',height:'150px'">
  			北
  		</div>
  		<div class="easyui-panel" data-options="region:'south',split:true,title:'南',iconCls:'icon-ok',height:'80px'">
  			南
  		</div>
  		<div class="easyui-panel" data-options="region:'west',split:true,title:'西',iconCls:'icon-ok',width:'20%'">
  			西
  		</div>
  		<div class="easyui-panel" data-options="region:'east',split:true,title:'东',iconCls:'icon-ok',width:'20%'">
  			东
  		</div>
  		<div class="easyui-panel" data-options="region:'center',split:true,title:'中',iconCls:'icon-ok'">
  			中
  		</div>
  	</div>

2.相关样式
class=“easyui-layout”
3.相关属性 【使用子元素里面】
region:‘north’
|–指定方位 north south west east center

split:true

4.使用DIV实现两个Panel水平排列
在这里插入图片描述

<body >
  		<div class="easyui-layout" data-options="height:'300px'">
	  		
	  		<div class="easyui-panel" data-options="region:'center',split:true,title:'中',iconCls:'icon-ok'">
	  			中
	  		</div>
	  		<div class="easyui-panel" data-options="region:'east',split:true,title:'东',iconCls:'icon-ok',width:'30%'">
	  			<div class="easyui-calendar" data-options="width:'100%',height:'100%',border:false"></div>
	  		</div>
  		</div>
  </body>

七、Tabs

在这里插入图片描述

  <body >
  	<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">
  		<div data-options="title:'首页',iconCls:'icon-save',href:'index.jsp'">
  			首页
  		</div>
  		<div title="用户管理" iconCls="icon-search" data-options="closable:true">
  			用户管理
  		</div>
  		<div title="系统管理" iconCls="icon-ok">
  			系统管理
  		</div>
  	</div>
  	<div id="tab-tools">
  		 <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'" onclick="refreshCurrentTab()"></a>
  	</div>
  	
  </body>
  <script type="text/javascript">
  	function refreshCurrentTab(){
  		var tab = $('#tt').tabs('getSelected');  // 得到选中的tab
  		var tabIndex = $('#tt').tabs('getTabIndex',tab);  // 得到选中的tab的index
  		//刷新
  		tab.panel('refresh', 'index.jsp');
  		
  		//更新tab里面的内容
  		/**$('#tt').tabs('update', {
  			tab: tab,//要更新的目标tab
  			options: {
  				title: '更新后',
  				href: 'index.jsp'  // the new content URL
  			}
  		});**/
  	}
  </script>

八、LinkButton

在这里插入图片描述
1.相关代码

<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">Text Button</a>
        
        <hr>
         <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cancel'">Cancel</a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'">Refresh</a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-search'">Search</a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true">Text Button</a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-print'">Print</a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-help'"> </a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'"></a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-back'"></a>
        
        <hr>
         <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-picture',size:'large',iconAlign:'bottom'">Picture</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',size:'large',iconAlign:'top'">Clip Art</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'left'">Shapes</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-smartart',size:'large',iconAlign:'right'">SmartArt</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-chart',size:'large',iconAlign:'top'">Chart</a>

2.相关属性
class=“easyui-linkbutton” 代表使用linkbutton的样式渲染
plain:true 是否显示边框
size:‘large’ 是否启用大图标
iconAlign:‘bottom’ 设置图标的所在位置 left top right bottom
s

九、SearchBox[熟悉]

在这里插入图片描述
1.相关代码
在这里插入图片描述
2.相关属性
searcher :点击右边的放大镜触发的事件
menu 设置输入框左边的下拉选项

十、Tree

在这里插入图片描述


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>06tree.jsp</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="resources/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="resources/easyui/themes/icon.css">
    <script type="text/javascript" src="resources/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="resources/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="resources/easyui/locale/easyui-lang-zh_CN.js"></script>
  </head>
  
  <body >
  	  <div class="easyui-panel" style="padding:5px">
        <ul id="tt" class="easyui-tree" data-options="url:'json/tree.json',method:'get',animate:true,lines:true,checkbox:true
        ,onDblClick: function(node){
                    $(this).tree('beginEdit',node.target);
                },
         onAfterEdit:function(node){
         	alert(node.text+'  '+node.id);
         }
        "></ul>
  	  </div>
  	  <a class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="getSelectedNodes()">得到选中节点</a>
  	  <a class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="initTreeWithJs()">使用js初始化树</a>
  	  <div class="easyui-panel" style="padding:5px">
        <div id="tt2" class="easyui-tree" ></div>
  	  </div>
  </body>
 <script type="text/javascript">
 	function getSelectedNodes(){
 		var nodes1 = $('#tt').tree('getChecked');	// get checked nodes
 		var nodes2 = $('#tt').tree('getChecked', 'unchecked');	// get unchecked nodes
 		var nodes3 = $('#tt').tree('getChecked', 'indeterminate');	// get indeterminate nodes
 		var nodes4 = $('#tt').tree('getChecked', ['checked','indeterminate']);	// get checked and indeterminate nodes
 		con(nodes1);
 		alert("--------------");
 		con(nodes2);
 		alert("--------------");
 		con(nodes3);
 		alert("--------------");
 		con(nodes4);
 		alert("--------------");
 	}
 	function con(nodes){
 		for(var i=0;i<nodes.length;i++){
 			alert(nodes[i].text);
 		}
 	}
 	
 	function initTreeWithJs(){
 		$("#tt2").tree({
 			url:'json/tree.json',
 			method:'get',
 			animate:true,
 			lines:true,
 			checkbox:true,
 			onDblClick: function(node){
 		         $(this).tree('beginEdit',node.target);
 		    },
 		    onAfterEdit:function(node){
 		         alert(node.text+'  '+node.id);
 		    }
 		});
 	}
 	
 	
 </script>
</html>

树的json格式

[{
	"id":1,
	"text":"My Documents",
	"children":[{
		"id":11,
		"text":"Photos",
		"state":"closed",
		"children":[{
			"id":111,
			"text":"Friend",
			"iconCls":"icon-add"
		},{
			"id":112,
			"text":"Wife"
		},{
			"id":113,
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"Program Files",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

十一、ComboTree【下拉树】

在这里插入图片描述

在这里插入图片描述


  <body >
  	  <div class="easyui-panel" style="padding:5px;width: 50%">
        <input id="cc" class="easyui-combotree" data-options="url:'json/tree.json',method:'get',label:'Select Node:',labelPosition:'top',multiple:true" style="width:100%">
  	  </div>
	  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">GetValue</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">SetValue</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">Disable</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">Enable</a>

  </body>
 <script type="text/javascript">
 function getValue(){
     var val = $('#cc').combotree('getValue');
     alert(val);
 }
 function setValue(){
     $('#cc').combotree('setValue', '122');
 }
 function disable(){
     $('#cc').combotree('disable');
 }
 function enable(){
     $('#cc').combotree('enable');
 }
 	
 </script>

相关属性

url:'json/tree.json',
method:'get',
label:'Select Node:', 设置下拉框的标记
labelPosition:'left', 设置标记文字的位置 top  left  默认为top  
labelWidth:'20%',  设置标记文字的宽度   
labelAlign:'right',  标记文字的对齐方式left center right  默认为left
multiple:true  是否启多选

十二、DateBox、DateTimeBox、Calendar

在这里插入图片描述
在这里插入图片描述

十三、TextBox、文本域

<div style="margin-bottom:20px">
            <input class="easyui-textbox" data-options="label:'用户名:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户名',
            value:'admin',editable:true,readonly:false,required:true
            " style="width:100%;">
        </div>
         <div style="margin-bottom:20px">
            <input class="easyui-textbox" data-options="label:'用户备注:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户备注',multiline:true" style="width:100%;height: 60px">
        </div>

相关属性
value 设置默认值
editable 设置是否可以编辑，但是可以得到焦点
readonly 设置是否只读，如果只读就不会得到焦点
disable 设置不可用
required 是否启用非空验证
multiline 是否启用多多输入

十四、PasswordBox

在这里插入图片描述

十五、RadioButton

在easyui的低版本里面是没有RadioButton
在这里插入图片描述

<div style="margin-bottom:20px">
         	<label class="textbox-label" style="text-align: right;">爱好:</label>
            <input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="DOTA" label="DOTA">
            <div style="display: inline-block;width: 30px"></div>
            <input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="DNF" label="DNF">
            <div style="display: inline-block;width: 30px"></div>
            <input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="CF" label="CF">
            <div style="display: inline-block;width: 30px"></div>
            <input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="LOL" label="LOL">
        </div>
        <div style="margin-bottom:20px">
         	<label class="textbox-label" style="text-align: right;">爱好:</label>
            <input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="DOTA"><label style="margin-left: 10px">DOTA</label>
            <div style="display: inline-block;width: 30px"></div>
            <input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="DNF" ><label style="margin-left: 10px">DNF</label>
            <div style="display: inline-block;width: 30px"></div>
            <input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="CF"><label style="margin-left: 10px">CF</label>
            <div style="display: inline-block;width: 30px"></div>
            <input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="LOL"><label style="margin-left: 10px">LOL</label>
        </div>

十六、CheckBox

在easyui的低版本里面是没有checkBox

</div>
         <div style="margin-bottom:20px">
         	<label class="textbox-label" style="text-align: right;">爱好:</label>
            <input class="easyui-checkbox" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="DOTA" label="DOTA">
            <div style="display: inline-block;width: 30px"></div>
            <input class="easyui-checkbox" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="DNF" label="DNF">
            <div style="display: inline-block;width: 30px"></div>
            <input class="easyui-checkbox" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="CF" label="CF">
            <div style="display: inline-block;width: 30px"></div>
            <input class="easyui-checkbox" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="LOL" label="LOL">
        </div>
         <div style="margin-bottom:20px">
         	<label class="textbox-label" style="text-align: right;">爱好:</label>
            <input class="easyui-checkbox" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="DOTA"><label style="margin-left: 10px">DOTA</label>
            <div style="display: inline-block;width: 30px"></div>
            <input class="easyui-checkbox" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="DNF" ><label style="margin-left: 10px">DNF</label>
            <div style="display: inline-block;width: 30px"></div>
            <input class="easyui-checkbox" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="CF"><label style="margin-left: 10px">CF</label>
            <div style="display: inline-block;width: 30px"></div>
            <input class="easyui-checkbox" data-options="labelAlign:'left',labelWidth:50" name="fruit" value="LOL"><label style="margin-left: 10px">LOL</label>
        </div>

在这里插入图片描述

十七、ComboBox[下拉列表]

json
[
{“id”:1,“name”:“水瓶座”},
{“id”:2,“name”:“金牛座”},
{“id”:3,“name”:“双鱼座”},
{“id”:4,“name”:“狮子座”},
{“id”:5,“name”:“双子座”},
{“id”:6,“name”:“射手座”}
]

html
在这里插入图片描述
相关属性
valueField:‘id’ 当数据来源一json请求时把json里面的id属性值作为其option的value的值
textField:‘name’ 当数据来源一json请求时把json里面的name属性值作为其option的显示值

十八、FileBox[文件上传]

在这里插入图片描述

  <div style="margin-bottom:20px">
         	<input class="easyui-filebox" data-options="label:'用户头像:',labelPosition:'left',labelAlign:'right',prompt:'请选择用户头像'" style="width:70%;">
         	<a class="easyui-linkbutton" data-options="iconCls:'icon-add'">上传</a>
        </div>

十九、ValidateBox

在这里插入图片描述

<body >
  	  <div class="easyui-panel" title="用户注册" style="padding:5px;width: 50%">
  	  <form action="">
  	    <div style="margin-bottom:20px">
            <input class="easyui-textbox" data-options="required:true,validType:'length[6,10]',label:'用户名:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户名'" style="width:100%;">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" data-options="required:true,validType:'email',label:'邮箱:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户邮箱'" style="width:100%;">
        </div>
         <div style="margin-bottom:20px">
            <input class="easyui-textbox" data-options="required:true,validType:'url',label:'博客:',labelPosition:'left',labelAlign:'right',prompt:'请输入博客地址'" style="width:100%;">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" data-options="required:true,validType:'phone',label:'电话:',labelPosition:'left',labelAlign:'right',prompt:'请输入电话'" style="width:100%;">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-passwordbox" id="pwd1" data-options="required:true,label:'密码1:',labelPosition:'left',labelAlign:'right',prompt:'请输入密码1'" style="width:100%;">
        </div>
         <div style="margin-bottom:20px">
            <input class="easyui-passwordbox" validType="equals['#pwd1']" data-options="required:true,label:'密码2:',labelPosition:'left',labelAlign:'right',prompt:'请输入密码2'" style="width:100%;">
        </div>
        </form>
  	  </div>
  </body>
 <script type="text/javascript">
 $.extend($.fn.validatebox.defaults.rules, {
	 equals: {
	        validator: function(value,param){
	            return value == $(param[0]).val();
	        },
	        message: '两次密码不一致.'
	    },
	phone: {
	        validator: function(value){
	        	var TEL_REGEXP = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
	        	 if(TEL_REGEXP.test(value)){
	        	        return true;
	        	 }
	        	 return false;
	        },
	        message: '请输入有效的手机号.'
	    }
	});
 </script>
</html>

自带的验证规则
required:true 非空验证
validType:‘length[6,10]’ 长度验证
validType:‘url’ 链接地址验证
validType:‘email’ 邮箱地址验证

自定义验证规则
在这里插入图片描述
在这里插入图片描述

二十、Form[表单]

在这里插入图片描述
1.相关代码



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>11form.jsp</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="resources/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="resources/easyui/themes/icon.css">
    <script type="text/javascript" src="resources/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="resources/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="resources/easyui/locale/easyui-lang-zh_CN.js"></script>
  </head>
  
  <body >
  	  <div class="easyui-panel" title="用户注册" style="padding:5px;width: 50%">
  	  <form action="" method="get" id="dataFrm">
  	    <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="username" value="administrator" data-options="required:true,validType:'length[6,20]',label:'用户名:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户名'" style="width:100%;">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="email" value="88888@qq.com" data-options="required:true,validType:'email',label:'邮箱:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户邮箱'" style="width:100%;">
        </div>
         <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="blog" value="http://laolei.vip" data-options="required:true,validType:'url',label:'博客:',labelPosition:'left',labelAlign:'right',prompt:'请输入博客地址'" style="width:100%;">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="phone" value="13411111111" data-options="required:true,validType:'phone',label:'电话:',labelPosition:'left',labelAlign:'right',prompt:'请输入电话'" style="width:100%;">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-passwordbox" name="pwd" id="pwd1" data-options="required:true,label:'密码1:',labelPosition:'left',labelAlign:'right',prompt:'请输入密码1'" style="width:100%;">
        </div>
         <div style="margin-bottom:20px">
            <input class="easyui-passwordbox" name="pwd2" validType="equals['#pwd1']" data-options="required:true,label:'密码2:',labelPosition:'left',labelAlign:'right',prompt:'请输入密码2'" style="width:100%;">
        </div>
          <div style="margin-bottom:20px">
         	<label class="textbox-label" style="text-align: right;">性别:</label>
            <input class="easyui-radiobutton"  data-options="labelAlign:'right',labelWidth:50" name="sex" value="1" label="男">
            <div style="display: inline-block;width: 30px"></div>
            <input class="easyui-radiobutton" data-options="labelAlign:'right',labelWidth:50" name="sex" value="0" label="女">
        </div>
        <div style="margin-bottom:20px">
         	<label class="textbox-label" style="text-align: right;">爱好:</label>
            <input class="easyui-checkbox" data-options="labelAlign:'right',labelWidth:50" name="hobby" value="DOTA" label="DOTA">
            <div style="display: inline-block;width: 30px"></div>
            <input class="easyui-checkbox" data-options="labelAlign:'right',labelWidth:50" name="hobby" value="DNF" label="DNF">
            <div style="display: inline-block;width: 30px"></div>
            <input class="easyui-checkbox" data-options="labelAlign:'right',labelWidth:50" name="hobby" value="CF" label="CF">
            <div style="display: inline-block;width: 30px"></div>
            <input class="easyui-checkbox" data-options="labelAlign:'right',labelWidth:50" name="hobby" value="LOL" label="LOL">
        </div>
        <div style="margin-bottom:20px">
          <select class="easyui-combobox" 
          data-options="url:'json/combobox.json',
          method:'get',valueField:'id',textField:'name',label:'星座:',labelPosition:'left',labelAlign:'right'" 
          style="width:100%;">
            </select>
        </div>
         <div style="margin-bottom:20px;text-align: center;" >
         	<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="doSubmit">提交</a>
         	<a class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="javascript:$('#dataFrm').form('reset');">重置</a>
         	<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="javascript:$('#dataFrm').form('clear');">clear</a>
         	<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="doLoad">装载</a>
        </div>
        </form>
  	  </div>
  </body>
 <script type="text/javascript">
 $.extend($.fn.validatebox.defaults.rules, {
	 equals: {
	        validator: function(value,param){
	            return value == $(param[0]).val();
	        },
	        message: '两次密码不一致.'
	    },
	phone: {
	        validator: function(value){
	        	var TEL_REGEXP = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
	        	 if(TEL_REGEXP.test(value)){
	        	        return true;
	        	 }
	        	 return false;
	        },
	        message: '请输入有效的手机号.'
	    }
	});
 
 //监听提交事件
 $("#doSubmit").click(function(){
	 $.messager.progress();	// display the progress bar 
	 $('#dataFrm').form('submit', {
			url: 'index.jsp',
			method:'post',
			onSubmit: function(){
				var isValid = $(this).form('validate');//触发验证
				if (!isValid){
					$.messager.progress('close');	// hide progress bar while the form is invalid
				}
				return isValid;	// return false will stop the form submission
			},
			success: function(data){//提交成功之后的回调方法
				$.messager.progress('close');	// hide progress bar while submit successfully
			}
		});
 });
 
 //装载
 $("#doLoad").click(function(){
	 var json={
			 username:'zhangxiaoming',
			 email:'99999@qq.com',
			 blog:'http://laolei.tech',
			 phone:'15333331113',
			 pwd:'123456',
			 pwd2:'123456',
			 sex:1,
			 hobby:["DOTA","LOL","CF"]
	 };
	 //$('#dataFrm').form("load",json);
	 $('#dataFrm').form("load","json/user.json");
 });
 
 
 </script>
</html>

2.相关方法
1，submit
2，load
3，clear
4，reset

二十一、Dialog[弹出层]

1.使用HTML的实现方式[重点]

	<div id="dlg" class="easyui-dialog" style="width:600px;height: 400px" data-options="title:'添加用户',iconCls:'icon-add',closed:true, modal: true,
		collapsible:true,minimizable:true,maximizable:true,resizable:true,toolbar:'#dlg-tools',buttons:'#dlg-buttons'
		">
			我是弹出层里面的内容
		</div>  
		
		<div id="dlg-tools">
			<a class="easyui-linkbutton" data-options="iconCls:'icon-save'">修改</a>
         	<a class="easyui-linkbutton" data-options="iconCls:'icon-reload'">删除</a>
		</div>
		<div id="dlg-buttons" style="text-align:center;">
			<a class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
         	<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript:$('#dlg').dialog('close');">取消</a>
		</div>

2.使用JS的实现方式[熟悉]

$("#dlg2").dialog({
		title:'添加用户',
		iconCls:'icon-add',
		closed:true, 
		modal: true,
		collapsible:true,
		minimizable:true,
		maximizable:true,
		resizable:true,
		href:'11form.jsp',
		method:'get'
		//toolbar:'#dlg-tools',
		//buttons:'#dlg-buttons'
	});

二十二、Messager

在这里插入图片描述


  <body>
         	<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn1">打开1alert</a>
         	<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn2">打开2confirm</a>
         	<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn3">打开3prompt</a>
         	<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn4">打开4progress</a>
         	<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn5">打开5show</a>
		
  </body>
 <script type="text/javascript">
 $("#btn1").click(function(){
	 $.messager.alert('Warning','The warning message');
 });
 
 
 $("#btn2").click(function(){
	 $.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
		    if (r){
		        alert('ok');
		    }
		});
 });
 
 $("#btn3").click(function(){
	 $.messager.prompt('Prompt', 'Please enter your name:', function(r){
			if (r){
				alert('Your name is:' + r);
			}
		});
 });
 $("#btn4").click(function(){
	 $.messager.progress(); //打开进度条
	 $.messager.progress("close");  //关闭进度条
 });
 
 $("#btn5").click(function(){
	 $.messager.show({
			title:'My Title',
			msg:'Message will be closed after 5 seconds.',
			//timeout:5000,
			showType:'show'
		});
 });
 
 
 </script>

二十三、DataGrid【数据表格】

1.JSON格式
{
“total”:30,rows:[
{},{},{}
]
}
{“total”:28,“rows”:[
{“productid”:“FI-SW-01”,“productname”:“Koi”,“unitcost”:“10.00”,“status”:“1”,“listprice”:“36.50”,“attr1”:“Large”,“itemid”:“EST-1”},
{“productid”:“K9-DL-01”,“productname”:“Dalmation”,“unitcost”:“12.00”,“status”:“1”,“listprice”:“18.50”,“attr1”:“Spotted Adult Female”,“itemid”:“EST-10”},
{“productid”:“RP-SN-01”,“productname”:“Rattlesnake”,“unitcost”:“12.00”,“status”:“1”,“listprice”:“38.50”,“attr1”:“Venomless”,“itemid”:“EST-11”},
{“productid”:“RP-SN-01”,“productname”:“Rattlesnake”,“unitcost”:“12.00”,“status”:“0”,“listprice”:“26.50”,“attr1”:“Rattleless”,“itemid”:“EST-12”},
{“productid”:“RP-LI-02”,“productname”:“Iguana”,“unitcost”:“12.00”,“status”:“0”,“listprice”:“35.50”,“attr1”:“Green Adult”,“itemid”:“EST-13”},
{“productid”:“FL-DSH-01”,“productname”:“Manx”,“unitcost”:“12.00”,“status”:“1”,“listprice”:“158.50”,“attr1”:“Tailless”,“itemid”:“EST-14”},
{“productid”:“FL-DSH-01”,“productname”:“Manx”,“unitcost”:“12.00”,“status”:“0”,“listprice”:“83.50”,“attr1”:“With tail”,“itemid”:“EST-15”},
{“productid”:“FL-DLH-02”,“productname”:“Persian”,“unitcost”:“12.00”,“status”:“1”,“listprice”:“23.50”,“attr1”:“Adult Female”,“itemid”:“EST-16”},
{“productid”:“FL-DLH-02”,“productname”:“Persian”,“unitcost”:“12.00”,“status”:“0”,“listprice”:“89.50”,“attr1”:“Adult Male”,“itemid”:“EST-17”},
{“productid”:“AV-CB-01”,“productname”:“Amazon Parrot”,“unitcost”:“92.00”,“status”:“1”,“listprice”:“63.50”,“attr1”:“Adult Male”,“itemid”:“EST-18”}
]}
2.使用html实现


  <body>
    <a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn1">打开1alert</a>
    <a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn2">打开2confirm</a>
  	<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn3">打开3prompt</a>
  	<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn4">打开4progress</a>
  	<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn5">打开5show</a>
	<table class="easyui-datagrid" style="width:'100%';height:250px" 
		 data-options="title:'数据列表',iconCls:'icon-save',singleSelect:true,collapsible:true,url:'json/datagrid.json',method:'get',
		 fitColumns:true,toolbar:'#tb',loadMsg:'数据正在努力加载中。。。',emptyMsg:'查无数据',
		 pagination:true,rownumbers:true,pagePosition:'bottom',pageNumber:1,pageSize:10,pageList:[5,10,15,20,25]
		 ">
		<thead>
            <tr>
                <th data-options="field:'ck',checkbox:true"></th>
                <th data-options="field:'itemid',width:80,title:'ID',width:100,align:'center',halign:'center'">ID</th>
                <th data-options="field:'productid',width:100,hidden:true">Product</th>
                <th data-options="field:'listprice',width:80,align:'right',sortable:true">List Price</th>
                <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                <th data-options="field:'attr1',width:250">Attribute</th>
                <th data-options="field:'status',width:60,align:'center',formatter:statusFmt">Status</th>
            </tr>
        </thead>
	</table>
	<div id="tb">
		<a  class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
		<a  class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
		<a  class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
	</div>
  </body>
 <script type="text/javascript">
 function statusFmt(value,row,index){
	 return value==1?'男':'女';
 }
 $("#btn1").click(function(){
 });
 $("#btn2").click(function(){
 });
 
 $("#btn3").click(function(){
 });
 $("#btn4").click(function(){
 });
 
 $("#btn5").click(function(){
 });
 
 
 </script>
</html>

3.使用js实现[掌握]

  
  <body>
    <a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn1">刷新</a>
    <a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn2">得到选中行</a>
	<table id="tb" style="width:'100%';height:250px" ></table>
	<div id="toolbar">
		<a  class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
		<a  class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
		<a  class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
	</div>
  </body>
 <script type="text/javascript">
 
 //加载表格数据
 $("#tb").datagrid({
	 title:'数据列表',
	 iconCls:'icon-save',
	 singleSelect:true,
	 collapsible:true,
	 url:'json/datagrid.json',
	 method:'get',
	 fitColumns:true,
	 toolbar:'#toolbar',
	 loadMsg:'数据正在努力加载中。。。',
	 emptyMsg:'查无数据',
	 pagination:true,
	 rownumbers:true,
	 pagePosition:'bottom',
	 pageNumber:1,
	 pageSize:10,
	 pageList:[5,10,15,20,25],
	 columns:[[
	           {field:'ck',checkbox:true},
	           {field:'itemid',width:80,title:'Item ID',width:100,align:'center',halign:'center'},
	           {field:'productid',width:100,hidden:true,title:'productid'},
	           {field:'listprice',width:80,align:'right',sortable:true,title:'listprice'},
	           {field:'unitcost',width:80,align:'right',title:'unitcost'},
	           {field:'attr1',width:250,title:'attr1'},
	           {field:'status',width:60,align:'center',title:'statu',formatter:function(value,row,index){
	        	   return value==1?'男':'女';
	           }}
	  ]],
	  onDblClickRow:function(index,row){
		  alert(row.itemid+"  "+row.status);
	  },
	  
 	
 });
 
 function statusFmt(value,row,index){
	 return value==1?'男':'女';
 }
 $("#btn1").click(function(){
	 $("#tb").datagrid("reload");
 });
 $("#btn2").click(function(){
	var row=$("#tb").datagrid("getSelected");
	if(row){
		$.messager.show({
			title:"提示",
			msg:'选择中了'+row.productid
		});
	}else{
		$.messager.show({
			title:"提示",
			msg:'请选中操作行'
		});
	}
 });
 </script>
</html>

二十四、可以展开的DataGrid

http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=&sort=asc
在这里插入图片描述

二十五、综合案例

在这里插入图片描述
在这里插入图片描述

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>14datagrid1.jsp</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="resources/easyui/themes/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="resources/easyui/themes/icon.css">
    <script type="text/javascript" src="resources/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="resources/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="resources/easyui/locale/easyui-lang-zh_CN.js"></script>
  </head>
  
  <body>
  
  <!-- 用户数据表格开始 -->
	<table id="userTb" style="width:'100%';height:350px" ></table>
	<div id="toolbar">
		<a  class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" id="addUser">添加用户</a>
		<a  class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" id="updateUser">修改用户</a>
		<a  class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" id="deleteUser">删除用户</a>
	</div>
  <!-- 用户数据表格结束 -->
  
  <!-- 添加  修改的弹出层开始 -->
  	<div id="dlg" class="easyui-dialog" style="width:600px;height: 400px" data-options="title:'添加用户',iconCls:'icon-add',closed:true, modal: true,
		collapsible:true,minimizable:true,maximizable:true,resizable:true,buttons:'#dlg-buttons'
		">
		<form action="" method="get" id="dataFrm">
		<div style="margin-bottom:20px;margin-top: 20px;">
            <input class="easyui-textbox" name="userid"  data-options="required:true,label:'用户ID:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户名'" style="width:95%;">
        </div>
  	    <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="username"  data-options="required:true,label:'用户名:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户名'" style="width:95%;">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="money"  data-options="required:true,label:'存款:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户邮箱'" style="width:95%;">
        </div>
         <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="remark" data-options="required:true,label:'备注:',labelPosition:'left',labelAlign:'right',prompt:'请输入博客地址'" style="width:95%;">
        </div>
          <div style="margin-bottom:20px">
         	<label class="textbox-label" style="text-align: right;">性别:</label>
            <input class="easyui-radiobutton"  data-options="labelAlign:'right',labelWidth:50" name="sex" value="1" label="男" checked="checked">
            <div style="display: inline-block;width: 30px"></div>
            <input class="easyui-radiobutton" data-options="labelAlign:'right',labelWidth:50" name="sex" value="0" label="女">
        </div>
        </form>
	</div>  
		
	<div id="dlg-buttons" style="text-align:center;">
		<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="doSubmit">保存</a>
	    <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript:$('#dlg').dialog('close');">取消</a>
	</div>
  <!-- 添加  修改的弹出层结束 -->
  </body>
 <script type="text/javascript">
 
 //加载表格数据
 $("#userTb").datagrid({
	 title:'用户列表',
	 iconCls:'icon-save',
	 singleSelect:true,
	 collapsible:true,
	 url:'json/datagrid_user.json',
	 method:'get',
	 fitColumns:true,
	 toolbar:'#toolbar',
	 loadMsg:'数据正在努力加载中。。。',
	 emptyMsg:'查无数据',
	 pagination:true,
	 rownumbers:true,
	 pagePosition:'bottom',
	 pageNumber:1,
	 pageSize:10,
	 pageList:[5,10,15,20,25],
	 columns:[[
	           {field:'userid',width:80,title:'用户编号',width:100,align:'center',halign:'center'},
	           {field:'username',width:100,hidden:true,title:'用户姓名'},
	           {field:'sex',width:60,align:'center',title:'用户性别',formatter:function(value,row,index){
	        	   return value==1?'男':'女';
	           }},
	           {field:'money',width:80,align:'right',sortable:true,title:'存款'},
	           {field:'remark',width:80,align:'right',title:'用户备注'}
	          
	  ]],
	  onDblClickRow:function(index,row){
		  alert(row.userid+"  "+row.remark);
	  }
 });
 var url;
 //打开添加页面
 $("#addUser").click(function(){
	 $("#dlg").dialog("open").dialog("setTitle","添加用户");
	 //清空form里面的数据
	 $("#dataFrm").form("clear");
	 url="user/addUser.action";
 });
 //打开修改页面
 $("#updateUser").click(function(){
	var row=$("#userTb").datagrid("getSelected");
	if(row){
		$("#dlg").dialog("open").dialog("setTitle","修改用户");
		//装载数据
		$("#dataFrm").form("load",row);
		 url="user/updateUser.action";
	}else{
		$.messager.show({
			title:"提示",
			msg:'请选中操作行'
		});
	}
 });
 //保存
  $("#doSubmit").click(function(){
	  $.messager.progress();	// 显示进度条
		 $('#dataFrm').form('submit', {
				url: url,
				method:'post',
				onSubmit: function(){
					var isValid = $(this).form('validate');//触发验证
					if (!isValid){
						$.messager.progress('close');	// 验证失败后关闭进度条
					}
					return isValid;	// 返回验证状态
				},
				success: function(data){//提交成功之后的回调方法
					$.messager.progress('close');	//关闭进度条
					 //刷新表格
			        $("#userTb").datagrid("reload");
				}
			});
 });
 
 $("#deleteUser").click(function(){
		var row=$("#userTb").datagrid("getSelected");
		if(row){
			 $.messager.confirm('提示','你确定要删除+'+row.username+'吗?',function(r){
				    if (r){
				        alert('ok  删除');
				        //刷新表格
				        $("#userTb").datagrid("reload");
				    }
				});
		}else{
			$.messager.show({
				title:"提示",
				msg:'请选中操作行'
			});
		}
	 });
 </script>
</html>

在这里插入图片描述

司天宏
关注
  • 2
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui用法总结
09-01
针对学生学习情况，总结了工作中常用的easyui中的几种控件，如果tree，grid、日期控件等
JQuery EasyUI 对话框的使用方法
10-28
jQuery EasyUI 对话框(Dialog)用法与EasyUI的窗口用法极为相似，最终的效果图也只与窗口的效果图差几个按钮
jquery-easyui-1.3.1
09-21
最新版本的jquery-easyui-1.3.1
Spring Boot 系列教程 EasyUI-datagrid
11-30
Spring Boot 系列教程 EasyUI-datagrid
Easyui更换皮肤使用方法
05-22
jquery-easyui更换皮肤方法说明皮肤下载地址：http://jeasyui.com/extension/themes.php Cookie插件下载地址：http://jqueryui.com/download/
easyui
张子又
03-19 2216
easyui 一、概述 easyui ---->easy ui ====user interface layui vue.js bootstrap 是一个非常好用的前端框架 一般使用在后台管理系统 http://www.jeasyui.com/ 二、下载 http://www.jeasyui.com/download/index.php 1.目录说明 demo 例子 demo-...
EasyUI的基本使用&布局
weixin_62270300的博客
05-06 3051
目录 一、什么是easyui？ 二、easyui能带给我们什么好处？ 三、easyui如何使用？ 1️⃣.将从官网上下载的EasyUI的资源压缩包解压 然后复制到项目中 2️⃣.引入必要的js和css样式文件 3️⃣.easyui文档网站 布局搭建和菜单搭建 index.jsp tree-data.json 一、什么是easyui？ easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。 easyui为创建现代化，互动，JavaScript...
textarea 失去焦点 选中文本不变色_很少又人知道的qjavascript操作：使用JavaScript读取所选文本并将其复制到剪贴板...
weixin_39895181的博客
11-30 315
很少有人知道的qjavascript操作：使用JavaScript读取所选文本并将其复制到剪贴板废话少说直接上干货。document.execCommand()一、检索用户选择的文本内容让我们从顶部开始，检索用户在页面上选择的所有文本内容。为此，我们使用，这是所有现代浏览器和IE9 +都支持的方法 ：window.getSelection()<h1>道可道，非常道；名可名，...
Easyui
weixin_64072273的博客
04-05 1748
1. easyui介绍 EasyUI全称是Jquery-EasyUI,它是基于Jquery的一个UI插件库，封装了许多实用的控件和功能，并且是完美支持HTML5网页的框架。提供的控件包括数据表格，树形表格，菜单，进度条，选项卡，日期组合框，调节器，对话框等等。 2. 优点: EasyUI的目标就是帮助Web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript，也不要对CSS样式有深入的了解，开发者只需要了解一些简单的Html标签（table标签、form标签
jquery-easyui-1.2.5（附使用文档）
01-11
一个很好的前端框架，jq写的，兼容性很好。使用方便、简单，压缩包内还附加了使用的教程。。
简述jQuery Easyui一些用法
10-19
主要介绍了jQuery Easyui一些用法，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
EasyUi使用
04-15
easyui的介绍详细操作，和各种使用场景，还有各种的特点
easyui-insdep开源版
11-04
easyui非官方皮肤.InsdepUI是一款基于JavaScript，可快速集成并增强与美化第三方JavaScript组件的WEB构建库，为企业建立快速、稳定的前端WEB应用开发解决方案。InsdepUI收录、整合并美化了各类常用的项目开发组件。
jquery-easyui-1.5.3
09-01
Query EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。
chromedriver-linux64-V124.0.6367.91 稳定版
04-30
chromedriver-linux64-V124.0.6367.91稳定版
基于yolov7 加入 depth回归
最新发布
04-30
在官方的基础上改了检测头、导出onnx（适配tensorrt pro 项目）、测试demo等代码。 能够使用清华V2X数据集进行训练和测试。 https://www.bilibili.com/video/BV1Wd4y1G78M/?vd_source=0223c707743ff3013adaeff54aee3506 数据集来源：https://thudair.baai.ac.cn/index 基于Yolov7 tiny，加入了距离回归 模型没收敛完，随便试了下，所以预测有抖动 使用TRT加速，在AGX Xavier上推理大约4ms V2X使用tools/convertlabel2yolo.ipynb 进行数据集转换
基于STM32F101单片机设计Bluetooth Sentinel 主板硬件（原理图+PCB）工程文件.zip
04-30
基于STM32F101单片机设计Bluetooth Sentinel 主板硬件（原理图+PCB）工程文件，仅供学习设计参考。
【前端热门框架【vue框架】】——条件渲染和列表渲染的学习的秒杀方式 (2).txt
04-30
【前端热门框架【vue框架】】——条件渲染和列表渲染的学习的秒杀方式 (2)
aspnet easyui视频教程
01-12
在这个视频教程中，我们会详细介绍ASP.NET EasyUI框架的基本概念、功能特性、使用方法和最佳实践。通过这个视频教程，您将学习到如何在ASP.NET项目中快速构建出现代化、高效的用户界面。 在视频教程中，我们将覆盖...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值