EasyUI框架05——窗口

1.  Messager消息窗口

1.1 confirm确认框

easyUI的confirm默认是异步加载的，如何实现同步的效果了？可以利用函数来实现

例如：

Var 运行条件 = true;
Function fnc(){
    if( 逻辑条件 && 运行条件){
         //c = confirm("版本用途变更，是否保留版本测试页面已经创建的测试任务?");
         $.messager.defaults = { ok: "保留", cancel: "不保留" }; // 修改confirm默认按钮
                        $.messager.confirm('版本用途变更提示框', '版本用途变更，是否保留版本测试页面已经创建的测试任务?', function(r){
                                    if( r ){
                                                运行条件 =  false;
                                                fnc ();
                                    }  else {
                                                运行条件= false;
                                                fnc();
                                    }
                        });
            return ;
}

// 将运行条件状态还原
    运行条件 = true;

// 下面写逻辑代码
$.ajax({  …  });

}

1.2  Show提示框

$.messager.show({
              title:'消息',
              msg:"<span>"+ data.rtnMsg +"</span>",
              height:150,
              timeout:3000,
              showType:'show'
});

1.3 Alert弹出框

$.messager.alert("提示","<span>" + data.rtnMsg + "</span>");

2. Dialog

界面：

<div id="win" class="easyui-dialog" title="提示"  style="width: 400px; padding: 10px 20px; height: 410px;"
        closed="true" buttons="#dlg-buttons">                            
                <form action="#" method="post" id="editDialogForm">
                                <!-- 设置隐藏字段 -->
                                <input type="hidden" id="id" name="id" />
                                <input type="hidden" id="deptId" name="deptId" />
                                <table style="margin-top:-20px">
                                        <tr>
                                                <td width="200px">
                                                        <span class="diaFont">two：</span>
                                                        <span><font size="3" color="red">*</font></span>

                                                </td>

                                                <td id="deptNameTD">
                                                        <!-- <input type="text" id="dept_name" name="dept_name"  style="width:300px;" /> -->
                                                        <input id="deptName" class="easyui-combobox" name="deptName" panelAlign="400"  editable=true hasDownArrow=false width=300
                                                                data-options="
                                                                panelWidth:320,
                                                                valueField:'deptId',
                                                                textField:'deptName',
                                                                url:'’,
                                                                onSelect: function(rec){                                                                   $('#deptId').val(rec.deptId);
                                                                }
                                                                " /> 
                                                </td>
                                        </tr>
                                        <tr>
                                                <td>
                                                        <span class="diaFont">three：</span>
                                                        <span><font size="3" color="red">*</font></span>
                                                </td>
                                                <td>
                                                        <input type="text" id="threestavename" name="threestavename"  style="width:300px;" />
                                                </td>
                                        </tr>
                                        <tr>
                                                <td>
                                                        <span class="diaFont">four：</span>
                                                </td>
                                                <td>
                                                        <input type="text" id="fourstavename" name="fourstavename"  style="width:300px;" />
                                                </td>
                                        </tr>
                                        <tr>
                                                <td>
                                                        <span class="diaFont">描述：</span>
                                                </td>
                                                <td>
                                                        <textarea style="text-align: left;border: 1px solid rgb(217, 217, 217);height: auto;width: 320px;line-height: 16pt;resize:none;"

                                                                rows="5" name="remark1" id="remark1" >

                                                        </textarea>
                                                </td>
                                        </tr>
                                </table>
                        </form>
        </div>

js操作：

function openDialog(name,flag,id,oldFormData){
	   $('#win').dialog({
	   title: name,
	   width: 480,
	   height: 530,
	   top:150,
	   closed: false,//显示对话框
	   cache: false,
	   modal: true,
       buttons:[{
                  text:'取   消',
                  handler:function(){
					  clearForm();
					  $('#win').dialog('close');
				  }
				 },{
					text:'确   定',
					handler:function(){
							var checkFlag = check();
							if(checkFlag){
								if(flag){       // 保存
									$("#editDialogForm").form('submit', {
																url: '/TSM/stovemanager/addStoveManage.action',
																success: function(data){
																	if(JSON.parse(data).rtnFlag){
																		$.messager.show({
																			title:'消息',
																			msg:"<span>添加成功！</span>",
																			height:150,
																			timeout:3000,
																			showType:'show'});
																			
																		// 添加成功清空数据再关闭窗口
																		clearForm();
																		$('#win').dialog('close');
																		// 然后重新加载树
																		$('#grid').datagrid('reload');
																	} else {
																		$.messager.alert('警告',"<span>" + JSON.parse(data).rtnMsg + "</span>");
																	}

                                                                 }
															});
								} else {        // 编辑
									var formData = $("#editDialogForm").serialize();
									// 判断form是否有改变
									if(oldFormData == formData){
										$.messager.confirm('确认',"<span>您未做修改，确认保存么？确认将关闭对话框！</span>",function(r){   
											if (r){   
												// 添加成功清空数据再关闭窗口
												clearForm();
												$('#win').dialog('close');
											}
										}); 
									}else {
										$.messager.confirm('确认',"<span>您确认要更改管控灶信息么？</span>",function(r){
											if (r){
												$.ajax({
													type:'post',
													url : '/TSM/stovemanager/updateStoveManageInfo.action',
													data : formData,
													success : function(data){
														if(data.rtnFlag){
															//$.messager.alert('消息',"<span style='font-size:16px;'>修改成功！</span>",'info');
															$.messager.show({
																	title:'消息',
																	msg:"<span>修改成功！</span>",
																	height:150,
																	timeout:3000,
																	showType:'show'
															});
															// 修改成功清空数据再关闭窗口
															clearForm();
															$('#win').dialog('close');
															// 然后重新加载树
															$('#grid').datagrid('reload');  
														} else {
															$.messager.alert('警告',"<span>" + data.rtnMsg + "</span>");
														}
													},
													error : function(){
														$.messager.alert('警告',"<span>编辑失败，服务器异常！</span>");
													}
												});
											}});
										}
									}
								}
							}
						}],
						onClose:function(){
							clearForm();
						}
			});   
}