jQuery EasyUI快速入门05

最新推荐文章于 2025-03-06 06:02:31 发布

原创最新推荐文章于 2025-03-06 06:02:31 发布 · 252 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#easyui #jquery #前端

本文介绍了jQuery EasyUI中dialog对话框的使用，包括toolbar工具栏配置和表单操作。同时，讲解了后端工作的添加，如servlet的编写，利用`$("表单id").serialize()`方法简化数据传输，以及在servlet中处理数据的方法。最后讨论了HTTP的GET和POST方法的应用场景。

一、前端新增布局

1、 toolbar工具栏的使用

$('#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('帮助按钮')}
	}]
});

dialog对话框窗口的使用
—— 类似Bootstrap中的模态框

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

$('#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);

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

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

在servlet中用try/catch完善

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

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

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

         $("#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')
					}
					}]   
				});    
			})