# easy UI--布局，CRUD （7-20） --个人纪录

easy UI—高级 （7-20）

easyui常用的组件：

tabs页签（选项卡）：

/*
	tabs:选项卡
	closable: 关闭按钮
	iconCls:图标
	tools：添加工具栏
*/
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        tab1      //display:none;隐藏
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        tab3    
    </div>   
</div>  

        /*
            tabs:选项卡
            closable: 关闭按钮
            iconCls:图标
            tools：添加工具栏
            add： 添加一个未选中状态的选项卡面板
        */	
<div id="tt" class="easyui-tabs" tools="#tab-tools" style="width: 700px; height: 250px">
	   <div title="我是一个页签"></div>
	   <div title="我是一个页签"></div>
	   <div title="我是一个页签" iconCls='icon-help' closable=true></div>
	</div>


// 添加一个未选中状态的选项卡面板
$('#tt').tabs('add',{
	title: '新选项卡面板',
	selected: false
    closable:true //这个是给页签添加 ‘X’ 按钮
});

// 在索引为2的位置上插入一个选项卡面板
$('#tt').tabs('add',{
	title: '插入的选项卡面板',
	index: 2  //指定索引位置
     closable:true //这个是给页签添加 ‘X’ 按钮
});
//close:which 关闭一个选项卡面板,'which'参数可以是选项卡面板的标题或者索引，以指定要关闭的面板。 
//getSelected:获取选择的选项卡面板。下面的例子展示了如何获取选择的选项卡面板索引。
    var tab = $('#tt').tabs('getSelected');
    var index = $('#tt').tabs('getTabIndex',tab);
    alert(index);  //获取选项卡的索引
	$("$tt").tabs('close',index);  //根据索引进行关闭
	$("$tt").tabs('close','tab2');//根据标题进行关闭选项卡  

message消息提示：

​ 消息窗口提供了不同的消息框风格，包含alert(警告框), confirm(确认框), prompt(提示框),
​ progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果 或做一些自己需要处理的事情。

[外链图片转存失败(img-ZS3Cb2yz-1563611458524)(C:\Users\kira\AppData\Roaming\Typora\typora-user-images\1563524217691.png)]

// $.messager.alert 警告窗口使用方法：   （最常用的）
            $(function(){
                //消息提示 -- 经常使用的
               $.messager.alert('警告','警告消息'); 
            })
/*
    显示警告窗口。参数：
    title：在头部面板显示的标题文本。
    msg：显示的消息文本。
    icon：显示的图标图像。可用值有：error,question,info,warning。
    fn: 在窗口关闭的时候触发该回调函数。 
    代码示例：
    $.messager.alert('我的消息','这是一个提示信息！','info');
*/

            $.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
                if (r){    
                    alert('确认删除');    
                }    
            }); 

// $.messager.show 消息窗口使用方法

		$(function(){
            $.messager.show({
                title:'我的消息',
                msg:'消息将在5秒后关闭。',
                timeout:5000,
                showType:'slide'
            });
        })	
          
/*
    在屏幕右下角显示一条消息窗口。该选项参数是一个可配置的对象：
    showType：定义将如何显示该消息。可用值有：null,slide,fade,show。默认：slide。
    showSpeed：定义窗口显示的过度时间。默认：600毫秒。
    width：定义消息窗口的宽度。默认：250px。
    height：定义消息窗口的高度。默认：100px。
    title：在头部面板显示的标题文本。
    msg：显示的消息文本。
    style：定义消息窗体的自定义样式。
    timeout：如果定义为0，消息窗体将不会自动关闭，除非用户关闭他。如果定义成非0的树，消息窗体将在超时后自动关闭。默认：4秒。	
*/
          
       $(function(){
            // 消息将显示在顶部中间
            $.messager.show({
                title:'我的消息',
                msg:'消息将在4秒后关闭。',
                showType:'show',
                style:{
                    right:'',
                    top:document.body.scrollTop+document.documentElement.scrollTop,
                    bottom:''
                }
            });
        })



        setTimeout(function(){  
            $.messager.show({
                 title:'温馨提示',
                 width:350,
                 showSpeed:5000,
                 msg:'你在不好好学习,就只有天天在家撸',
                 showType:'slide',  //show=从右下角往左上角    slide=滑动  fade=淡入
                 timeout:0
            });
        },3000);   //setTimeout设置一个定时器

// $.messager.confirm 确认框使用方法
        $.messager.confirm('确认对话框', '您想要退出该系统吗？', function(r){
            if (r){
                // 退出操作;
            }
        });
/*
        显示一个包含“确定”和“取消”按钮的确认消息窗口。参数：
        title：在头部面板显示的标题文本。
        msg：显示的消息文本。
        fn(b): 当用户点击“确定”按钮的时侯将传递一个true值给回调函数，否则传递一个false值。 
*/

//$.messager.prompt 提示输入框使用方法
/*
        显示一个用户可以输入文本的并且带“确定”和“取消”按钮的消息窗体。参数：
        title：在头部面板显示的标题文本。
        msg：显示的消息文本。
        fn(val): 在用户输入一个值参数的时候执行的回调函数。 
        代码示例：
 */

        $.messager.prompt('提示信息', '请输入你的姓名：', function(r){
            if (r){
                alert('你的姓名是：' + r);
            }
        });

//$.messager.progress  进度消息框  （读取进度条）
/*
            显示一个进度消息窗体。
            属性定义为：
            title：在头部面板显示的标题文本。默认：空。
            msg：显示的消息文本。默认：空。 
            text：在进度条上显示的文本。默认：undefined。
            interval：每次进度更新的间隔时间。默认：300毫秒。

            方法定义为：
            bar：获取进度条对象。
            close：关闭进度窗口。

            代码示例：
*/
            //显示进度消息窗口。
                $.messager.progress(); 
            //关闭进度消息窗口。
                $.messager.progress('close');

form表单组件：

<form id="ff" method="post">   
    <div>   
        <label for="name">Name:</label>   
        <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />   
    </div>   
    <div>   
        <label for="email">Email:</label>   
        <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />   
    </div>     
</form>  

<body>
	<h2>Load Form Data</h2>
	<p>Click the buttons below to load form data.</p>
	<div style="margin:20px 0;">
		<a href="javascript:void(0)" class="easyui-linkbutton" 
		onclick="loadLocal()">加载本地数据</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" 
		onclick="loadRemote()">加载远程数据</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" 
		onclick="clearForm()">清理</a>
	</div>
	<div id="bs">
		<a class="easyui-linkbutton" iconCls="icon-ok" onclick="$('#ff').submit();">
            这种是直接在按钮里面提交[方式一]</a>    

		<a class="easyui-linkbutton" iconCls="icon-ok" id="submitBtn">
            这种是绑定事件提交[方式二]</a>
	</div>
	
<div id="Employee Dialog" class="easyui-dialog"
	style="width: 300px; height: 300px; padding: 10px"
	data-options="title:'用户信息',buttons:'#bs'">
	
		
	    <form id="ff" method="post">
	    	<table cellpadding="5">
	    		<tr>
	    			<td>Name:</td>
	    			<td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
	    		</tr>
	    		<tr>
	    			<td>Email:</td>
	    			<td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
	    		</tr>
	    		<tr>
	    			<td>Subject:</td>
	    			<td><input class="easyui-textbox" type="text" name="subject" data-options="required:true"></input></td>
	    		</tr>
	    		<tr>
	    			<td>Message:</td>
	    			<td><input class="easyui-textbox" name="message" data-options="multiline:true" style="height:60px"></input></td>
	    		</tr>
	    		
	    	</table>
	    </form>
	   
	</div>
	<script>
		function loadLocal(){  //本地加载
			$('#ff').form('load',{
				name:'myname',
				email:'mymail@gmail.com',
				subject:'subject',
				message:'message',
				language:'en'
			});
		}
		function loadRemote(){  //远程加载 必须要标准的json格式与文件
			$('#ff').form('load', 'form_data1.json');
		}
		function clearForm(){  //清理数据
			$('#ff').form('clear');
		}
		
		$(function(){
			
				$('#ff').form({
					url:"/xxxx",
					//数据提交成功后执行 (不管操作是否成功或失败).
					success : function(data) {
						//data 是一个json字符串,我们需要通过$.parseJSON转换为JSON对象.
						data = '{"msg":"消息","success":"操作成功"}';
						data = $.parseJSON(data);
						if(data.success){
							$.messager.alert('Info', "保存成功", 'info');	
						}else{
							$.messager.alert('Error', data.msg, 'error');
						}
					}
				});
				
				
				
				$("#submitBtn").on('click',function(){
					$('#ff').submit();
				})
				
		});
	</script>
</body>

两种提交方式

//方式一：  submit()分为两步
            $('#ff').form({    
                url:...,    
                onSubmit: function(){    
                    // do some check    
                    // return false to prevent submit;    
                },    
                success:function(data){    
                    alert(data)    
                }    
            });    
            // submit the form    
            $('#ff').submit();  
//方式二：	submit()一步到位
               $('#ff').form('submit', {    
                url:...,    
                onSubmit: function(){    
                    // do some check    
                    // return false to prevent submit;    
                },    
                success:function(data){    
                    alert(data)    
                }    
            });  

dialog（对话框）组件：

​ 该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。

[外链图片转存失败(img-1QA26RUd-1563611458527)(file:///C:\Users\kira\AppData\Roaming\feiq\RichOle\538418131.bmp)]

DataGrid表格组件：

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

/*
	toolbar: 引入工具条
	fitColumns：自适应列
	rownumbers：行数
	striped：斑马线  （默认为false）
	pagination：分页
	也可以使用JS方式远程引入
*/
$("#yy").datagrid({
    method:'get',  //一定要get提交才行
    url:data1.json
})


//方式二：
<table id="dg"></table>  

$('#dg').datagrid({    
    url:'datagrid_data.json',    
    columns:[[    
        {field:'code',title:'代码',width:100},    
        {field:'name',title:'名称',width:100},    
        {field:'price',title:'价格',width:100,align:'right'}    
    ]]    
});  


//方式三： 加载
$('#dg').datagrid('load', {    
    name: 'easyui',    
    address: 'ho'   
}); 


/*
formatter
单元格formatter(格式化器)函数，带3个参数：
value：字段值。
row：行记录数据。
index: 行索引。 
*/

//代码示例：
$('#dg').datagrid({
	columns:[[
		{field:'listprice',title:'List Price', width:80, align:'right',
			styler: function(value,row,index){
				if (value < 20){
					return 'background-color:#ffee00;color:red;';
				}
			}
		}
	]]
});

// modal:true 模态框 添加对话框的时候不能点击背景框的内容
/*
ValidateBox（验证框）validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值，它将会更改输入框的背景颜色，并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。 
*/

//通过标签创建验证框。
<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />  

    
 //使用Javascript创建验证框。
<input id="vv" />  

$('#vv').validatebox({    
    required: true,    
    validType: 'email'   
});  



//检查密码和确认密码是否相同。
$.extend($.fn.validatebox.defaults.rules, {    
    equals: {    
        validator: function(value,param){    
            return value == $(param[0]).val();    
        },    
        message: 'Field do not match.'   
    }    
});  

<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" />   
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"     
    required="required" validType="equals['#pwd']" />  


/*
验证规则
验证规则是根据使用需求和验证类型属性来定义的，这些规则已经实现：

email：匹配E-Mail的正则表达式规则。
url：匹配URL的正则表达式规则。
length[0,100]：允许在x到x之间个字符。
remote['http://.../action.do','paramName']：发送ajax请求需要验证的值，当成功时返回true。
*/
        
        
        
  /*
   自定义验证规则，需要重写$.fn.validatebox.defaults.rules中定义的验证器函数和无效消息。例如，定	义一个最小长度(minLength)的自定义验证： */

    $.extend($.fn.validatebox.defaults.rules, {    
        minLength: {    
            validator: function(value, param){    
                return value.length >= param[0];    
            },    
            message: 'Please enter at least {0} characters.'   
        }    
    });  

   // 现在你可以在输入框中限制最小长度为5的自定义最小长度验证了：
    <input class="easyui-validatebox" data-options="validType:'minLength[5]'">  	
 //validate none 做表单字段验证，当所有字段都有效的时候返回true。该方法使用validatebox(验证框)插件。 
/*
enableValidation none 启用验证。 （启用密码验证）
disableValidation none 禁用验证。（禁用密码验证）
*/

进度条组件：

layout布局组件：

综合练习CRUD 思想很重要：