Dialog组件
Dialog组件简介
该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。
使用过程中可以查看官方文档：Dialog组件的:
依赖关系，案例，Dialog属性，事件和方法，以及demo
示例
3.使用Javascript创建对话框窗口也是允许的。现在让我们创建一个模式窗口并调用’refresh’方法通过ajax读取内容。
创建js代码块：
$('#dd').dialog({
title: 'My Dialog',
width: 400,
height: 200,
closed: false,
cache: false,
href: 'get_content.php',
modal: true
});
$('#dd').dialog('refresh', 'new_content.php');
使用Javascript创建对话框窗口也是允许的。现在让我们创建一个模式窗口并调用’refresh’方法通过ajax读取内容。
界面引用：
<div id="dd">Dialog Content.</div>
4.找到官方提供的demo示例
目标
1.DataGrid组件实现了查询数据渲染的功能，接下来结合dialog完成增删改的功能。
2.通过新增、修改用户信息，来明确dialog组件及form组件的用法
实现步骤
1.新增和修改不用跳转界面，利用dialog模态框加上内嵌表单和表单的name值
2.点击按钮把数据传到后台，所以要对按钮进行绑定一个点击事件
// 给新增按钮绑定点击事件
$("#btn-add").click(function() {
$("#dd").dialog('open');
})
3.实体类(同步数据库的列字段)
private long id;
private String name;
private String pinyin;
private long cid;
private String author;
private float price;
private String image;
private String publishing;
private String description;
private int state;
private Timestamp deployTime;
private int sales;
4.引入需要使用到的核心库
<!--全局样式 -->
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<!--定义图标 -->
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/icon.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<!--组件库源码的js文件 -->
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/js/book.js"></script>
5.点击新增按钮时触发事件，新增的数据模态框内表单与实体类的对应
<div id="dd" class="easyui-dialog" title="书籍信息编辑窗体"
style="width: 400px; height: 400px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#fbtns'">
<form id="ff" method="post">
<input type="hidden" name="id" />
<div>
<label for="name">书籍名称:</label> <input class="easyui-validatebox"
type="text" name="name" data-options="required:true" />
</div>
<div>
<label for="cid">书籍类别:</label> <input class="easyui-validatebox"
type="text" name="cid" data-options="required:true" />
</div>
<div>
<label for="author">作者:</label> <input class="easyui-validatebox"
type="text" name="author" data-options="required:true" />
</div>
<div>
<label for="price">价格:</label> <input class="easyui-validatebox"
type="text" name="price" data-options="required:true" />
</div>
<div>
<label for="image">图片地址:</label> <input class="easyui-validatebox"
type="text" name="image" data-options="required:true" />
</div>
<div>
<label for="publishing">出版社:</label> <input
class="easyui-validatebox" type="text" name="publishing"
data-options="required:true" />
</div>
<div>
<label for="description">描述:</label> <input
class="easyui-validatebox" type="text" name="description"
data-options="required:true" />
</div>
<div>
<label for="state">物流状态:</label> <input class="easyui-validatebox"
type="text" name="state" data-options="required:true" />
</div>
<div>
<label for="deployTime">发货时间:</label> <input
class="easyui-validatebox" type="text" name="deployTime"
data-options="required:true" />
</div>
<div>
<label for="sales">数量:</label> <input class="easyui-validatebox"
type="text" name="sales" data-options="required:true" />
</div>
</form>
</div>
6.Dao层（查询，修改，删除，新增）方法
package com.houzhihong.dao;
import java.sql.SQLException;
import java.util.List;
import com.houzhihong.entity.Book;
import com.houzhihong.util.BaseDao;
import com.houzhihong.util.PageBean;
import com.houzhihong.util.PinYinUtil;
import com.houzhihong.util.StringUtils;
public class BookDao extends BaseDao<Book> {
// 数据展示，模糊查询
public List<Book> list(Book book, PageBean pageBean) throws Exception {
String name = book.getName();
String sql = "select * from t_easyui_book where true ";
if (StringUtils.isNotBlank(name)) {
sql += " and name like '%" + name + "%' ";
}
return super.executeQuery(sql, Book.class, pageBean);
}
// 增加
public int add(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException,
IllegalAccessException, SQLException {
book.setPinyin(PinYinUtil.getAllPingYin(book.getName()));
String sql = "insert into t_easyui_book values(null,?,?,?,?,?,?,?,?,?,?,?)";
return super.executeUpdate(sql, book, new String[] { "name", "pinyin", "cid", "author", "price", "image",
"publishing", "description", "state", "deployTime", "sales", });
}
// 删除
public int del(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException,
IllegalAccessException, SQLException {
String sql = "delete from t_easyui_book where id=?";
return super.executeUpdate(sql, book, new String[] { "id" });
}
// 修改
public int edit(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException,
IllegalAccessException, SQLException {
book.setPinyin(PinYinUtil.getAllPingYin(book.getName()));
String sql = "update t_easyui_book set name=?,pinyin=?,cid=?,author=?,price=?,image=?,publishing=?,description=?,state=?,deployTime=?,sales=? where id=?";
return super.executeUpdate(sql, book, new String[] { "name", "pinyin", "cid", "author", "price", "image",
"publishing", "description", "state", "deployTime", "sales", "id" });
}
}
7.web层（处理业务逻辑）action
package com.houzhihong.web;
import java.sql.SQLException;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.houzhihong.dao.BookDao;
import com.houzhihong.entity.Book;
import com.houzhihong.framework.ActionSupport;
import com.houzhihong.framework.ModelDriver;
import com.houzhihong.util.DataGridResult;
import com.houzhihong.util.PageBean;
import com.houzhihong.util.ResponseUtil;
import com.houzhihong.util.Result;
public class BookAction extends ActionSupport implements ModelDriver<Book> {
private Book book = new Book();
private BookDao bookDao = new BookDao();
@Override
public Book getModel() {
return book;
}
// 查询，数据展示
public String datagrid(HttpServletRequest req, HttpServletResponse resp) throws Exception {
PageBean pageBean = new PageBean();
pageBean.setRequest(req);
List<Book> list = bookDao.list(book, pageBean);
try {
ResponseUtil.writeJson(resp, DataGridResult.ok(pageBean.getTotal() + "", list));
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
// 判断按钮选的是新增还是修改
public String save(HttpServletRequest req, HttpServletResponse resp) throws Exception {
try {
if (book.getId() != 0) {
this.bookDao.edit(book);
} else {
this.bookDao.add(book);
}
ResponseUtil.writeJson(resp, Result.success);
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (SecurityException e) {
e.printStackTrace();
} catch (IllegalArgumentException e) {
e.printStackTrace();
}
return null;
}
// 删除
public String del(HttpServletRequest req, HttpServletResponse resp)
throws InstantiationException, IllegalAccessException, SQLException {
try {
this.bookDao.del(book);
ResponseUtil.writeJson(resp, Result.success);
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (SecurityException e) {
e.printStackTrace();
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
8.配置好mvc.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<config>
<action path="/permission" type="com.houzhihong.web.PermissionAction"></action>
<action path="/book" type="com.houzhihong.web.BookAction"></action>
</config>
9，js代码块：界面与后台交互（新增，修改，删除）
// 点击搜索按钮完成按名字进行书籍查询
$("#btn-serch").click(function(){
$('#dg').datagrid('load', {
name: $("#name").val()
});
})
//给新增按钮绑定点击事件
$("#btn-add").click(function(){
//需要打开dialog窗体，可以去查看改组件的方法api
$('#dd').dialog('open');
});
//提交新增
$("#btn-save").click(function(){
$('#ff').form('submit',{
url:src+'/book.action?methodName=save',
success:function(data){
data=eval('('+data+')');
if(data.code == 200){
alert(data.msg)
$('#ff').form('clear');
// 关闭模态框
$('#dd').dialog('close');
// 刷新数据
$('#dg').datagrid('reload');
}
}
});
})
//关闭
$("#btn-cancel").click(function(){
// 关闭模态框
$('#dd').dialog('close');
})
})
//修改
function edit(){
// 做数据回显就是将选中的datagrid行值进行回填到from表单
var row =$('#dg').datagrid('getSelected');
// 如果行对象存在就加载到模态框中显示
if(row){
$('#ff').form('load',row);
}
// 显示模态框
$('#dd').dialog('open');
}
//删除
function del(){
// 获取到行对象
var row =$('#dg').datagrid('getSelected');
// 不为空的话就进行下一步处理
if(row){
// 加载ajax进行局部刷新
$.ajax({
// 加载
url:ctx+'/book.action?methodName=del&&id='+row.id,
// 得到成功函数返回的值
success:function(data){
// 将括号内的表达式('data')转化为对象
data=eval('('+data+')');
if(data.code == 200){
alert(data.msg)
// 刷新数据
$('#dg').datagrid('reload');
}
}
});
}
}
效果图
1.增加，修改
900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
