easyui04

1.dialog组件的使用
    类似Bootstrap中的模态框

<div id="dd" style = "display:none"></div> 
$('#dd').dialog({    
    title: '新增图书',    
    width: 400,    
    height: 250,    
    closed: false,    
    cache: false,    
    href: xPath+'/editBook.jsp',//新增的表单页面    
    modal: true,
    buttons:[{
    text:'保存',
    handler:function(){
        //ajax方法传递数据到servlet中
        $.post("add路径",$("表单id").serialize(),function(data){
            if(data.success){
                $.messager.alert('我的消息','这是一个提示信息！');

            }
        });
    }
    },{
    text:'关闭',
    handler:function(){...}
    }]   
});    
 

2.$("表单id").serialize()
    jQuery中提供的一个方法，可以直接不需要手动获取输入框值，直接打包形成一个url参数拼接。

3.消息框的使用
    $.message.alert();

4.

	$('#dd').dialog({    
		    title: '新增图书',    
		    width: 400,    
		    height: 260,    
		    closed: false,    
		    cache: false,    
		    href: xPath+'/addBook.jsp',    
		    modal: true ,
		    buttons:[{
				text:'新增',
				handler:function(){
					$.ajax({
						url:xPath+"/addBook",
						type:"post",
						data:$('#bookForm').serialize(),//获取表单中的值
						datatype:"text",
						success:function(data){
							let flag=data.message;
							if(flag){
								$.messager.alert('我的消息','新增成功！');
								myload();//刷新界面，
								$('#dd').dialog('close');//关闭界面
							}
						}
					});
				}
			},{
				text:'关闭',
				handler:function(){
					$('#dd').dialog('close');
				}
			}]
		});   

 以上代码弹出对话框窗口

url属性引入表单，代码如下

<div>
	<form id="bookForm">   
		<input type="hidden" name="bid" id="bid"/>
	    <div style="margin: 15px;">   
	        <label for="name">书名:</label>   
	        <input id = "bookname" class="easyui-textbox" name="bname"  style="width:300px" data-options="required:true"> 
	    </div>   
	    <div style="margin: 15px;">   
	        <label for="price">价格:</label>   
	        <input class="easyui-textbox" name="bprice"  style="width:300px" data-options="required:true"> 
	    </div>
	    <div style="margin: 15px;">   
	        <label for="booktype">类型:</label>   
	        <input class="easyui-textbox" name="btype" style="width:300px" data-options="required:true"> 
	    </div>  
	</form>
	</div>