jQuery EasyUI快速入门05

目录

实现增加图书

一、前端新增布局

1、 toolbar工具栏的使用

2、dialog对话框窗口的使用

二、新增后端工作

1、方法的编写

2、sevlet的编写

三、新增前端后端整合

1、$("表单id").serialize()

2、在servlet中用try/catch完善

3、Messager消息窗口的使用

---

实现增加图书

一、前端新增布局

1、 toolbar工具栏的使用

toolbar

array,selector

顶部工具栏的DataGrid面板。可能的值： 1) 一个数组，每个工具属性都和linkbutton一样。 2) 选择器指定的工具栏。 在<div>标签上定义工具栏： $('#dg').datagrid({ toolbar: '#tb' }); <div id="tb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a> </div> 通过数组定义工具栏： $('#dg').datagrid({ toolbar: [{ iconCls: 'icon-edit', handler: function(){alert('编辑按钮')} },'-',{ iconCls: 'icon-help', handler: function(){alert('帮助按钮')} }] });

               html布置图标，设置id

<div id="tb" style="float: left">
<a href="javascript:void(0)" id="addBookId" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"></a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"></a>
</div>

               js设置工具栏

   /*工具栏  */
   toolbar : '#tb'

显示：

 

2、dialog对话框窗口的使用

                     —— 类似Bootstrap中的模态框

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

用div盒子隐藏一个对话框窗口

<div id="dd" style = "display:none"></div> 

js代码调用dialog对话框窗口

$('#dd').dialog({    
    title: '新增图书',    
    width: 400,    
    height: 250,    
    closed: false,    
    cache: false,    
    href: xPath+'/editBook.jsp',//新增的表单页面    
    modal: true,
    buttons:[{
    text:'保存',
    handler:function(){ ... }
    },{
    text:'关闭',
    handler:function(){...}
    }]   
});    

html界面表单

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<div>
	<form id="bookFrom">
		<input type="hidden" name="id" id="id">
		<div style="margin: 15px">
			<label for="bookname">书名：</label> <input class="easyui-textbox"
				data-options="required:true" name="bookname" style="width: 300px">
		</div>
		<div style="margin: 15px">
			<label for="bookprice">价格：</label> <input class="easyui-textbox"
				data-options="required:true" name="bookprice" style="width: 300px">
		</div>
		<div style="margin: 15px">
			<label for="booktype">类型：</label> <input class="easyui-textbox"
				name="booktype" data-options="required:true" style="width: 300px">
		</div>
	</form>
</div>

当点击时显示

 

二、新增后端工作

1、方法的编写

      无返回增加的方法

@Override
	public void addBooks(Books books) {
		Connection conn = null;
		PreparedStatement ps = null;
		String sql = "insert into tb_book select nvl(max(bid),0)+1,?,?,? from tb_book";
		try {
			conn = DBHelper.getConn();
			ps = conn.prepareStatement(sql);
			ps.setString(1, books.getBname());
			ps.setFloat(2, books.getBprice());
			ps.setString(3, books.getBtype());
			ps.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.myClose(conn, ps, null);
		}
	}

2、sevlet的编写

          调用业务逻辑层的增加方法

        request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/json;charset=utf-8");	
		IBooksBiz ibb = new BooksBizImpl();	
		String bname = request.getParameter("bookname");
		Float bprice = Float.valueOf(request.getParameter("bookprice"));
		String btype = request.getParameter("booktype");
		Books books = new Books(bname, bprice, btype);
		ibb.addBooks(books);     

三、新增前端后端整合

1、$("表单id").serialize()

           jQuery中提供的一个方法，可以直接不需要手动获取输入框值，直接打包形成一个url参数拼接。   

      $.ajax({
			url:xPath+'/AddBooks.do',
			data:$('#bookFrom').serialize(),
			type:'post',
			datatype:'JSON',
      }) 

2、在servlet中用try/catch完善

             用Map集合添加，并判断是否成功增加

        try {
			ibb.addBooks(books);
			maps.put("success", true);
		} catch (Exception e) {
			maps.put("success", false);
		}

3、Messager消息窗口的使用

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

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

显示：

完整工具栏增加的点击事件：

         $("#addBookId").click(function(){
				$('#dd').dialog({    
				    title: '新增图书',    
				    width: 400,    
				    height: 250,    
				    closed: false,    
				    cache: false,    
				    href: xPath+'/addBook.jsp',//新增的表单页面    
				    modal: true,
				    buttons:[{
					text:'保存',
					handler:function(){
						$.ajax({
							url:xPath+'/AddBooks.do',
							data:$('#bookFrom').serialize(),
							type:'post',
							datatype:'JSON',
							success:function(data){
								if(data.success){
									$.messager.alert('消息','新增成功');
									$('#dd').dialog('close');
									mydemo();
								}
							}
						}) 
					}
					},{
					text:'关闭',
					handler:function(){
						$('#dd').dialog('close')
					}
					}]   
				});    
			})