初试JqueryEasyUI（附Demo）[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

写在前面

准备
布局Layout
菜单树Tree
内容页Tabs
右键菜单Menu
表单Form
对话框Dialog
示例Demo下载

　　关于easyui不多说，对于我们这样没有美术功底的程序员来说，简直是大大的福利，园里面也有不少人在用，自己在整理一个个站，后台管理要用，正好可以学习下。网上找了相关的教程什么的，但是发现还是官网上的demo讲的狠详细，还有就是下载后的demo示例，但都是某个控件示例，很遗憾，没有整个系统的demo。

　　下面我们就一步一步来创建，在做的过程也有许多的问题，对于菜鸟的我们来说，享受其中才是最重要的。

　　自己动手，丰衣足食。

一步一个脚印

1，准备

　　http://www.jeasyui.com/download/index.php下载最新的easyui包，里面有个demo文件夹，开发的时候尽量别删了，我们在做的过程中可以参照里面的demo示例，使用easyui需要引用下面四个css和js：

1     <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
2     <link href="EasyUI/themes/icon.css" rel="stylesheet" />
3     <script src="EasyUI/jquery.min.js"></script>
4     <script src="EasyUI/jquery.easyui.min.js"></script>

　　第一个easyui.css是基本的样式，我们在themes文件夹下会发现有几种皮肤，可以切换样式更换不同的控件风格。

　　第二个icon.css是图标样式，增加图标按照已有规则创建，下面两个js引用就不多说了。

2，布局Layout

　　后台管理系统一般都是分为四个部分，上部是logo或标题，左部是菜单，下部是版权信息，右部是内容信息。在easyui中我们可以使用Layout进行布局，在demo文件夹-Layout文件夹下的basic.html，基本上是我们需要的效果，复制一下，把高度和宽度修改一下（设置百分比）：

初试JqueryEasyUI（附Demo）[通俗易懂]

　　但是浏览一下会发现页面什么也没有，当时很莫名奇妙，试了好久才发现，class=”easyui-layout”必须放在body标签里面，通过上面截图可以看到north、south、west、east和center分别代表五个部分，我们不需要east导航可以直接删掉，简单修改下就是我们想要的效果，示例代码：

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="EasyUIDemo.WebForm2" %>  2  3 <!DOCTYPE html>  4  5 <html xmlns="http://www.w3.org/1999/xhtml">  6 <head id="Head1" runat="server">  7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  8 <title></title>  9 <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" /> 10 <link href="EasyUI/themes/icon.css" rel="stylesheet" /> 11 <link href="css/admin.css" rel="stylesheet" /> 12 <script src="EasyUI/jquery.min.js"></script> 13 <script src="EasyUI/jquery.easyui.min.js"></script> 14 </head> 15 <body class="easyui-layout"> 16 <div data-options="region:'north',border:false" style="height: 74px; background: #2596ea; padding: 10px"> 17 <img src="images/logo.png" />EasyUIDemo 18 </div> 19 <div data-options="region:'south',border:false" style="height: 23px;"> 20 <div class="footer">EasyUIDemo</div> 21 </div> 22 <div data-options="region:'west',split:true" title="West" style="width: 170px;"></div> 23 <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'"> 24 <table class="easyui-datagrid" 25  data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true"> 26 <thead> 27 <tr> 28 <th data-options="field:'itemid'" width="80">Item ID</th> 29 <th data-options="field:'productid'" width="100">Product ID</th> 30 <th data-options="field:'listprice',align:'right'" width="80">List Price</th> 31 <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th> 32 <th data-options="field:'attr'" width="150">Attribute</th> 33 <th data-options="field:'status',align:'center'" width="50">Status</th> 34 </tr> 35 </thead> 36 </table> 37 </div> 38 </body> 39 </html>

View Code

　　效果：

3，菜单树Tree

　　基本的布局创建好了之后，我们需要在左部添加菜单树，我们选取的是demo文件夹-tree文件夹下的lines.html，复制一下添加在west左部div下，lines示例是从json文件中读取树的，我们可以从basic.html中看到创建tree的格式，state:’closed’表示此接单关闭，默认是打开。

　　关于tree自定义节点图标，icons.html是自定义节点图标示例，但是从json读取的，格式为：”iconCls”:”icon-remove”；运行可以看到源代码：

　　当时设置以为在span标签设置图标样式，但是并不起作用，花了很多时间尝试，发现原来要在li标签设置，通过这个示例需要提醒大家的是，在用easyui布局的时候，不要查看样式布局，因为运行后都是easyui生成的源代码，并不是原始的，按照这个设置起来会有些问题。

　　简单设置一下，就是我们要的效果，示例代码：

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="EasyUIDemo.WebForm2" %>  2  3 <!DOCTYPE html>  4  5 <html xmlns="http://www.w3.org/1999/xhtml">  6 <head id="Head1" runat="server">  7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  8 <title></title>  9 <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" /> 10 <link href="EasyUI/themes/icon.css" rel="stylesheet" /> 11 <link href="css/admin.css" rel="stylesheet" /> 12 <script src="EasyUI/jquery.min.js"></script> 13 <script src="EasyUI/jquery.easyui.min.js"></script> 14 </head> 15 <body class="easyui-layout"> 16 <div data-options="region:'north',border:false" style="height: 74px; background: #2596ea; padding: 10px"> 17 <img src="images/logo.png" />EasyUIDemo 18 </div> 19 <div data-options="region:'south',border:false" style="height: 23px;"> 20 <div class="footer">EasyUIDemo</div> 21 </div> 22 <div data-options="region:'west',split:true" title="West" style="width: 170px;"> 23 <div class="easyui-accordion" data-options="fit:true,border:false"> 24 <div title="系统设置1" data-options="selected:true"> 25 <div style="margin: 5px"> 26 <ul class="tree easyui-tree" data-options="animate:true,lines:true"> 27 <li data-options="iconCls:'icon-group'"> 28 <span>基本设置</span> 29 <ul> 30 <li data-options="iconCls:'icon-group_add'"> 31 <span>test1</span> 32 </li> 33 <li data-options="iconCls:'icon-group_delete'"> 34 <span>test2</span> 35 </li> 36 <li data-options="iconCls:'icon-group_edit'"> 37 <span>test3</span> 38 </li> 39 </ul> 40 </li> 41 <li data-options="state:'closed',iconCls:'icon-joystick'"> 42 <span>系统设置</span> 43 <ul> 44 <li data-options="iconCls:'icon-joystick_add'"> 45 <span>test4</span> 46 </li> 47 </ul> 48 </li> 49 </ul> 50 </div> 51 </div> 52 <div title="系统设置2" style="padding: 10px;"> 53  content2 54 </div> 55 <div title="系统设置3" style="padding: 10px"> 56  content3 57 </div> 58 </div> 59 </div> 60 <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'"> 61 <table class="easyui-datagrid" 62  data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true"> 63 <thead> 64 <tr> 65 <th data-options="field:'itemid'" width="80">Item ID</th> 66 <th data-options="field:'productid'" width="100">Product ID</th> 67 <th data-options="field:'listprice',align:'right'" width="80">List Price</th> 68 <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th> 69 <th data-options="field:'attr'" width="150">Attribute</th> 70 <th data-options="field:'status',align:'center'" width="50">Status</th> 71 </tr> 72 </thead> 73 </table> 74 </div> 75 </body> 76 </html>

View Code

　　效果：

4，内容页Tabs

　　菜单tree创建好了，接下来就是center部分的内容页，我们选取的是demo文件夹-tabs文件夹下的tabstools.html，此示例有tools方便我们扩展，在做添加tabs的时候花了很多时间，一个是tabs添加center里面，另一个是tools样式问题，关于第一个还好，经过多次尝试，嵌套里面去了，第二个问题我们先看下截图：

　　不知怎的？在ie是可以，谷歌和火狐不行，去掉样式height: 26px;就是好的，但高度就不对了，尝试了好久，最后没办法，创建一个新的webform，一段一段代码贴过去测试，最后发现是头部标签：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>问题，新建的webform：<!DOCTYPE html>就是好的，真没想到是这样的原因导致。

　　下面示例代码中的addPanel()和removePanel()是添加tab的js方法，当然也可以在页面加载的时候动态的创建tab，需要注意的是在tabs_div中有data-options=”tools:’#tab-tools'”属性，tab-tools要和下面tools的id对应，表示tabs对应的tools，设置好了自动设置样式，不需要你手动的设置。

　　示例代码：

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="EasyUIDemo.WebForm1" %>  2  3 <!DOCTYPE html>  4  5 <html xmlns="http://www.w3.org/1999/xhtml">  6 <head runat="server">  7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  8 <title></title>  9 <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" /> 10 <link href="EasyUI/themes/icon.css" rel="stylesheet" /> 11 <link href="css/admin.css" rel="stylesheet" /> 12 <script src="EasyUI/jquery.min.js"></script> 13 <script src="EasyUI/jquery.easyui.min.js"></script> 14 </head> 15 <body class="easyui-layout"> 16 <div data-options="region:'north',border:false" style="height: 74px; background: #2596ea; padding: 10px"> 17 <img src="images/logo.png" />EasyUIDemo 18 </div> 19 <div data-options="region:'west',split:true,title:'导航菜单'" style="width: 170px;"> 20 <div class="easyui-accordion" data-options="fit:true,border:false"> 21 <div title="系统设置1" data-options="selected:true"> 22 <div style="margin: 5px"> 23 <ul class="tree easyui-tree" data-options="animate:true,lines:true"> 24 <li data-options="iconCls:'icon-group'"> 25 <span>基本设置</span> 26 <ul> 27 <li data-options="iconCls:'icon-group_add'"> 28 <span>test1</span> 29 </li> 30 <li data-options="iconCls:'icon-group_delete'"> 31 <span>test2</span> 32 </li> 33 <li data-options="iconCls:'icon-group_edit'"> 34 <span>test3</span> 35 </li> 36 </ul> 37 </li> 38 <li data-options="state:'closed',iconCls:'icon-joystick'"> 39 <span>系统设置</span> 40 <ul> 41 <li data-options="iconCls:'icon-joystick_add'"> 42 <span>test4</span> 43 </li> 44 </ul> 45 </li> 46 </ul> 47 </div> 48 </div> 49 <div title="系统设置2" style="padding: 10px;"> 50  content2 51 </div> 52 <div title="系统设置3" style="padding: 10px"> 53  content3 54 </div> 55 </div> 56 </div> 57 <div data-options="region:'south',border:false" style="height: 23px;"> 58 <div class="footer">EasyUIDemo</div> 59 </div> 60 <div data-options="region:'center'"> 61 <div id="tabs" class="easyui-tabs" data-options="tools:'#tab-tools'"> 62 <div title="主页" data-options="iconCls:'icon-house'" style="padding: 10px; height: 100%;">主页</div> 63 </div> 64 <div id="tab-tools"> 65 <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a> 66 <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a> 67 </div> 68 </div> 69 <script type="text/javascript"> 70 var index = 0; 71 function addPanel() { 72  index++; 73  $('#tabs').tabs('add', { 74  title: 'Tab' + index, 75  content: '<div style="padding:10px">Content' + index + '</div>', 76  closable: true 77  }); 78  } 79 function removePanel() { 80 var tab = $('#tabs').tabs('getSelected'); 81 if (tab) { 82 var index = $('#tabs').tabs('getTabIndex', tab); 83  $('#tabs').tabs('close', index); 84  } 85  } 86 </script> 87 </body> 88 </html>

View Code

　　效果：

5，右键菜单Menu

　　tab创建好之后，我们需要在tab添加右键menu，以便我们的tab操作，demo文件夹-menu文件夹下的basic.html，我们把代码复制过来，可以看到先创建一个div指示右键menu，js绑定右击代码：

1 $(function(){ 2 $(document).bind('contextmenu',function(e){ 3  e.preventDefault(); 4 $('#mm').menu('show', { 5  left: e.pageX, 6  top: e.pageY 7  }); 8  }); 9 });

　　上面代码是绑定区域是整个页面，我们需要修改一下：把$(document) 改成$(“.tabs-inner”)，.tabs-inner是每个tab的css，查看页面源代码我们就可以看到。

　　绑定右击事件后，下面就是关闭tab了，easyui提供了关闭tab的接口：$(‘#tabs’).tabs(‘close’, tab标题);根据此接口我们可以扩展其他的菜单，比如关闭全部，除此之外全部关闭等等，就像vs的tab管理一样。

　　tab管理代码：

 1 //关闭tab  2 function closeTab(action) {  3 var alltabs = $('#tabs').tabs('tabs');  4 var currentTab = $('#tabs').tabs('getSelected');  5 var allTabtitle = [];  6 $.each(alltabs, function (i, n) {  7 allTabtitle.push($(n).panel('options').title);  8  })  9 switch (action) { 10 case "refresh": 11 var iframe = $(currentTab.panel('options').content); 12 var src = iframe.attr('src'); 13 $('#tabs').tabs('update', { 14  tab: currentTab, 15  options: { 16  content: createFrame(src) 17  } 18  }) 19 break; 20 case "close": 21 var currtab_title = currentTab.panel('options').title; 22 $('#tabs').tabs('close', currtab_title); 23 break; 24 case "closeall": 25 $.each(allTabtitle, function (i, n) { 26 if (n != onlyOpenTitle) { 27 $('#tabs').tabs('close', n); 28  } 29  }); 30 break; 31 case "closeother": 32 var currtab_title = currentTab.panel('options').title; 33 $.each(allTabtitle, function (i, n) { 34 if (n != currtab_title && n != onlyOpenTitle) { 35 $('#tabs').tabs('close', n); 36  } 37  }); 38 break; 39 case "closeright": 40 var tabIndex = $('#tabs').tabs('getTabIndex', currentTab); 41 42 if (tabIndex == alltabs.length - 1) { 43 alert('亲，后边没有啦 ^@^!!'); 44 return false; 45  } 46 $.each(allTabtitle, function (i, n) { 47 if (i > tabIndex) { 48 if (n != onlyOpenTitle) { 49 $('#tabs').tabs('close', n); 50  } 51  } 52  }); 53 break; 54 case "closeleft": 55 var tabIndex = $('#tabs').tabs('getTabIndex', currentTab); 56 if (tabIndex == 1) { 57 alert('亲，前边那个上头有人，咱惹不起哦。 ^@^!!'); 58 return false; 59  } 60 $.each(allTabtitle, function (i, n) { 61 if (i < tabIndex) { 62 if (n != onlyOpenTitle) { 63 $('#tabs').tabs('close', n); 64  } 65  } 66  }); 67 break; 68 case "exit": 69 $('#closeMenu').menu('hide'); 70 break; 71  } 72 }

　　整合js代码：

 1 var onlyOpenTitle = "主页";//不允许关闭的标签的标题  2 $(function () {  3  tabClose();  4  tabCloseEven();  5 })  6  7 function tabClose() {  8 /*双击关闭TAB选项卡*/  9 $(".tabs-inner").dblclick(function () {  10 var subtitle = $(this).children(".tabs-closable").text();  11 $('#tabs').tabs('close', subtitle);  12  })  13 /*为选项卡绑定右键*/  14 $(".tabs-inner").bind('contextmenu', function (e) {  15 $('#mm').menu('show', {  16  left: e.pageX,  17  top: e.pageY  18  });  19 var subtitle = $(this).children(".tabs-closable").text();  20 $('#mm').data("currtab", subtitle);  21 $('#tabs').tabs('select', subtitle);  22 return false;  23  });  24 }  25 //绑定右键菜单事件  26 function tabCloseEven() {  27 $('#mm').menu({  28 onClick: function (item) {  29  closeTab(item.id);  30  }  31  });  32 return false;  33 }  34  35 //创建/移除tab  36 var index = 0;  37 function addTab(subtitle, url, icon) {  38 index++;  39 if (!$('#tabs').tabs('exists', subtitle)) {  40 $('#tabs').tabs('add', {  41 title: 'Tab' + index,  42 content: createFrame('http://www.baidu.com/'),  43 closable: true,  44 icon: ''  45  });  46 } else {  47 $('#tabs').tabs('select', subtitle);  48 $('#mm-tabupdate').click();  49  }  50  tabClose();  51 }  52 function removeTab() {  53 var tab = $('#tabs').tabs('getSelected');  54 if (tab) {  55 var index = $('#tabs').tabs('getTabIndex', tab);  56 $('#tabs').tabs('close', index);  57  }  58 }  59 //创建Frame  60 function createFrame(url) {  61 var s = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';  62 return s;  63 }  64  65 //关闭tab  66 function closeTab(action) {  67 var alltabs = $('#tabs').tabs('tabs');  68 var currentTab = $('#tabs').tabs('getSelected');  69 var allTabtitle = [];  70 $.each(alltabs, function (i, n) {  71 allTabtitle.push($(n).panel('options').title);  72  })  73 switch (action) {  74 case "refresh":  75 var iframe = $(currentTab.panel('options').content);  76 var src = iframe.attr('src');  77 $('#tabs').tabs('update', {  78  tab: currentTab,  79  options: {  80  content: createFrame(src)  81  }  82  })  83 break;  84 case "close":  85 var currtab_title = currentTab.panel('options').title;  86 $('#tabs').tabs('close', currtab_title);  87 break;  88 case "closeall":  89 $.each(allTabtitle, function (i, n) {  90 if (n != onlyOpenTitle) {  91 $('#tabs').tabs('close', n);  92  }  93  });  94 break;  95 case "closeother":  96 var currtab_title = currentTab.panel('options').title;  97 $.each(allTabtitle, function (i, n) {  98 if (n != currtab_title && n != onlyOpenTitle) {  99 $('#tabs').tabs('close', n); 100  } 101  }); 102 break; 103 case "closeright": 104 var tabIndex = $('#tabs').tabs('getTabIndex', currentTab); 105 106 if (tabIndex == alltabs.length - 1) { 107 alert('亲，后边没有啦 ^@^!!'); 108 return false; 109  } 110 $.each(allTabtitle, function (i, n) { 111 if (i > tabIndex) { 112 if (n != onlyOpenTitle) { 113 $('#tabs').tabs('close', n); 114  } 115  } 116  }); 117 break; 118 case "closeleft": 119 var tabIndex = $('#tabs').tabs('getTabIndex', currentTab); 120 if (tabIndex == 1) { 121 alert('亲，前边那个上头有人，咱惹不起哦。 ^@^!!'); 122 return false; 123  } 124 $.each(allTabtitle, function (i, n) { 125 if (i < tabIndex) { 126 if (n != onlyOpenTitle) { 127 $('#tabs').tabs('close', n); 128  } 129  } 130  }); 131 break; 132 case "exit": 133 $('#closeMenu').menu('hide'); 134 break; 135  } 136 }

View Code

　　html代码：

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EasyUIDemo._Default" %>  2  3 <!DOCTYPE html>  4  5 <html xmlns="http://www.w3.org/1999/xhtml">  6 <head runat="server">  7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  8 <title></title>  9 <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" /> 10 <link href="EasyUI/themes/icon.css" rel="stylesheet" /> 11 <link href="css/admin.css" rel="stylesheet" /> 12 <script src="EasyUI/jquery.min.js"></script> 13 <script src="EasyUI/jquery.easyui.min.js"></script> 14 <script src="js/common.js"></script> 15 </head> 16 <body class="easyui-layout" data-options="fit:true,scroll:'no'"> 17 <div data-options="region:'north',border:false" style="height: 74px; background: #2596ea; padding: 10px"> 18 <img src="images/logo.png" />EasyUIDemo 19 </div> 20 <div data-options="region:'west',split:true,title:'导航菜单'" style="width: 170px;"> 21 <div class="easyui-accordion" data-options="fit:true,border:false"> 22 <div title="系统设置1" data-options="selected:true"> 23 <div style="margin: 5px"> 24 <ul class="tree easyui-tree" data-options="animate:true,lines:true"> 25 <li data-options="iconCls:'icon-group'"> 26 <span>基本设置</span> 27 <ul> 28 <li data-options="iconCls:'icon-group_add'"> 29 <span>test1</span> 30 </li> 31 <li data-options="iconCls:'icon-group_delete'"> 32 <span>test2</span> 33 </li> 34 <li data-options="iconCls:'icon-group_edit'"> 35 <span>test3</span> 36 </li> 37 </ul> 38 </li> 39 <li data-options="state:'closed',iconCls:'icon-joystick'"> 40 <span>系统设置</span> 41 <ul> 42 <li data-options="iconCls:'icon-joystick_add'"> 43 <span>test4</span> 44 </li> 45 </ul> 46 </li> 47 </ul> 48 </div> 49 </div> 50 <div title="系统设置2" style="padding: 10px;"> 51  content2 52 </div> 53 <div title="系统设置3" style="padding: 10px"> 54  content3 55 </div> 56 </div> 57 </div> 58 <div data-options="region:'south',border:false" style="height: 23px;"> 59 <div class="footer">EasyUIDemo</div> 60 </div> 61 <div data-options="region:'center'"> 62 <div id="tabs" class="easyui-tabs" data-options="tools:'#tab-tools',fit:true,border:false" > 63 <div title="主页" data-options="iconCls:'icon-house'" style="padding: 10px;">主页</div> 64 </div> 65 <div id="tab-tools"> 66 <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addTab()"></a> 67 <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removeTab()"></a> 68 </div> 69 </div> 70 <div id="mm" class="easyui-menu" style="width: 150px;"> 71 <div id="refresh" data-options="iconCls:'icon-arrow_refresh'">刷新</div> 72 <div class="menu-sep"></div> 73 <div id="close">关闭</div> 74 <div id="closeall">全部关闭</div> 75 <div id="closeother">除此之外全部关闭</div> 76 <div class="menu-sep"></div> 77 <div id="closeright">当前页右侧全部关闭</div> 78 <div id="closeleft">当前页左侧全部关闭</div> 79 <div class="menu-sep"></div> 80 <div id="exit">退出</div> 81 </div> 82 </body> 83 </html>

View Code

　　效果：

6，表单Form

　　内容管理少不了form表单，其实在easyui使用form表单最简单，样式、验证、布局等都是提供的，只要我们简单设置一下属性就可以了，demo文件夹-form文件夹下的basic.html，我们看下文本框的代码：

1 <input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input>

　　easyui-validatebox指示验证文本控件，data-options=”required:true,validType:’email'”，required表示文本框必输，validType表示验证文本框方式，当然也支持其他url、电话验证等，详细的验证信息可以在demo文件夹-validatebox文件夹查看示例。form表单没什么说的，大家看示例demo就可以找到想要的东西。

　　这边需要注意的是验证默认是英文，中文的话需要引用中文包：<script src=”EasyUI/locale/easyui-lang-zh_CN.js”></script>

　　html代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2 <html xmlns="http://www.w3.org/1999/xhtml">  3 <head>  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  5 <title>EasyUI from</title>  6 <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />  7 <link href="EasyUI/themes/icon.css" rel="stylesheet" />  8 <link href="css/admin.css" rel="stylesheet" />  9 <script src="EasyUI/jquery.min.js"></script> 10 <script src="EasyUI/jquery.easyui.min.js"></script> 11 <script src="EasyUI/locale/easyui-lang-zh_CN.js"></script> 12 </head> 13 <body> 14 <div style="margin: 10px 0;"></div> 15 <div style="padding: 10px 0 10px 60px"> 16 <form id="ff" method="post"> 17 <table> 18 <tr> 19 <td>名称:</td> 20 <td> 21 <input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td> 22 </tr> 23 <tr> 24 <td>邮箱:</td> 25 <td> 26 <input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td> 27 </tr> 28 <tr> 29 <td>标题:</td> 30 <td> 31 <input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td> 32 </tr> 33 <tr> 34 <td>内容:</td> 35 <td> 36 <textarea name="message" style="height: 60px;"></textarea></td> 37 </tr> 38 <tr> 39 <td>语言:</td> 40 <td> 41 <select class="easyui-combobox" name="language"> 42 <option value="ar">Arabic</option> 43 <option value="bg">Bulgarian</option> 44 <option value="ca">Catalan</option> 45 <option value="zh-cht">Chinese Traditional</option> 46 <option value="cs">Czech</option> 47 <option value="da">Danish</option> 48 <option value="nl">Dutch</option> 49 <option value="en" selected="selected">English</option> 50 <option value="et">Estonian</option> 51 <option value="fi">Finnish</option> 52 <option value="fr">French</option> 53 <option value="de">German</option> 54 <option value="el">Greek</option> 55 <option value="ht">Haitian Creole</option> 56 <option value="he">Hebrew</option> 57 <option value="hi">Hindi</option> 58 <option value="mww">Hmong Daw</option> 59 <option value="hu">Hungarian</option> 60 <option value="id">Indonesian</option> 61 <option value="it">Italian</option> 62 <option value="ja">Japanese</option> 63 <option value="ko">Korean</option> 64 <option value="lv">Latvian</option> 65 <option value="lt">Lithuanian</option> 66 <option value="no">Norwegian</option> 67 <option value="fa">Persian</option> 68 <option value="pl">Polish</option> 69 <option value="pt">Portuguese</option> 70 <option value="ro">Romanian</option> 71 <option value="ru">Russian</option> 72 <option value="sk">Slovak</option> 73 <option value="sl">Slovenian</option> 74 <option value="es">Spanish</option> 75 <option value="sv">Swedish</option> 76 <option value="th">Thai</option> 77 <option value="tr">Turkish</option> 78 <option value="uk">Ukrainian</option> 79 <option value="vi">Vietnamese</option> 80 </select> 81 </td> 82 </tr> 83 </table> 84 </form> 85 </div> 86 <div style=" padding: 5px; margin-left:100px;"> 87 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a> 88 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清除</a> 89 </div> 90 <script> 91 function submitForm() { 92  $('#ff').form('submit'); 93  } 94 function clearForm() { 95  $('#ff').form('clear'); 96  } 97 </script> 98 </body> 99 </html>

View Code

　　效果：

7，对话框Dialog

　　使用dialog和使用form一样简单，demo文件夹-Dialog文件夹下的toolbarbuttons.html，我们创建一个表单提交后对话框提示。

 1 <div id="dlg" class="easyui-dialog" title="dialog" style="width: 250px; height: 120px; padding: 10px"  2  data-options="  3  iconCls: 'icon-save',  4  buttons: [{  5  text:'Ok',  6  iconCls:'icon-ok',  7  handler:function(){  8  alert('ok');  9  } 10  },{ 11  text:'Cancel', 12  handler:function(){ 13  alert('cancel');; 14  } 15  }] 16  "> 17  确认提交吗？ 18 </div>

　　在data-options-buttons选项，表示对话框下方的按钮集合，也有在标题下方的按钮集合，属性是toolbar，打开dialog代码：$(‘#dlg’).dialog(‘open’)，关闭参数改为：close即可。dialog里的内容可以嵌套div，也可以嵌套frame，这个可以随意扩展。

　　html代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2 <html xmlns="http://www.w3.org/1999/xhtml">  3 <head>  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  5 <title>EasyUI from</title>  6 <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />  7 <link href="EasyUI/themes/icon.css" rel="stylesheet" />  8 <link href="css/admin.css" rel="stylesheet" />  9 <script src="EasyUI/jquery.min.js"></script>  10 <script src="EasyUI/jquery.easyui.min.js"></script>  11 <script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>  12 </head>  13 <body>  14 <div style="margin: 10px 0;"></div>  15 <div style="padding: 10px 0 10px 60px">  16 <form id="ff" method="post">  17 <table>  18 <tr>  19 <td>名称:</td>  20 <td>  21 <input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>  22 </tr>  23 <tr>  24 <td>邮箱:</td>  25 <td>  26 <input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>  27 </tr>  28 <tr>  29 <td>标题:</td>  30 <td>  31 <input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td>  32 </tr>  33 <tr>  34 <td>内容:</td>  35 <td>  36 <textarea name="message" style="height: 60px;"></textarea></td>  37 </tr>  38 <tr>  39 <td>语言:</td>  40 <td>  41 <select class="easyui-combobox" name="language">  42 <option value="ar">Arabic</option>  43 <option value="bg">Bulgarian</option>  44 <option value="ca">Catalan</option>  45 <option value="zh-cht">Chinese Traditional</option>  46 <option value="cs">Czech</option>  47 <option value="da">Danish</option>  48 <option value="nl">Dutch</option>  49 <option value="en" selected="selected">English</option>  50 <option value="et">Estonian</option>  51 <option value="fi">Finnish</option>  52 <option value="fr">French</option>  53 <option value="de">German</option>  54 <option value="el">Greek</option>  55 <option value="ht">Haitian Creole</option>  56 <option value="he">Hebrew</option>  57 <option value="hi">Hindi</option>  58 <option value="mww">Hmong Daw</option>  59 <option value="hu">Hungarian</option>  60 <option value="id">Indonesian</option>  61 <option value="it">Italian</option>  62 <option value="ja">Japanese</option>  63 <option value="ko">Korean</option>  64 <option value="lv">Latvian</option>  65 <option value="lt">Lithuanian</option>  66 <option value="no">Norwegian</option>  67 <option value="fa">Persian</option>  68 <option value="pl">Polish</option>  69 <option value="pt">Portuguese</option>  70 <option value="ro">Romanian</option>  71 <option value="ru">Russian</option>  72 <option value="sk">Slovak</option>  73 <option value="sl">Slovenian</option>  74 <option value="es">Spanish</option>  75 <option value="sv">Swedish</option>  76 <option value="th">Thai</option>  77 <option value="tr">Turkish</option>  78 <option value="uk">Ukrainian</option>  79 <option value="vi">Vietnamese</option>  80 </select>  81 </td>  82 </tr>  83 </table>  84 </form>  85 </div>  86 <div style="padding: 5px; margin-left: 100px;">  87 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>  88 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清除</a>  89 </div>  90 <div id="dlg" class="easyui-dialog" title="dialog" style="width: 250px; height: 120px; padding: 10px"  91  data-options="  92  iconCls: 'icon-save',  93  buttons: [{  94  text:'Ok',  95  iconCls:'icon-ok',  96  handler:function(){  97  alert('ok');  98  }  99  },{ 100  text:'Cancel', 101  handler:function(){ 102  alert('cancel');; 103  } 104  }] 105  "> 106  确认提交吗？ 107 </div> 108 <script> 109  $(function () { 110  $('#dlg').dialog('close') 111  }) 112 function submitForm() { 113  $('#dlg').dialog('open') 114 //$('#ff').form('submit'); 115  } 116 function clearForm() { 117  $('#ff').form('clear'); 118  } 119 </script> 120 </body> 121 </html>

View Code

　　效果：

8，示例Demo下载

　　下载地址：http://pan.baidu.com/s/1c09YVi4

后记

　　easyui默认提供了几个icons的图标，在themes文件夹下的icons文件夹中，我们在做树菜单的时候会用到其他的小图标：

　　网上找了一个包，还蛮全的，分享给大家，下载地址：http://pan.baidu.com/s/1hqKGehQ

　　关于easyui简单demo就写到这里，下篇计划集合编辑器，在下篇计划把静态demo变成动态（asp.net、ef），创建一个简单的新闻发布系统demo，再下篇计划结合mvc，再下篇。。。最后应用到个站中，敬请期待。

　　如果你觉得本篇文章对你有所帮助，请点击右下部“推荐”，^_^

　　参考教程：

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/154844.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...

初试JqueryEasyUI（附Demo）[通俗易懂]

写在前面

一步一个脚印

1，准备

2，布局Layout

3，菜单树Tree

4，内容页Tabs

5，右键菜单Menu

6，表单Form

7，对话框Dialog

8，示例Demo下载

后记

相关推荐

负载均衡之反向代理[通俗易懂]

java钩子函数(javasocket钩子)

SEO技巧汇集

工作流程引擎：流程引擎对比「建议收藏」

matlab之极坐标绘图函数_如何用极坐标画图

mysql截取字符串并更新_mysql 截取字符串并 update select

发表回复