EasyUI frame 05 - window

1. Messager message window

1.1 confirm confirmation box

confirm of easyUI is loaded asynchronously by default. How to achieve the effect of synchronization? Functions can be used to achieve

For example:

Var operation condition = true;
Function fnc(){
    If (logical condition & & run condition){
         //c = confirm("version purpose change, do you want to keep the test task that version test page has created?");
         $. Messager. Defaults = {OK: 'keep', cancel: 'don't keep'}; / / modify the confirm default button
                        $. messager.confirm('version usage change prompt box ',' version usage change, do you want to keep the test task that the version test page has created? ', function(r){
                                    if( r ){
                                                Operation condition = false;
                                                fnc ();
                                    }  else {
                                                Operation condition = false;
                                                fnc();
                                    }
                        });
            return ;
}

//Restore operating condition state
    Operation condition = true;

//Write logic code below
$.ajax({  ...  });

}

1.2 Show prompt box

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

1.3 Alert pop-up

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

2. Dialog

Interface:

<div id="win" class="easyui-dialog" title="Tips"  style="width: 400px; padding: 10px 20px; height: 410px;"
        closed="true" buttons="#dlg-buttons">                            
                <form action="#" method="post" id="editDialogForm">
                                <!-- Set hidden fields -->
                                <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">Description:</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 operation:

function openDialog(name,flag,id,oldFormData){
	   $('#win').dialog({
	   title: name,
	   width: 480,
	   height: 530,
	   top:150,
	   closed: false,//display a dialog box
	   cache: false,
	   modal: true,
       buttons:[{
                  text:'take&nbsp;&nbsp;&nbsp;eliminate',
                  handler:function(){
					  clearForm();
					  $('#win').dialog('close');
				  }
				 },{
					text:'True&nbsp;&nbsp;&nbsp;set',
					handler:function(){
							var checkFlag = check();
							if(checkFlag){
								if(flag){       // Preservation
									$("#editDialogForm").form('submit', {
																url: '/TSM/stovemanager/addStoveManage.action',
																success: function(data){
																	if(JSON.parse(data).rtnFlag){
																		$.messager.show({
																			title:'news',
																			msg:"<span>Added successfully!</span>",
																			height:150,
																			timeout:3000,
																			showType:'show'});
																			
																		// Add successfully empty data and close the window
																		clearForm();
																		$('#win').dialog('close');
																		// Then reload the tree
																		$('#grid').datagrid('reload');
																	} else {
																		$.messager.alert('warning',"<span>" + JSON.parse(data).rtnMsg + "</span>");
																	}

                                                                 }
															});
								} else {        // edit
									var formData = $("#editDialogForm").serialize();
									// Determine whether the form has changed
									if(oldFormData == formData){
										$.messager.confirm('confirm',"<span>You haven't made any changes, are you sure to save? Confirm will close the dialog!</span>",function(r){   
											if (r){   
												// Add successfully empty data and close the window
												clearForm();
												$('#win').dialog('close');
											}
										}); 
									}else {
										$.messager.confirm('confirm',"<span>Are you sure you want to change the information of the control oven?</span>",function(r){
											if (r){
												$.ajax({
													type:'post',
													url : '/TSM/stovemanager/updateStoveManageInfo.action',
													data : formData,
													success : function(data){
														if(data.rtnFlag){
															//$. messager.alert('message ', "< span style ='font-size: 16px;' > modification succeeded! </span>",'info');
															$.messager.show({
																	title:'news',
																	msg:"<span>Modification succeeded!</span>",
																	height:150,
																	timeout:3000,
																	showType:'show'
															});
															// Clear data after modification and close the window
															clearForm();
															$('#win').dialog('close');
															// Then reload the tree
															$('#grid').datagrid('reload');  
														} else {
															$.messager.alert('warning',"<span>" + data.rtnMsg + "</span>");
														}
													},
													error : function(){
														$.messager.alert('warning',"<span>Edit failed, server exception!</span>");
													}
												});
											}});
										}
									}
								}
							}
						}],
						onClose:function(){
							clearForm();
						}
			});   
}

 

162 original articles published, 7 praised, 5733 visited
Private letter follow

Tags: JSON

Posted on Sun, 02 Feb 2020 11:55:46 -0500 by appels