easyui

小鱼儿 2022-03-02 06:30 249阅读 0赞

# easyui #

## 一、概述 ##

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

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

## 二、下载 ##

[http://www.jeasyui.com/download/index.php][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  
20.可以展开的DataGrid

## 四、准备工作 ##

1.创建项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70]  
2.引入easyui的样式和js  
![在这里插入图片描述][20190319212411265.png]

## 五、Panel\[面板\] ##

1.使用HTML方式实现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 1]

相关样式  
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  
![在这里插入图片描述][2019031921245927.png]  
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.实现北 南 西 东 中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 2]

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

split:true

**4.使用DIV实现两个Panel水平排列**  
![在这里插入图片描述][20190319212639582.png]

## 七、Tabs ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 3]

<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

## 九、SearchBox\[熟悉\] ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 4]  
**1.相关代码**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 5]  
**2.相关属性**

searcher :点击右边的放大镜触发的事件  
menu 设置输入框左边的下拉选项

## 十、Tree ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 6]

<!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【下拉树】 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][20190319213110238.png]

<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 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][2019031921321148.png]

## 十三、TextBox、文本域 ##

## 相关属性 ##

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

## 十四、PasswordBox ##

![在这里插入图片描述][20190319213253934.png]

## 十五、RadioButton ##

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

![在这里插入图片描述][20190319213302714.png]

## 十六、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>

![在这里插入图片描述][20190319213354903.png]

## 十七、ComboBox\[下拉列表\] ##

## json ##

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

## html ##

![在这里插入图片描述][20190319213430872.png]

## 相关属性 ##

valueField:‘id’ 当数据来源一json请求时把json里面的id属性值作为其option的value的值  
textField:‘name’ 当数据来源一json请求时把json里面的name属性值作为其option的显示值

## 十八、FileBox\[文件上传\] ##

![在这里插入图片描述][20190319213443987.png]

## 十九、ValidateBox ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 9]

<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’ 邮箱地址验证

## 自定义验证规则 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 11]

## 二十、Form\[表单\] ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 12]  
**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 ##

![在这里插入图片描述][20190319213858581.png]

## 二十三、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":"S
    	potted 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":"Gree
    	n Adult","itemid":"EST-13"},
    	{
        "productid":"FL-DSH-
    	01","productname":"Manx","unitcost":"12.00","status":"1","listprice":"158.50","attr1":"Taill
    	ess","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":"Adu
    	lt Female","itemid":"EST-16"},
    	{
        "productid":"FL-DLH-
    	02","productname":"Persian","unitcost":"12.00","status":"0","listprice":"89.50","attr1":"Adu
    	lt 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][http_www.jeasyui.com_demo_main_index.php_plugin_DataGrid_theme_default_dir_ltr_pitem_sort_asc]  
s  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 13]

## 二十五、综合案例 ##

![在这里插入图片描述][20190319214224146.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 14]

<%@ 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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 15]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 16]

[http_www.jeasyui.com]: http://www.jeasyui.com/
[http_www.jeasyui.com_download_index.php]: http://www.jeasyui.com/download/index.php
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70]: /images/20220302/22b7c5c4dc834cc1bddbf1f73d3a550c.png
[20190319212411265.png]: /images/20220302/2c4ed3ba32f54733a18456355e9b4fc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 1]: /images/20220302/fc25b6181f774a088aad3b1ce1cb128e.png
[2019031921245927.png]: /images/20220302/4ea1fa73b55b47b79ce56a5fa1899ea0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 2]: /images/20220302/d69b035c19eb4946831251da62727a3a.png
[20190319212639582.png]: /images/20220302/44100061029f4a2e9fddd8db35c0e285.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 3]: /images/20220302/de624cb2bc424d46ad4a589372c5cf8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 4]: /images/20220302/2cd341f9ab834c77b452e3690dbd5c57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 5]: /images/20220302/a893659e2643471c867a7cb1c31ed9f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 6]: /images/20220302/c800d937593d4632b48161573146cd22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 7]: /images/20220302/eadc74616a1a4cee920f507041f398d9.png
[20190319213110238.png]: /images/20220302/67ad4171d44640e1be776550bdd8742f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 8]: /images/20220302/8f6911ef03ee4b03830f5aa976b2f6c5.png
[2019031921321148.png]: /images/20220302/ae506afa6a3e407c95db7e7d35df3759.png
[20190319213253934.png]: /images/20220302/26adf983744945e9b089bb328ff0a082.png
[20190319213302714.png]: /images/20220302/589fb883f65b462fac9ac08c482f9316.png
[20190319213354903.png]: /images/20220302/ae993a3160a242daaf2e8695676dfde1.png
[20190319213430872.png]: /images/20220302/0d7a0bb8162d4e7f94d259d10b7069bd.png
[20190319213443987.png]: /images/20220302/8a381baf4dd945eaae4d3c24d62a3a86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 9]: /images/20220302/a7226747824b408b96ac91b00043150c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 10]: /images/20220302/7339910d1a7d4e908e4f04bd1570ff8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 11]: /images/20220302/25a0e84f9ee543748946fe8a450f0ac0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 12]: /images/20220302/f2b22352979a4beeb45bf5f294b0d1bf.png
[20190319213858581.png]: /images/20220302/fb624d8de2ab4561bf1a48b78225f55a.png
[http_www.jeasyui.com_demo_main_index.php_plugin_DataGrid_theme_default_dir_ltr_pitem_sort_asc]: http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=&sort=asc
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 13]: /images/20220302/e71574dcbde54511ba8843f36acda3f7.png
[20190319214224146.png]: /images/20220302/43b871fe02ad4e62b5983bf551b9d2f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 14]: /images/20220302/923554edf320490896c4eae5685a4468.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 15]: /images/20220302/02ad64688e8447f19c413eef6e0e97bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70 16]: /images/20220302/0e603b9850124709af66fd9aad3d57e6.png