7-20easyUI2

1~~

.课程介绍 **

**1. 常用组件使用;（掌握）
选项卡
tabs:选项卡
closable：关闭按钮
iconCls:图标
tools:添加工具栏

function removePanel(){
				//获取选中的选项卡的索引
				var tab = $('#jj').tabs('getSelected');
				var index = $('#jj').tabs('getTabIndex',tab);
				
				$("#jj").tabs('close','Tab2');
			}

Messager（消息窗口）

//消息提示常用
				$.messager.alert('没钱了萨比:','不充钱就滚','info');
				//消息窗口(一般)
				//confirm确认框 -- (比较多)
				/*$.messager.confirm('删就删', '你删老子一个试试', function(r){
					if (r){
					    alert('老子打断你的腿。。。');
					}
				});*/
				//prompt
				/*$.messager.prompt('老子问你', '你叫什么名字：', function(r){
					if (r){
						alert('你的名字：' + r);
					}
				});*/
form表单组件

datagrid表格组件

layout布局组件

2. 综合案例;（掌握 思路 --第二个项目 CRUD–思路问题 js很多代码 ）
panel linkbutton tree menu**

**
布局

<div class="northCls" data-options="region:'north',split:true">
		      
		      <div style="font-size:30px;margin-top: 20px;float:left">
		         	源码游泳池
		       </div>
		       <div style="font-size:15px;float:right;margin-top:60px ;">
		       		欢迎<span style="color:red;">xxx美女</span>进入 
		       		<a href="#">出水</a>
		       </div>
		 </div>
		 <div data-options="region:'south',split:true" style="height:100px;">
		        可支持千人游泳的最新游泳池
		  </div>
		  <div id="treeMenu" data-options="region:'west',title:'菜单信息',split:true" style="width:230px;">
		        	主要存放菜单信息(树菜单)
		  </div>
		  <div id="tabsId" class="easyui-tabs" data-options="region:'center'" style="background:#eee;">
		 
		  </div>	

~~
树形菜单

$("#treeMenu").tree({
					url:'json/menuTree.json',
					//post要报错，乱码
					method:'get',
					onClick:function(node){
						//解决父级不应该添加选项卡
						if(node.url){
							//先判断选项卡里面是否存在当前的菜单，如果存在，不应该添加
							if(!$("#tabsId").tabs('exists',node.text)){
								//点击菜单的时候，添加选项卡
								$('#tabsId').tabs('add',{
									title: node.text,
									closable:true,
									content:"<iframe frameborder=0 style='width:100%;height:100%' src='"+node.url+"'></iframe>"
								});
							}else{
								//选择当前这个页签
								$('#tabsId').tabs('select',node.text);
							}
						}
						
					}
				});

增删改查，

<table id="employee-grid" class="easyui-datagrid"
       data-options="rownumbers:true,toolbar:'#tb',fit:true,singleSelect:true,collapsible:true,fitColumns:true,url:'json/employee.json',method:'get',pagination:true">
	    <thead>
		    <tr>
		        <th data-options="field:'username',width:80">用户名</th>
		        <th data-options="field:'email',width:80">邮箱</th>
		        <th data-options="field:'age',width:80,align:'right'">年龄</th>
		        <th data-options="field:'headImage',width:120,align:'right'" formatter='headImgFormatter'>头像</th>
		        <th data-options="field:'department',width:80" formatter='deptFormatter'>部门</th>
		    </tr>
	    </thead>
	    <tbody>
	    </tbody>
	</table>
	
		<div id="tb" style="padding:5px;height:auto">
		<div style="margin-bottom:5px">
			<a href="#" data-method='add' class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
			<a href="#" data-method='edit' class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
			<a href="#" data-method='remove' class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
		</div>
		<div>
			<form id="searchForm">
			用户名: <input id="username" name='username' class="easyui-textbox" style="width:80px">
			部门: 
			<input id="departmentId" name='deptmentId' class="easyui-combobox" data-options="    
	        method:'get',
	        valueField: 'id',    
	        textField: 'name',    
	        url: 'json/dept.json',
	        panelHeight:'auto'" /> 
			<a href="#" data-method='search' class="easyui-linkbutton" iconCls="icon-search">搜索</a>
			</form>
		</div>
	</div>
	
	
<!--准备弹出的dialog，中间装相应的form  modal:模态框  buttons：引用按钮-->
<div id="formDlg" class="easyui-dialog" style="width:300px" closed="true"
     data-options="title:'功能操作',modal:true,buttons:'#formButton'">
    <form id="operateForm" method="get">
    	<!-- 隐藏域-->
    	<input type="hidden" name="id"  />
        <table cellpadding="5">
            <tr>
                <td>用户名:</td>
                <td><input class="easyui-validatebox" type="text" name="username" data-options="required:true,validType:'length[4,12]'"></input></td>
            </tr>
            <tr pwd="true">
                <td>密码:</td>
                <td><input id="password" class="easyui-validatebox" type="password" name="password" data-options="required:true,validType:'minLength[6]'"></input></td>
            </tr>
            <tr pwd="true">
                <td>确认密码:</td>
                <td><input class="easyui-validatebox" type="password" name="configPassword"
                           validType="equals['#password','jquery']"
                           data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>邮件:</td>
                <td><input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input class="easyui-validatebox" name="age" data-options="required:true,validType:'integerRange[18,60]'"></input></td>
            </tr>
            <tr>
            	
                <td>部门:</td>
                <td>
                	
                    <select name="department.id" class="easyui-combobox" style="width:100px"
                            data-options="
                            method:'get',
                           required:true,
                           url:'json/dept.json',
                           valueField:'id',
                            textField:'name',
                            panelHeight:'auto'
                        "
                    >
                    </select>
                </td>
            </tr>
        </table>
    </form>

    <div id="formButton">
        <a href="#" class="easyui-linkbutton" data-method="save" data-options="iconCls:'icon-ok'">确定</a>
        <a href="#" class="easyui-linkbutton" onclick="$('#formDlg').dialog('close');" data-options="iconCls:'icon-cancel'">取消</a>
    </div>